Tutorial 4
Creating Special
Animations
Objectives
•
•
•
•
XP
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 Adobe Flash CS3
2
Objectives
XP
• Test animations using onion skinning
• Create nested movie clips
• Learn how to use the Movie Explorer
New Perspectives on Adobe Flash CS3
3
Creating Animation Using Special
Layers
XP
• 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 Adobe Flash CS3
4
Using a Motion Guide Layer to
Create Animation
XP
• 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 of the path
New Perspectives on Adobe Flash CS3
5
Motion Guide Layer
New Perspectives on Adobe Flash CS3
XP
6
Adding a Motion Guide Layer to the XP
Jenny’s Oyster Hut 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 left, descends to lower middle, rises to right
New Perspectives on Adobe Flash CS3
7
Line Drawn with Pencil Tool
New Perspectives on Adobe Flash CS3
XP
8
Using a Mask Layer to Create
Animation
XP
• 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 CS3
9
Masked Layer Example
New Perspectives on Adobe Flash CS3
XP
10
Masked Layer with Scrolling Text
Effect
New Perspectives on Adobe Flash CS3
XP
11
Adding a Mask Layer to the Jenny’s
Oyster Hut Banner
XP
• Objective: add spotlight effect to text block
• Spotlight moves across Jenny’s Oyster Hut text
• Major tasks
– Duplicate current scene in the file to create Scene 3
– Modify Scene 3 to create the spotlight effect
New Perspectives on Adobe Flash CS3
12
Circle Drawn in the Mask Layer
New Perspectives on Adobe Flash CS3
XP
13
Animating Text Blocks
XP
• 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 Adobe Flash CS3
14
Sample Shape Tween
New Perspectives on Adobe Flash CS3
XP
15
Adding Animated Text to the
Jenny’s Oyster Hut Banner
XP
• Objective: add four text blocks
• Three out of four text blocks will be animated
• Specifications for text block animations
– Seafood text block moves in from left
– Special text block moves in from right
– During text will appear starting with Frame 20
– 10th Anniversary text block grows
New Perspectives on Adobe Flash CS3
16
Transform Panel
New Perspectives on Adobe Flash CS3
XP
17
Animating Individual Letters
XP
• 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 Adobe Flash CS3
18
Simple Letters Animation
New Perspectives on Adobe Flash CS3
XP
19
Distributing Objects
to Individual Layers
XP
• 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 CS3
20
Creating a Complex Text Animation
for the Jenny’s Banner
XP
• Objective: animate letters in Jenny’s text block
• Specifications for individual letters
–
–
–
–
Break apart Jenny’s text
Distribute letters to individual layers
Alternate colors of letters between yellow and green
Letters at start are slightly transparent 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 Adobe Flash CS3
21
Motion Tweens for Each Layer
New Perspectives on Adobe Flash CS3
XP
22
Individual Letters Animation
New Perspectives on Adobe Flash CS3
XP
23
Creating Complex Animation with
Nested Symbols
XP
• Nested symbols
– Contains instances of other symbols within its Timeline
– Purpose: synchronize animation of object parts
– Application: fish swims across stage, fin and tails remain
stationary in relation to the fish
• 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 Adobe Flash CS3
24
Example of Nested Movie Clip
New Perspectives on Adobe Flash CS3
XP
25
Creating and Testing Animations
Using Onion Skinning
XP
• 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 CS3
26
Onion Skin Options
New Perspectives on Adobe Flash CS3
XP
27
Using the Movie Explorer
XP
• The Movie Explorer:
– 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 Adobe Flash CS3
28
Movie Explorer
New Perspectives on Adobe Flash CS3
XP
29
Movie Explorer Panel Displaying
Text Blocks
New Perspectives on Adobe Flash CS3
XP
30