Chapter 4:
Creating Animation
© 2010 Delmar, Cengage Learning
Chapter 4 Lessons
1.
2.
3.
4.
5.
6.
Create motion-tween animation
Create classic-tween animation
Create frame-by-frame animation
Create shape tween animations
Create movie clips
Animate text
© 2010 Delmar Cengage Learning
Introduction
• Animation is an important part of a
Web site in
– E-commerce
– Education
– Entertainment
© 2010 Delmar Cengage Learning
How Animation Works
• Animation is made up of a series of still images
• “Persistence of Vision” is the basis for frame rates in
animations
• Frames rates of 10-12 fps generally provide smooth
computer-based animation
– Frame rates lower than 10-12 fps often result in
jerky images
– Higher frame rates may result in blurred images
• Flash uses default frame rate of 12 fps
© 2010 Delmar Cengage Learning
Flash Animation
• Animation is one of the most powerful
features of Flash
• Basic animation is a simple process
– Move an object around the stage
– Change an object’s size, shape, color
– Apply Special Effects, such as zooming,
fading, or a combination of effects
© 2010 Delmar Cengage Learning
Flash Animation
• Two animation methods
– Frame-by-frame animation
– Tweened animation (motion, classic,
shape)
© 2010 Delmar Cengage Learning
Understanding Motion Tween
Animation
• Motion tweening is less tedious than frame
animation
– Create a Start and End frame
– Flash creates the “in-between” frames
• Flash only stores the attributes that change
from frame to frame, thus creating smaller
file sizes than frame animation
© 2010 Delmar Cengage Learning
Create Motion-Tweened
Animation
• Select the starting frame and layer
– Insert a keyframe, if necessary
• Select the object on the stage
• Choose the Create Motion Tween command
from the Insert menu
• Select ending frame and make any changes
to the object
© 2010 Delmar Cengage Learning
Tween Spans
• When you create a motion tween, a tween
span appears on the timeline, indicated by
the blue highlighted area
• By default, the number of frames in a tween
span is equal to the number of frames in one
second of the movie
© 2010 Delmar Cengage Learning
Fig. 1: Sample Motion Tween
Animation
Outline of the car
position in each of
the selected frames
Onion Skin feature turned on
© 2010 Delmar Cengage Learning
Tween span
Motion Path
• Motion path shows position changes on the
Stage.
• Each symbol on the path corresponds to a
frame on the Timeline and indicates the location
of the object when the frame is played.
• A motion path can be altered by dragging a
point on the path using the Selection and Subselection tools or by manipulating Bezier
handles.
© 2010 Delmar Cengage Learning
Fig. 2: Motion Path
Motion path with symbols
corresponding to a frame
in the Timeline and
showing the location of the
car when the frame is
played
© 2010 Delmar Cengage Learning
Property Keyframes
• A keyframe indicates a change in a Flash
movie, such as the start or ending of an
animation.
• Motion tween animations use property
keyframes that are specific to each property
such as:
– position keyframe
– color keyframe
– rotation keyframe
© 2010 Delmar Cengage Learning
Property Keyframes
• Only one object on the Stage can be animated in
each tween span.
• You can have multiple motion tween animations
playing at the same time, if they are on different
layers.
• A motion tween is, in essence, an object animation
because while several changes can be made in the
object’s properties, only one object is animated for
each motion tween.
© 2010 Delmar Cengage Learning
Property Keyframes
• The types of objects that can be tweened
include graphic, button, and movie clip
symbols, as well as text fields.
• You can remove a motion tween animation
by clicking the tween span on the Timeline
and choosing Remove Tween from the
Insert menu.
© 2010 Delmar Cengage Learning
Fig. 4: Positioning the Car Object
© 2010 Delmar Cengage Learning
Fig. 5: Change the End of the
Tween Span
Drag pointer
to here
© 2010 Delmar Cengage Learning
Fig. 11: Changing the Width of the
Object
Point here and drag
the pointer to change
the width
© 2010 Delmar Cengage Learning
Fig. 15: Aligning the Car to the Path
Rotate the car to
align with the path
© 2010 Delmar Cengage Learning
Fig. 17: Dragging the Biker Symbol
to the Stage
Drag g_biker symbol
from the Library
panel and position it
on the Stage
© 2010 Delmar Cengage Learning
Understanding Classic Tweens
• Classic tweens are similar to motion tweens
in that you can create animations that
change the properties of an object over time.
• Classic tweens are a bit more complex to
create, however, they provide certain
capabilities that some developers desire.
© 2010 Delmar Cengage Learning
Understanding Classic Tweens
• A classic tween can have more than one instance of
the object over the tween span.
• The process for creating a classic tween animation
that moves an object is to select the starting frame
and, if necessary, insert a keyframe.
• Next, insert a keyframe at the ending frame, and
click anywhere on the layer between the keyframes.
• Then select classic tween from the Insert menu,
select the ending frame, and move the object to the
position you want it to be in the ending frame.
© 2010 Delmar Cengage Learning
Understanding Motion Guides
• Creates a path that will guide moving objects
around the stage in any direction
• Without Motion Guides, animations always
travel in straight lines
• Animations are placed on their own layer
beneath a motion guide layer
© 2010 Delmar Cengage Learning
Creating Animation with Motion
Guides
• Create a classic tween animation
• Select the layer the animation is on and insert a
motion guide layer
• Draw a path using the Pen, Pencil, Line, Circle,
Rectangle, or Brush tools
• Attach the object to the path by dragging the object
by its registration point to the beginning of the path
in the first frame, and to the end of the path in the
last frame
© 2010 Delmar Cengage Learning
Fig. 28: Motion Guide Layer
Motion guide
layer containing
the path
Indented layer containing the
classic tween animation that
will follow the path created
on the motion guide layer
© 2010 Delmar Cengage Learning
Transformation Point
• Each symbol has a transformation point in the form of a circle
(O) that is used to orient the object when it is being animated
• The transformation point is also the point that snaps to a
motion guide
– When attaching an object to a path, you can drag the
transformation point to the path
– The default position for a transformation point is the center
of the object
– You can reposition the transformation point while in the
symbol edit mode by dragging the transformation point to a
different location in the object
© 2010 Delmar Cengage Learning
Fig. 27: Motion Guide with
Object Attached
Transformation
point
© 2010 Delmar Cengage Learning
Registration Point
• Objects also have a registration point (+)
that is used to position the object on the
stage using ActionScript code
• The transformation and registration points
can overlap—this is displayed as a plus sign
within a circle
© 2010 Delmar Cengage Learning
Fig. 31: Dragging the Biker
Layer to the Guide Layer
Drag biker layer up to but not
above the Guide layer
© 2010 Delmar Cengage Learning
Understanding Frame-by-Frame
Animations
• Created by specifying an object that is to
appear in each frame of a sequence of
frames
• Useful when you want to change individual
parts of an image
• Depending on complexity, animation can
require a lot of time to produce
© 2010 Delmar Cengage Learning
Fig. 35: Images Used in an
Animation
© 2010 Delmar Cengage Learning
Understanding Frame-by-Frame
Animations
• When creating frame-by-frame animation,
consider the following:
– The number of different images
– The number of frames in which each
image will appear
– The movie frame rate
© 2010 Delmar Cengage Learning
Creating Frame-by-Frame
Animations
• Select the beginning frame of the animation
• Insert a keyframe on the layer in frame
– A keyframe signifies a change in an object
• Place the object on the stage
© 2010 Delmar Cengage Learning
Using the Onion Skin Feature
• Turning on the Onion Skin feature allows
you to view an outline of the object(s) in any
number of frames.
• This can help in positioning animated objects
on the Stage.
© 2010 Delmar Cengage Learning
Fig. 36: Frame-by-Frame Animation
Onion Skin feature is turned
on so that all of the objects in
frames 1-3 are viewable
even though the playhead is
on frame 1
The 3 objects placed on top of each other on the Stage each in its
own frame on the Timeline
© 2010 Delmar Cengage Learning
Fig. 40: Moving Houses Layer
below Stickfig Layer
© 2010 Delmar Cengage Learning
Fig. 46: Adding Stickfig3 as the
Final Object
© 2010 Delmar Cengage Learning
Shape Tweening
• Allows you to have an animation change the
shape of an object to any form you desire,
and you can include two objects in the
animation with two different shapes.
• As with motion tweening, you can use shape
tweening to change other properties of an
object, such as the color, location, and size.
© 2010 Delmar Cengage Learning
Using Shape Tweening to
Create a Morphing Effect
• Morphing involves changing one object into
another, sometimes unrelated, object.
• The viewer sees the transformation as a
series of incremental changes.
• In Flash, the first object appears on the
Stage and changes into the second object
as the movie plays.
© 2010 Delmar Cengage Learning
Shape Tweening
• Shape tweening can be applied only to
editable graphics.
• You can shape tween more than one object
at a time as long as all the objects are on the
same layer.
• You can use shape tweening to move an
object in a straight line, but other options,
such as rotating an object, are not available.
© 2010 Delmar Cengage Learning
Shape Tweening
• You can use the settings in the Properties
panel to set options (such as the ease value,
which causes acceleration or deceleration)
for a shape tween.
• Shape hints can be used to control more
complex shape changes.
© 2010 Delmar Cengage Learning
Properties Panel Options
• Adjust the rate of change between frames to
create a more natural appearance
– Between -1 and -100 will begin the tween
gradually and accelerate
– Between 1 and 100, begin the tween
rapidly and then decelerate
– By default, the rate of change is set to 0,
which causes a constant rate of change
between frames
© 2010 Delmar Cengage Learning
Properties Panel Options
• Choose a blend option
– Distributive for smoother, irregular shapes
– Angular preserves corners and straight
lines
– Flash defaults to Distributive option
© 2010 Delmar Cengage Learning
Fig. 47: Properties Panel Options
© 2010 Delmar Cengage Learning
Shape Hints
• Control the shape’s transition appearance
during animation.
• Allow you to specify a location on the
beginning object that corresponds to a
location on the ending object.
© 2010 Delmar Cengage Learning
Fig. 48: Two Shape Animations
with and without Shape Hints
Middle frame of the morph
animation without shape hints
Middle frame of the morph
animation with shape hints
© 2010 Delmar Cengage Learning
Fig. 49: The Reshaped Object
Drag up from here
© 2010 Delmar Cengage Learning
Fig. 50: Positioning the Car
Instance on the Stage
Transformation point
appears when the
mouse is released
Line up both cars so it appears that
there is only one car; use the spokes on
the wheels to help you know when the
two objects are aligned
© 2010 Delmar Cengage Learning
Fig. 51: Setting the Ease Value
of the Morph
© 2010 Delmar Cengage Learning
Fig. 52: Positioning a Shape Hint
© 2010 Delmar Cengage Learning
Fig. 53: Adding Shape Hints
© 2010 Delmar Cengage Learning
Fig. 54: Matching Shape Hints
© 2010 Delmar Cengage Learning
Understanding Movie Clip Symbols
• Creates complex types of animation
• A movie within a movie
• Retains independent timeline when you
insert an instance of symbol into a movie
– This allows you to nest a movie clip that is
running one animation within another
animation or in a scene on the main
Timeline.
• Keeps going even if main timeline stops
© 2010 Delmar Cengage Learning
Understanding Movie Clip Symbols
• Movie clips help to organize the different
reusable pieces of a movie and provide for
smaller movie file sizes.
• Only one movie clip symbol needs to be
stored in the Library panel while an unlimited
number of instances of the symbol can be
used in the Flash document.
© 2010 Delmar Cengage Learning
Fig. 55: Nesting a Movie Clip
The movie clip of a
wheel that has been
animated to rotate
shown in the edit
window
Timeline in the edit
window used to
create the animation
of the rotating wheel
The animation of a
car moving with the
wheels placed on
the car
© 2010 Delmar Cengage Learning
Main Timeline used
to create the
animation of the
moving car
Fig. 59: Increasing the Tween
Span on the Timeline
Movie clips symbol
in edit window
Movie clip symbol
Timeline
Drag the tween span to
frame 48
© 2010 Delmar Cengage Learning
Animate Text
• Text can be animated like other objects
– Resize, rotate, reposition, and change the
colors
– Create a motion-tween to move text as
you would an object
– Specify a rotation
© 2010 Delmar Cengage Learning
Animate Text
• Once you create a motion animation using a
text block, the text block becomes a symbol
– Cannot edit individual characters
– Can edit the symbol as a whole
© 2010 Delmar Cengage Learning
Fig. 63: Selecting a Range of
Frames
Hold [Shift] and click
frame 1 to select the
range of frames
Click frame 9 first
© 2010 Delmar Cengage Learning
Fig. 66: Positioning the Text Block
This will be the position of the text
block at the end of the animation
© 2010 Delmar Cengage Learning
Fig. 68: Resizing the Tween Span
Drag to here
© 2010 Delmar Cengage Learning
Start here
Fig. 71: Adding a Button
© 2010 Delmar Cengage Learning
Fig. 73: Adding a Play Action
© 2010 Delmar Cengage Learning
Chapter 4 Summary
1.
2.
3.
4.
5.
6.
Create motion-tween animation
Create classic-tween animation
Create frame-by-frame animation
Create shape tween animations
Create movie clips
Animate text
© 2010 Delmar Cengage Learning