Tutorial 4
Creating Complex Animations
XPXPObjectives• Modify an animation’s motion path• Modify motion tweens using the Motion Editor• Create an animation using a mask layer• Animate text blocks• Animate individual letters within a text block
New Perspectives on Adobe Flash CS4 2
XPXPObjectives• Apply 3D rotation effects to movie clips• Test animations using onion skinning• Create nested movie clips• Create an inverse kinematic animation• Learn how to use the Movie Explorer
New Perspectives on Adobe Flash CS4 3
XPXPModifying Motion Tweens• When you create a motion tween in which an
object moves from one part of the Stage to another, Flash creates a motion path– The motion path guides the object throughout
the animation• You can modify a motion path with the Selection
tool by dragging any segments of the path using the Selection tool pointer the same way you modify a stroke
New Perspectives on Adobe Flash CS4 4
XPXPModifying Motion Tweens
New Perspectives on Adobe Flash CS4 5
XPXPModifying a Tween’s Motion Path• In the Tools panel, click the Selection tool, and then drag
a segment of the motion path to curve it or drag one of its endpoints to extend the path.
• In the Tools panel, click the Subselection tool, click the motion path to select it, and then drag one of its control points to reposition it or click a control point and then drag a Bezier handle to adjust the path’s curve around the control point.
• In the Tools panel, click the Free Transform tool, click the motion path to select it, click the Rotate and Skew modifier or the Scale modifier, and then drag the handles on the path to adjust it.
New Perspectives on Adobe Flash CS4 6
XPXPModifying a Tween’s Motion Path• Select the motion path on the Stage, and then, in
the Property inspector, change its X and Y coordinates or its width and height values.
• Select the motion path on the Stage, and then, in the Transform panel, change the path’s dimensions, rotate properties, or skew properties
New Perspectives on Adobe Flash CS4 7
XPXPModifying a Tween’s Motion Path
New Perspectives on Adobe Flash CS4 8
XPXPUsing the Motion Editor• The Motion Editor displays all properties and
property keyframes for the selected motion tween– Enables you to control the target object’s
coordinates, rotation, and transformation properties at each property’s keyframe
– Select the layer and then click the MOTION EDITOR tab
New Perspectives on Adobe Flash CS4 9
XPXPUsing the Motion Editor
New Perspectives on Adobe Flash CS4 10
XPXPCreating a Mask Layer 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 CS4 11
XPXPCreating a Mask Layer Animation
New Perspectives on Adobe Flash CS4 12
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 a rectangle shape
New Perspectives on Adobe Flash CS4 13
XPXPSample Shape Tween
New Perspectives on Adobe Flash CS4 14
XPXPAnimation Plan for Text Blocks
New Perspectives on Adobe Flash CS4 15
XPXPCreating a Mask Layer Animation
New Perspectives on Adobe Flash CS4 16
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 explode
• 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
layerNew Perspectives on Adobe Flash CS4 17
XPXPSimple Letters Animation
New Perspectives on Adobe Flash CS4 18
XPXPAnimating Individual Letters• On the Stage, select the text block containing the
letters to be animated.• On the Application bar, click Modify, and then click
Break Apart.• On the Application bar, click Modify, point to
Timeline, and then click Distribute to Layers.• Delete the original layer, which is now empty.• If necessary, convert each letter that will be
animated to a symbol with an appropriate name.• Create a motion tween for each letter.New Perspectives on Adobe Flash CS4 19
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
New Perspectives on Adobe Flash CS4 20
XPXPCreating 3D Graphic Effects• A 3D space is created by including the z-axis as a
property of a movie clip instance– You can only apply 3D properties to movie clip
instances– Click Frame of layer you want to rotate, click 3D
Rotation tool
New Perspectives on Adobe Flash CS4 21
XPXPCreating 3D Graphic Effects
New Perspectives on Adobe Flash CS4 22
XPXPCreating a Complex Text Animation with Nested Symbols• A nested symbol is a symbol that contains instances
of other symbols within its Timeline– The nested movie clip instances are referred to as
the child movie clips– The movie clip they are nested within is referred
to as the parent movie clip
New Perspectives on Adobe Flash CS4 23
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 editsNew Perspectives on Adobe Flash CS4 24
XPXPOnion Skin Options
New Perspectives on Adobe Flash CS4 25
XPXPUsing Inverse Kinematics• Inverse kinematics is an animation method used to
create bone structures– A bone is a link from one symbol instance to
another or from one interior part of a shape to another
– Bones move in relation to one another– A chain of bones is called an armature
New Perspectives on Adobe Flash CS4 26
XPXPBones Added to the Plant Leaf Shape
New Perspectives on Adobe Flash CS4 27
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 Window 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
ExplorerNew Perspectives on Adobe Flash CS4 28
XPXPMovie Explorer
New Perspectives on Adobe Flash CS4 29
XPXPMovie Explorer Panel Displaying Text Blocks
New Perspectives on Adobe Flash CS4 30