Tutorial 4 Creating Complex Animations. XP Objectives Modify an animation’s motion path Modify motion tweens using the Motion Editor Create an animation

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


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


XPXPModifying Motion Tweens


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.


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


XPXPModifying a Tween’s Motion Path


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


XPXPUsing the Motion Editor


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.


XPXPCreating a Mask Layer Animation


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


XPXPSample Shape Tween


XPXPAnimation Plan for Text Blocks


XPXPCreating a Mask Layer Animation


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


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


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


XPXPCreating 3D Graphic Effects


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


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


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


XPXPBones Added to the Plant Leaf Shape


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


XPXPMovie Explorer Panel Displaying Text Blocks


Documents

Tutorial 4 Creating Complex Animations. XP Objectives Modify an animation’s motion path Modify motion tweens using the Motion Editor Create an animation