1. Creating Complex Animations
Tutorial 4
Creating Complex Animations

2. 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

3. 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

4. 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

5. 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

6. 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

7. 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

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

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

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

11. 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

12. 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

13. Creating Complex Text Animations
New Perspectives on Adobe Flash Professional CS6

14. 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

15. Animating Individual Letters
New Perspectives on Adobe Flash Professional CS6

16. 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

17. Animating Individual Letters
New Perspectives on Adobe Flash Professional CS6

18. 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

19. 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

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

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

22. 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

23. 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

24. 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

25. 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

26. Using Inverse Kinematics
New Perspectives on Adobe Flash Professional CS6

27. 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

28. 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