1. Tutorial 3
Creating Animations

2. Objectives Learn the different elements of animation
Create frames and layers
Organize frames and layers using the Timeline
Work with scenes

3. Objectives (continued)
Create Timeline effects
Create frame-by-frame animations
Create tweened animations
Create a graphic symbol animation

4. Elements of Animation
Animation changes the content of an object in time
Layers: planes organizing Flash document content
Guide layers
Align objects on other layers to objects on guide layer
Contents of guide layer do not appear in SWF file
Motion guide layer: provides path for an object to follow
Guided layer: layer below motion guide layer

5. Elements of Animation (continued)
Mask layers
Reveal portions of a masked (underlying) layer
Graphic objects on mask layer define the visible region
Frames
Contain the content for an animation
Represent a particular instant in time
Keyframe: represents content change from previous frame

6. The Timeline Timeline A few elements of the Timeline
Grid appearing above the Stage in the program window
Used to create, modify, and organize layers and frames
Coordinates display of frames used in animation
A few elements of the Timeline
Layers and layer controls are located on the left
Frames for a layer are shown to the right of the layer
Keyframes: change frames with a white or black dot
Playhead: red rectangle with red vertical line below it

7. Timeline of a Sample Document

8. Changing the View of the Timeline
One method: close panels on right side of window
Options available on Frame View pop-up menu
Tiny, Small, Normal, Medium, and Large frame widths
Preview: shows thumbnail of frame content (scaled)
Preview in Context: shows entire frame’s content
Tinted Frames: color coded frames based on content

9. Timeline’s Frame View Pop-Up Menu

10. Organizing Layers Using the Timeline
To select a layer you click it in the Timeline
Delete a selected layer by clicking Delete Layer
Click Delete Layer button at the bottom of the Timeline
Adding more layers
Click the Insert Layer button on the Timeline
Layer Properties dialog box
Controls layer properties, such as name and layer height
Advice: insert new layers as you add new content

11. Layer Properties Dialog Box

12. Adding Layer Folders Layer folder: Timeline container holding layers
Layers placed in a folder are indented to the right
Layer folders help organize content
Layer folders can be collapsed to reduce clutter
Inserting and using layer folders
Click Layer Folder button
Change the name of the layer folder
Click and drag layers into the new folder

13. Adding Layer Folders

14. Selecting, Copying, and Moving Frames
Actions allowed on one layer or between layers
Selecting frames
Individual: click single frame in Timeline
Multiple: click and drag mouse pointer across frames
Copying and moving selected frames
Right-click frames and then select Copy Frames
Right-click frames and then select Cut Frames
Use Paste Frame on target frame to finish copy/move

15. Scenes and Multiple Timelines
Scenes break up a document into smaller sections
Each new scene has a separate timeline
Using the Scene panel
Path to Scene panel: Window  Other Panels  Scene
Actions: add, delete, duplicate, and move scenes
Adding a duplicate scene to the Flounders banner
Sequence 1: fish swimming across Stage with a sale sign
Sequence 2: several fish swimming, plant leaves moving

16. Multiple Scenes in One Document

17. Creating Animation Displaying frames in rapid succession
Timeline effects: animation created by Flash
Frame-by-frame animation
Developer creates content for each frame
Tweened animation
Developer creates content for beginning and ending frames
Flash creates content for the in-between frames

18. Timeline Effects Accessing Timeline effect dialog boxes
Select object to which effect will be applied
Click Insert and then point to Timeline
Submenu items: Assistants, Effects, Transform/Transition
Select submenu item to open dialog box
Using a Timeline effect dialog box
Preview effect in the right pane of the dialog box
Change the settings and Update Preview to apply them
Timeline effects can be modified or removed

19. Example of a Timeline Effect Dialog Box

20. Adding a Timeline Effect to the Flounders Pet Shop Banner
Scene 1 will involve a fish moving with a sign
Use Transform Timeline effect to animate Scene 1
Overview of tasks
Select, sign, line and fish all at once
Open Transform dialog box
Change settings: frame number, position, motion ease
Click Update Preview
Click OK to close dialog and create effect in Timeline

21. Settings for Transform Timeline Effect

22. Frame-by-Frame Animation
Requires content be added to all frames in animation
Example: 15 frames must each be supplied with content
Graphic object need not change in every frame
Creating a frame-by-frame animation
Start with a graphic object in the initial frame
Add a keyframe where you need the object to change
As you add keyframes, you change the object’s position
Test the animation after all keyframes are added

23. Sample Frame-by-Frame Animation

24. Adding Frame-by-Frame Animation to the Flounders Pet Shop Banner
Banner has graphic element resembling a plant
Animating the plant
Convert plant graphic into a symbol
Move leaves using frame-by-frame animation
Leaves are animated in Timeline of plant symbol
Suggestions for creating illusion of movement
Add keyframes on every other frame from 1 to 9
Move the tips of the leaves slightly in each keyframe

25. Testing a Document’s Animation
Purpose: ensure that a document works correctly
Several techniques for testing animation
Click Play command on the Control menu
Press Enter on the keyboard
Drag playhead back and forth through frames (scrubbing)
Click Test Movie command on the Control menu
Point to File Publish Preview, click Default (HTML)

26. Tweened Animation Flash varies content between two keyframes
Comparison with frame-by frame animation
Tweened animation is quicker
Tweened animation does not provide as much control
Motion tweening
Object changes position or color, rotates, scales in size
Shape tweening
Changes a shape into another shape over time

27. Motion Tweening Requirement: animated object must be a symbol
Animated object should be placed on a separate layer
Overview of process for creating a motion tween
Place symbol instance in a keyframe
Create a keyframe where the animation will end
Change position or color properties of the object
Go back to first keyframe and create the animation
Creating a motion tweened animation
Fish swims between sides of tank in 48 frames

28. Motion Tweening: Property Inspector with Motion Tweened Options

29. Shape Tweening Object used must not be a symbol or grouped object
Requirement differs from that for motion tweens
Creating a shape tween
Insert object into first keyframe
Add keyframe at the end of the animation
Change shape of object at terminal end
Return to first keyframe and create the animation
Flounders Pet Shop banner does not use shape tween

30. Graphic Symbol Animations
Graphic symbols have their own Timeline
Frames are synchronized with document’s main Timeline
Multiple instances can have different starting frames
Instances display their animation when you scrub playhead
Creating graphic symbol animations
Follow procedure for creating a movie clip animation
Property inspector can be used to indicate start frame
Graphic can play continuously, once, or only one frame

31. Graphic Instance Properties in the Property Inspector

32. Graphic Symbol Animations (continued)
Plan for animated text in Flounders Web Site banner
Words “Fish” and “Aquarium” are displayed on the Stage
Words will display one at a time
Words will continuously change from one to the other
Animation will appear in several places
Implementing animated text display
Create a primary graphic symbol animation
Create several instances of the symbol in the Intro scene
Set each instance to begin animation in a different frame

33. Graphic Symbol Instances