2D Design and Animation

Introduction to Flash – IT2D102

WHAT IS FLASH ?

• Flash is a multimedia platform.• is used to create advertisements

and games.• is a tool for RIA’s (Rich Internet Applications)• can add animation, video and

interactivity to web pages.

• It can manipulate vector and raster graphics for animation.

• It supports bidirectional streaming of both audio and video

• It can capture user input via mouse, keyboard, microphone, and camera.

• It contains Object-Oriented Programming Language called ActionScript

• It can also create mobile applications using Flash Lite

• It can create amazing presentations far better than powerpoint.

HISTORY OF FLASH

• It was originally developed by Macromedia

• Introduced in 1996• Successor of Future Splash (1995)• From Smartsketch

> Future Splash > Macromedia Flash

> Adobe Flash

VERSIONS OF FLASH

• Future Splash Animator (1996)• Macromedia (1-5) (1996-2000)• Flash MX (2002)• Flash MX 2004 (2003) • Macromedia Flash 8 (2005)• Adobe Flash CS3 (2007) • Adobe Flash CS4 (2008)• Adobe Flash CS5 (2010)• Adobe Flash CS5.5 (2011)• Adobe Flash CS6 (2012)• Adobe Flash CC (2013)

STARTING FLASH

The first time you start flash, you will see a Welcome screen.

• Choose -> Start -> All Programs -> Adobe CS6 Flash.

• Choose File> Open. It will open n open dialog box.

WELCOME SCREEN

CHOOSING ACTIONSCRIPT 3.0

• Choose File > New. The new document dialog box opens.

• Under general tab, choose ActionScript 3.0

LIBRARY PANEL• Stores symbols as well as assets;

images, sounds, and video files that you’ve imported or created inside your Flash document.

• Manages library’s contents.• Lets you view, sort, edit, and return

information on symbols.

a. Importing an Item to the Library Panel b. Adding an item from

Library Panel to the Stage

Drawing Environment

• Flash features a complete set of drawing tools to handle intricate illustration and typography.

• Flash is a native vector drawing application where you can create rich, detailed, and scalable digital illustrations.

• Flash now supports Illustrator and Photoshop files in their native file formats, .ai and .psd, making it easy to work with your favorite applications.

• All the content you create in Flash or these other programs can be brought to life through animation and interactivity.

Animation

• Flash creates lightweight animation that incorporates images, sound, and video, and can be quickly downloaded through the web.

Animation

• Flash animation is featured on web sites, CD-ROMs, and interactive games, and has become very popular for developing interactive, web-based advertisements.

Animation

• Flash’s compact files make it the ideal application for creating animated content, games, and applications for mobile phones and PDAs.

Animation

• Flash supports traditional frame-by-frame animation as well as its own method of animation, known as tweening.

Animation

• With tweening, you specify an object to animate, create starting and ending frames, and Flash automatically creates the frames in between (hence tween) to create slick motion, color, and transformation effects.

Layout

• The Flash Stage gives you the flexibility to create extraordinary web site layouts without the design restrictions that are typical of HTML-based web pages.

• You can position content anywhere on the Flash Stage with flexibility and precision, taking your layouts far beyond the limitations of static web pages.

Flash Player VS. Adobe Flash

• The Flash Player is a standalone application found most often as a plug-in to such popular browsers as Internet Explorer, Safari, and Firefox.

• While Adobe Flash is the authoring multimedia platform itself that publishes SWF files to be played on the browser by the Adobe Flash Player.

Flash File Types

• .fla (can only be opened within Adobe Flash)

• .swf (compressed movie file published within Adobe Flash can be played by the Adobe Flash Player)

Starting Flash and Opening a File

• Start > All Programs > Adobe Flash CS6

• Choose File > Open > Select File• Option to File>Publish Preview >

HTML ( it creates an HTML or an SWF file to display)

Creating a New Document

• File > New New Document dialog box opens.

Choose ActionScript 3.0, the latest version of Flash’s Scripting language. It creates a new document configured for playback in a desktop browser such as Chrome, Safari, or Firefox with flash player.

Creating a New Document

Right-hand side dialog box

This is the selection of the dimensions of the stage by entering pixel values for the width and height.

FOR STARTER: Enter 800 for width and 600 for height. Ruler units as PIXELS. Keep the rest of the values in default.

• File > Save Filename: SURNAME_Exercise01_X22

FLASH CS6 WORKSPACE

This is the default display.

CHOOSING A NEW WORKSPACE

Try predefined workspaces. The various panels are rearranged and resized according to their importance to the particular user.

RESETTING WORKSPACE (Window>Workspace>Reset)

Reminder: We will be using Essentials Workspace

Saving your own workspace

You can create your own workspace to work on.

The Stage

The big white rectangle in the middle of the screen is called the stage.

Rulers ( View > Rulers) Grid ( View > Grid > Show Grid)

MORE ON STAGE

Scale the Stage

Changing the Stage properties

DEMO

End of Module 1