Creating Complex Animations Tutorial 4 Creating Complex Animations

Objectives Modify motion tweens using the Motion Editor Create a mask Create an animation using a mask layer Create a bitmap animation Animate individual letters within a text block Apply 3D rotation effects to movie clips New Perspectives on Adobe Flash Professional CS6

Objectives Create nested movie clips Test animations using onion skinning Create an inverse kinematic animation Use the Movie Explorer New Perspectives on Adobe Flash Professional CS6

Modifying Motion Tweens Changing Tween Properties in the Motion Editor Motion Editor based on a feature of the Adobe After Effects program Motion Editor can be used to: Create motion graphics and visual effects for video Control individual tween properties within their own Timeline Set values of individual property keyframes Add or remove property keyframes Add or remove filters or color effects New Perspectives on Adobe Flash Professional CS6

Modifying Motion Tweens Control an object’s position, rotation, and ease value Add preset eases to a motion tween New Perspectives on Adobe Flash Professional CS6

Using a Mask Layer in an Animation Animations can include a mask layer to create special effects A mask layer can be used with motion tweens and frame-by-frame animations Create a mask layer animation by creating the object to be masked in one layer and adding a new mask layer above it The object on the mask layer can be a filled shape, text, or an instance of a symbol Fill of the shape in the mask layer will reveal the content in the underlying masked layer This shape determines what part of the masked layer’s content is visible New Perspectives on Adobe Flash Professional CS6

Using a Mask Layer in an Animation Color of the shape is irrelevant because color is not displayed Can animate either the object in the mask layer or the object in the masked layer Spotlight effect Scrolling effect When mask layer is first created, Flash locks both the mask and the masked layers Allows preview of the effects of the mask on the Stage When locked, mask layer is not visible Unlock the layers to work with the objects New Perspectives on Adobe Flash Professional CS6

Using a Mask Layer in an Animation Spotlight Effect New Perspectives on Adobe Flash Professional CS6

Using a Mask Layer in an Animation Scrolling Effect New Perspectives on Adobe Flash Professional CS6

Using a Mask Layer in an Animation New Perspectives on Adobe Flash Professional CS6

Animating Bitmaps Animate imported bitmap the same way other objects are animated Can create motion that causes it to move, rotate, change size, or fade in or out Convert the bitmap instance on the Stage to a symbol New Perspectives on Adobe Flash Professional CS6

Creating Complex Text Animations Can make individual letters of a text block rotate and fade in as they appear one at a time on the Stage to form a word or phrase Individual letters can also exhibit a 3D effect as they rotate into place Can apply a shape tween to text Must first convert the text to fills using the Break Apart command New Perspectives on Adobe Flash Professional CS6

Creating Complex Text Animations New Perspectives on Adobe Flash Professional CS6

Animating Individual Letters Animating individual letters allow for many text effects, such as: Letters falling into place one at a time A word exploding with letters flying in different directions Letters of a word increasing and decreasing in size to create a pulsating effect To create most effects: Break a word into its individual letters Separately animate letters, in their individual layers, using motion tweens New Perspectives on Adobe Flash Professional CS6

Animating Individual Letters New Perspectives on Adobe Flash Professional CS6

Animating Individual Letters Creating a Complex Text Animation Create an animation of individual letters rotating one after the other Each letter rotates around an imaginary axis in three-dimensional space Each letter will also increase and decrease in size as it rotates To create animations for the individual letters: Create the text block Convert each letter in that text block into its own individual text block Distribute these individual letter text blocks onto their own layers New Perspectives on Adobe Flash Professional CS6

Animating Individual Letters New Perspectives on Adobe Flash Professional CS6

Animating Individual Letters Distributing Objects to Individual Layers Distribute to Layers command Distributes selected objects to individual layers Each new layer is named based on its new content Original layer with grouped objects is emptied New Perspectives on Adobe Flash Professional CS6

Creating 3D Graphic Effects Objects in Flash have X and Y properties Represent the object’s horizontal and vertical coordinates relative to the Stage Adding the z property creates the illusion of depth Create 3D effects by moving and rotating movie clips in 3D space Can only apply 3D properties to movie clip instances Use the 3D Translation tool to move instances along the z-axis Use the 3D Rotation tool to rotate instances around the x- or y-axis New Perspectives on Adobe Flash Professional CS6

Creating 3D Graphic Effects New Perspectives on Adobe Flash Professional CS6

Creating 3D Graphic Effects New Perspectives on Adobe Flash Professional CS6

Animating Nested Symbols By adding more layers to the document’s main Timeline, you can create complex animation effects Creating Complex Animations 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 When you modify or animate the parent movie clip, the child movie clips are also affected New Perspectives on Adobe Flash Professional CS6

Animating Nested Symbols Creating a Nested Movie Clip Symbol Create a frame-by-frame animation for the object Change the shape of the object slightly at each keyframe for the total number of desired frames New Perspectives on Adobe Flash Professional CS6

Using Onionskinning with Complex Animations Onion skinning shows multiple frames at one time Helpful when creating frame-by-frame animation Content of current frame displays in full color The contents of the frames within the onion skin markers are displayed on the Stage Click the Onion Skin Outlines button to display only the outlines of the content on the Stage Helpful when working with complex animations Use Edit Multiple Frames button to make the content of all frames in a frame-by-frame animation within the onionskin markers available for editing New Perspectives on Adobe Flash Professional CS6

Using Inverse Kinematics Inverse kinematics enables the animation of one or more objects in relation to each other Let you easily create complex animations and natural movement Can be used to create character animations in which the arms and legs of a body are connected to each other with bones Not every single movement has to be defined, just the start and end positions Bones move in relation to one another Bones can be added to connect one symbol instance to another or from one interior part of a shape to another A chain of bones is called an armature New Perspectives on Adobe Flash Professional CS6

Using Inverse Kinematics New Perspectives on Adobe Flash Professional CS6

Using the Movie Explorer Movie Explorer can help users to: View each of the document’s elements Search for a specific element Find all instances of a particular symbol Print a list of the document’s elements Which elements to display can be chosen by users Display only text blocks used in document Display each instance of the symbols used When an instance is selected, information about where the instance is located appears at the bottom of the panel New Perspectives on Adobe Flash Professional CS6

Using the Movie Explorer The Panel Menu button provides access to other options Go to Symbol Definition Show in Library Show Movie Elements Show Symbol Definitions Show All Scenes New Perspectives on Adobe Flash Professional CS6