Tutorial 4

1
Tutorial 4

• Creating Special Animations

2
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

3
Objectives (continued)

• Test animations using onion skinning
• Create nested movie clip symbols
• Learn how to use the Movie Explorer

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

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

6
Motion Guide Layer
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
  

8
Line Drawn with Pencil Tool
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

10
Masked Layer Example
11
Animated Picture Masked with Text
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

13
Oval Drawn to Mask Text
14
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

15
Sample Shape Tween
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

17
Transform Panel
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

19
Simple Letters Animation
20
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

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

22
Motion Tweens for Each Layer
23
Individual Letters Animation
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

25
Onion Skin Options
26
Complex Animation with Nested Symbols

• 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
  

27
Example of Nested Movie Clip
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

29
Nested Movie Clip Instance Added to Stage
30
Using the Movie Explorer

• The Movie Explorer panel
• Hierarchically displays all of a documents
  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

31
Movie Explorer
32
Movie Explorer Panel Displaying Text Blocks