Tutorial 4 Creating Complex Animations

XP Objectives 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 CS42

XP Objectives 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 CS43

XP Modifying 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 CS44

XP Modifying Motion Tweens New Perspectives on Adobe Flash CS45

XP Modifying 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 CS46

XP Modifying 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 CS47

XP Modifying a Tween’s Motion Path New Perspectives on Adobe Flash CS48

XP Using 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 CS49

XP Using the Motion Editor New Perspectives on Adobe Flash CS410

XP Creating 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 CS411

XP Creating a Mask Layer Animation New Perspectives on Adobe Flash CS412

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 a rectangle shape New Perspectives on Adobe Flash CS413

XP Sample Shape Tween New Perspectives on Adobe Flash CS414

XP Animation Plan for Text Blocks New Perspectives on Adobe Flash CS415

XP Creating a Mask Layer Animation New Perspectives on Adobe Flash CS416

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 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 layer New Perspectives on Adobe Flash CS417

XP Simple Letters Animation New Perspectives on Adobe Flash CS418

XP Animating 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 CS419

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 CS420

XP Creating 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 CS421

XP Creating 3D Graphic Effects New Perspectives on Adobe Flash CS422

XP Creating 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 CS423

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 CS424

XP Onion Skin Options New Perspectives on Adobe Flash CS425

XP Using 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 CS426

XP Bones Added to the Plant Leaf Shape New Perspectives on Adobe Flash CS427

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 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 Explorer New Perspectives on Adobe Flash CS428

XP Movie Explorer New Perspectives on Adobe Flash CS429

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