Tutorial 4. Creating Special Animations

Transcription

1 Tutorial 4 Creating 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 2

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

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 4

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 5

6 Motion Guide Layer New Perspectives on Adobe Flash CS3 6

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 7

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

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 9

10 Masked Layer Example New Perspectives on Adobe Flash CS3 10

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

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 12

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

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 14

15 Sample Shape Tween New Perspectives on Adobe Flash CS3 15

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 th Anniversary text block grows New Perspectives on Adobe Flash CS3 16

17 Transform Panel New Perspectives on Adobe Flash CS3 17

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 18

19 Simple Letters Animation New Perspectives on Adobe Flash CS3 19

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 20

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 21

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

23 Individual Letters Animation New Perspectives on Adobe Flash CS3 23

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 24

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

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 26

27 Onion Skin Options New Perspectives on Adobe Flash CS3 27

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 28

29 Movie Explorer New Perspectives on Adobe Flash CS3 29

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