Introduction to Flash Animation RMIK Jayasinghe (M. Sc. in Computer Science, B. Sc., SLTS)

What is Adobe Flash? “The professional standard for producing high-impact Web experiences” - Adobe Web development tool that can incorporate: Graphics Animation and video Sound Interactivity 2

What is Flash used for? Graphics Animations Interactive navigation systems Web-based applications and databases Product simulations Screensavers Web-based training and instruction (“e-learning”) Rich-media advertisements Why is Flash so popular? Very flexible and powerful Low-bandwidth files Large install base for Flash player Extensive community of Flash users and development resources online Relatively inexpensive Relatively easy to learn??? 3

File Types Source (.fla) Files The source Flash movie used to create, edit, and work on movies Can be used to restore the other file types Can be opened and modified by anyone who has the Macromedia Flash program Cannot be put on a Web page for people to view; only contain source content Exported (.swf) Files Published/exported/created using.fla source file Can be viewed by anyone with a Web browser and the Flash Player plug-in installed Cannot be edited by audience Analogous to an executable (.exe) file created by a Visual Basic program HTML (.html or.htm) Files.swf files are often incorporated or added to traditional HTML web pages 4

Actions Panel Tools Panel 5

Important Components Stage: where the action takes place Be sure to set the stage dimensions before you do any development This determines the animation's size on your Web page Layers Allow you to separate and stack objects All layers cover entire the stage surface Like transparent pieces of paper stacked on each other Animation objects move within a layer Timelines Every layer has a separate timeline Timeline is broken into frames that correspond to different times in the animation When you select a frame, the stage shows what will appear in that layer at that time The playhead shows the current frame that is playing 6

7 Current Frame Frame Label Key Frame With ActionScripting Key Frame With Label Layers Keyframes Current Layer

Timelines Consist of layers divided into frames Frame: location and length of time that a symbol or graphic in a layer appears Default: 12 ms/frame An item won't appear in a movie at a particular time unless its layer has a frame at that time Playhead Indicates the current frame displaying on the stage Keyframe Frame that defines an object at a given point in time Used to define animation starting and ending points Empty circle – keyframe with no content Filled circle – keyframe with content When you make a new layer, it automatically has a keyframe in Frame 1 8

9

10 Note: