Tutorial 4 Creating Special Animations

XP 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 CS32

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

XP 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 CS34

XP 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 CS35

XP Motion Guide Layer New Perspectives on Adobe Flash CS36

XP 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 CS37

XP Line Drawn with Pencil Tool New Perspectives on Adobe Flash CS38

XP 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 CS39

XP Masked Layer Example New Perspectives on Adobe Flash CS310

XP Masked Layer with Scrolling Text Effect New Perspectives on Adobe Flash CS311

XP 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 CS312

XP Circle Drawn in the Mask Layer New Perspectives on Adobe Flash CS313

XP 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 CS314

XP Sample Shape Tween New Perspectives on Adobe Flash CS315

XP 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 – 10 th Anniversary text block grows New Perspectives on Adobe Flash CS316

XP Transform Panel New Perspectives on Adobe Flash CS317

XP 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 CS318

XP Simple Letters Animation New Perspectives on Adobe Flash CS319

XP 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 CS320

XP 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 CS321

XP Motion Tweens for Each Layer New Perspectives on Adobe Flash CS322

XP Individual Letters Animation New Perspectives on Adobe Flash CS323

XP 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 CS324

XP Example of Nested Movie Clip New Perspectives on Adobe Flash CS325

XP 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 CS326

XP Onion Skin Options New Perspectives on Adobe Flash CS327

XP 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 CS328

XP Movie Explorer New Perspectives on Adobe Flash CS329

XP Movie Explorer Panel Displaying Text Blocks New Perspectives on Adobe Flash CS330