1. Creating Special Animations
Tutorial 4
Creating Special Animations

2. New Perspectives on Macromedia Flash 8
Objectives
Create an animation using a motion guide layer
Create an animation using a mask layer
Animate text blocks
Animate individual letters within a text block
New Perspectives on Macromedia Flash 8

3. Objectives (continued)
Test animations using onion skinning
Create nested movie clip symbols
Learn how to use the Movie Explorer
New Perspectives on Macromedia Flash 8

4. Creating Animation Using Special Layers
Guide layer
Contains graphic guides for content on other layers
Mask layer
Masks contents of an underlying (masked) layer
Both special layer types can be used in animations
New Perspectives on Macromedia Flash 8

5. Animation Using a Motion Guide Layer
A motion guide layer is used with motion tweens
Provides a path for an object in the guided layer
Object follows path throughout the motion tween
Creating a motion guide layer for a motion tween
Create the motion tween on one layer
Select the layer containing the motion tween
Insert a motion guide in the layer above
Draw a path for the object on the motion guide layer
Attach the object to the end-points of the path
New Perspectives on Macromedia Flash 8

6. New Perspectives on Macromedia Flash 8
Motion Guide Layer
New Perspectives on Macromedia Flash 8

7. Adding a Motion Guide Layer to the Flounders Pet Shop Banner
Objective: cause a fish to swim along a curved path
Use a motion guide layer to support the animation
Fish follows a parabolic path in the animation
Starts at lower left, rises to top, descends to lower right
New Perspectives on Macromedia Flash 8

8. Line Drawn with Pencil Tool
New Perspectives on Macromedia Flash 8

9. Animation Using a Mask Layer
One way to create an animation using a mask
Create object that will be masked on one layer
Add a new layer above it that will contain the mask
Right-click the top layer
Select Mask from the context menu
Convert a layer to a mask using Layer Properties
Objects on mask layer: filled shape, text, instance
Masking an object reveals underlying content only
New Perspectives on Macromedia Flash 8

10. New Perspectives on Macromedia Flash 8
Masked Layer Example
New Perspectives on Macromedia Flash 8

11. Animated Picture Masked with Text
New Perspectives on Macromedia Flash 8

12. Adding a Mask Layer to the Flounders Pet Shop Banner
Objective: add spotlight effect to text block
Spotlight moves across Flounders Pet Shop text
Major tasks
Duplicate current scene in the file to create Scene 3
Modify Scene 3 to create the spotlight effect
New Perspectives on Macromedia Flash 8

13. New Perspectives on Macromedia Flash 8
Oval Drawn to Mask Text
New Perspectives on Macromedia Flash 8

14. New Perspectives on Macromedia Flash 8
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 an oval shape
New Perspectives on Macromedia Flash 8

15. New Perspectives on Macromedia Flash 8
Sample Shape Tween
New Perspectives on Macromedia Flash 8

16. Adding Animated Text to the Flounders Pet Shop Banner
Objective: add four text blocks
Three out of four text blocks will be animated
The And text block will not be animated
Specifications for text block animations
Tropical text block moves off sides to center of Stage
Fish text block moves off sides to center of Stage
And text block appears in center halfway through
Aquarium Sale text block grows from halfway point
New Perspectives on Macromedia Flash 8

17. New Perspectives on Macromedia Flash 8
Transform Panel
New Perspectives on Macromedia Flash 8

18. 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 pulsate
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 Macromedia Flash 8

19. Simple Letters Animation
New Perspectives on Macromedia Flash 8

20. New Perspectives on Macromedia Flash 8
Distribute to 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 Macromedia Flash 8

21. Creating a Complex Text Animation for the Flounders Banner
Objective: animate letters in Flounders text block
Specifications for individual letters
Break apart Flounders text
Distribute letters to individual layers
Alternate colors of letters between yellow and green
Letters at start are slightly faded and twice the ending size
Each letter is initially rotated at a -45 degree angle
Letters will rotate into place one by one
Letters fade in and decrease in size as they fall in place
New Perspectives on Macromedia Flash 8

22. Motion Tweens for Each Layer
New Perspectives on Macromedia Flash 8

23. Individual Letters Animation
New Perspectives on Macromedia Flash 8

24. 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 Macromedia Flash 8

25. New Perspectives on Macromedia Flash 8
Onion Skin Options
New Perspectives on Macromedia Flash 8

26. Complex Animation with Nested Symbols
Contains instances of other symbols within its Timeline
Purpose: synchronize animation of object parts
Application: fish swims across stage, fin and tails move
Relationship among nested symbols
Parent movie clips contains child movie clips
Changes to the parent clip are passed on to the child clip
Example: instances of fin and tail are nested in fish body
New Perspectives on Macromedia Flash 8

27. Example of Nested Movie Clip
New Perspectives on Macromedia Flash 8

28. Creating a Nested Movie Clip for the Flounders Banner
Objective: animate tail and fins of moving fish
Suggestion: used nested movie clip symbols
Instances to group: fish body, fin, and tail
Overview of tasks
Create frame-by-frame animations for the fin and tail
Nest two fin movie clips and tail clip in the fish body
Insert nested movie clip into Fish Swimming scene
New Perspectives on Macromedia Flash 8

29. Nested Movie Clip Instance Added to Stage
New Perspectives on Macromedia Flash 8

30. Using the Movie Explorer
The Movie Explorer panel
Hierarchically displays all of a document’s elements
Provides convenient access to individual elements
Open Movie Explorer from the Windows 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 Macromedia Flash 8

31. New Perspectives on Macromedia Flash 8
Movie Explorer
New Perspectives on Macromedia Flash 8

32. Movie Explorer Panel Displaying Text Blocks
New Perspectives on Macromedia Flash 8