Tutorial 4 Creating Special Animations. XP Objectives Create an animation using a motion guide layer Create an animation using a mask layer Animate text

Tutorial 4

Creating Special Animations

XPXPObjectives• 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

XPXPObjectives• Test animations using onion skinning• Create nested movie clips• Learn how to use the Movie Explorer


XPXPCreating 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


XPXPUsing 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


XPXPMotion Guide Layer


XPXPAdding 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


XPXPLine Drawn with Pencil Tool


XPXPUsing 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 animationNew Perspectives on Adobe Flash CS3 9

XPXPMasked Layer Example


XPXPMasked Layer with Scrolling Text Effect


XPXPAdding 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


XPXPCircle Drawn in the Mask Layer


XPXPAnimating 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


XPXPSample Shape Tween


XPXPAdding 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


XPXPTransform Panel


XPXPAnimating 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


XPXPSimple Letters Animation


XPXPDistributing 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


XPXPCreating 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


XPXPMotion Tweens for Each Layer


XPXPIndividual Letters Animation


XPXPCreating 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


XPXPExample of Nested Movie Clip


XPXPCreating 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


XPXPOnion Skin Options


XPXPUsing 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


XPXPMovie Explorer


XPXPMovie Explorer Panel Displaying Text Blocks


Documents

Tutorial 4 Creating Special Animations. XP Objectives Create an animation using a motion guide layer Create an animation using a mask layer Animate text