1. Tutorial 4Creating Special Animations

2. Objectives • Create an animation using a motion guide layer • Create an animation using a mask layer • Animate text blocks • Animate individual letters within a text block New Perspectives on Adobe Flash CS3

3. Objectives • Test animations using onion skinning • Create nested movie clips • Learn how to use the Movie Explorer New Perspectives on Adobe Flash CS3

4. Creating Animation Using Special Layers • Guide layer • Contains graphic guides for content on other layers • Mask layer • Masks contents of an underlying (masked) layer • Both special layer types can be used in animations New Perspectives on Adobe Flash CS3

5. Using a Motion Guide Layer to Create Animation • A motion guide layer is used with motion tweens • Provides a path for an object in the guided layer • Object follows path throughout the motion tween • Creating a motion guide layer for a motion tween • Create the motion tween on one layer • Select the layer containing the motion tween • Insert a motion guide in the layer above • Draw a path for the object on the motion guide layer • Attach the object to the end of the path New Perspectives on Adobe Flash CS3

6. Motion Guide Layer New Perspectives on Adobe Flash CS3

7. Adding a Motion Guide Layer to the Jenny’s Oyster Hut Banner • Objective: cause a fish to swim along a curved path • Use a motion guide layer to support the animation • Fish follows a parabolic path in the animation • Starts at left, descends to lower middle, rises to right New Perspectives on Adobe Flash CS3

8. Line Drawn with Pencil Tool New Perspectives on Adobe Flash CS3

9. Using a Mask Layer to Create Animation • Select the layer whose content will be masked • In the Timeline, click the Insert Layer button • Add content to the new layer that will be used as the mask • Right-click the new layer’s name, and then click Mask • Unlock the layers and create an animation in either the mask layer or the masked layer • Lock the layers, and then test the animation New Perspectives on Adobe Flash CS3

10. Masked Layer Example New Perspectives on Adobe Flash CS3

11. Masked Layer with Scrolling Text Effect New Perspectives on Adobe Flash CS3

12. Adding a Mask Layer to the Jenny’s Oyster Hut Banner • Objective: add spotlight effect to text block • Spotlight moves across Jenny’s Oyster Hut text • Major tasks • Duplicate current scene in the file to create Scene 3 • Modify Scene 3 to create the spotlight effect New Perspectives on Adobe Flash CS3

13. Circle Drawn in the Mask Layer New Perspectives on Adobe Flash CS3

14. Animating Text Blocks • Techniques: frame-by-frame and tweened animation • Example: text block moving across the Stage • Converting text blocks to fills for shape tweening • Use Break Apart to convert text block to individual letters • Re-use Break Apart against letters to convert them to fills • Conversion from letters to fills is irreversible • Example of a shape tween • Fills representing letters are changed into an oval shape New Perspectives on Adobe Flash CS3

15. Sample Shape Tween New Perspectives on Adobe Flash CS3

16. Adding Animated Text to the Jenny’s Oyster Hut Banner • Objective: add four text blocks • Three out of four text blocks will be animated • Specifications for text block animations • Seafood text block moves in from left • Special text block moves in from right • During text will appear starting with Frame 20 • 10th Anniversary text block grows New Perspectives on Adobe Flash CS3

17. Transform Panel New Perspectives on Adobe Flash CS3

18. Animating Individual Letters • Allows for many interesting text effects • Example 1: letters fall into place one at a time • Example 2: letters of a word pulsate • Creating most effects with individual letters • Break a word into its individual letters • Separately animate letters in their individual layers • Motion tweens simplify animation of letters • Requirement: letter is a symbol residing in its own layer New Perspectives on Adobe Flash CS3

19. Simple Letters Animation New Perspectives on Adobe Flash CS3

20. Distributing Objects to Individual Layers • Distribute to Layers command • Distributes selected objects to individual layers • Original layer with grouped objects is emptied • Name each new layer based on its new content • Using the Distribute to Layers command • Select objects you want to distribute to individual layers • Go to Modify Timeline  Distribute to Layers • Apply command and then rename the layers New Perspectives on Adobe Flash CS3

21. Creating a Complex Text Animation for the Jenny’s Banner • Objective: animate letters in Jenny’s text block • Specifications for individual letters • Break apart Jenny’s text • Distribute letters to individual layers • Alternate colors of letters between yellow and green • Letters at start are slightly transparent and twice the ending size • Each letter is initially rotated at a -45 degree angle • Letters will rotate into place one by one • Letters fade in and decrease in size as they fall in place New Perspectives on Adobe Flash CS3

22. Motion Tweens for Each Layer New Perspectives on Adobe Flash CS3

23. Individual Letters Animation New Perspectives on Adobe Flash CS3

24. Creating Complex Animation with Nested Symbols • Nested symbols • Contains instances of other symbols within its Timeline • Purpose: synchronize animation of object parts • Application: fish swims across stage, fin and tails remain stationary in relation to the fish • Relationship among nested symbols • Parent movie clips contains child movie clips • Changes to the parent clip are passed on to the child clip • Example: instances of fin and tail are nested in fish body New Perspectives on Adobe Flash CS3

25. Example of Nested Movie Clip New Perspectives on Adobe Flash CS3

26. Creating and Testing Animations Using Onion Skinning • Onion skinning shows multiple frames at one time • Helpful when creating frame-by-frame animation • How Flash implements onion skinning • Displays current frame plus two or more frames at once • Content of current frame appears in full color • Contents of frames before and after appear dimmed • Click Onion Skin button on Timeline to activate • Use Edit Multiple Frames to apply group edits New Perspectives on Adobe Flash CS3

27. Onion Skin Options New Perspectives on Adobe Flash CS3

28. Using the Movie Explorer • The Movie Explorer: • Hierarchically displays all of a document’s elements • Provides convenient access to individual elements • Open Movie Explorer from the Windows menu • Primary options: Show buttons and Find search box • A few additional options available in options menu • Go to Location: moves playhead to keyframe of instance • Print: prints a list of the contents of the Movie Explorer New Perspectives on Adobe Flash CS3

29. Movie Explorer New Perspectives on Adobe Flash CS3

30. Movie Explorer Panel Displaying Text Blocks New Perspectives on Adobe Flash CS3