ADOBE FLASH CS5
Chapter 4
Creating Animations
ADOBE FLASH CS5
Chapter 4 Lessons
1.
2.
3.
4.
5.
6.
Create motion tween animations
Create classic tween animations
Create frame-by-frame animations
Create shape tween animations
Create movie clips
Animate text
ADOBE FLASH CS5
Create Animation
• Introduction
– Animation is an important part of any application or website
– Animations are made up of still images
– Works for many types of websites including
e-commerce, education, and entertainment websites
– Persistence of vision is the concept that our eyes hold an image for one-tenth
of a second before processing another image
– One-tenth of a second is the basis for the frame rate in animation
– Frames rates of 10-12 fps generally provide smooth computer-based animation
– Flash allows you to create animations that can move and rotate an object around
the Stage
– The animation feature also allows you to change an object’s shape, size, and
color, as well as, object zooming and fading in and out
ADOBE FLASH CS5
Create Animation
•
Introduction
–
Flash animation provides two
animation methods
1.
Frame-by-frame animation
2.
Tweened animation
a.
Motion
b.
Classic
c.
Shape tweens
ADOBE FLASH CS5
Create Motion Tween Animation
• In motion tween animation, you can specify the position of the object in
the beginning and ending frames, and Flash fills in the in-between
frames, a process known as tweening.
• When you create a motion tween, a tween span appears on the
Timeline.
• A blue highlighted area, called a tween or motion span, will appear on
the Timeline for the frames of the animation.
• You can increase or decrease the number of frames in the span by:
• dragging the end of the span
• moving the span to a different location or
• copying the span and applying it to another object
ADOBE FLASH CS5
Create Motion Tween Animation
Outline of the car position
in each of the selected
frames
Tween span
Onion skin feature turned on
Sample motion tween animation
ADOBE FLASH CS5
Create Motion Tween Animation
•
•
A keyframe indicates a change in a Flash movie, such as the start or ending of an
animation.
Property keyframes are specific to each property such as a position, color, or
rotation keyframe.
• Keep in mind:
– You can only animate one object on the stage 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 an object animation because, while several changes can be
made to an object’s properties, only one object is animated for each motion
tween
– The types of objects that you can tween include graphic, button, movie clip
symbols, and 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
ADOBE FLASH CS5
Create Motion Tween Animation
Bezier handles used to
reshape the motion path
Bezier handles used to alter the path
ADOBE FLASH CS5
Create Motion Tween Animation
Drag the pointer to the right
Positioning the car object
Changing the ease value
ADOBE FLASH CS5
Create Motion Tween Animation
Aligning the car to the path
Using the Free Transform
tool to skew the object
ADOBE FLASH CS5
Create Classic Tween Animation
•
•
A motion guide with an object
(motorbike) attached
Classic tweens provide certain
capabilities that motion tweens
cannot including altering the ease
values on objects.
In classic tween animations, objects
move in a straight line from the
beginning location to the end location
on the stage.
A motion guide can be used to alter
the path of a classic tween animation
ADOBE FLASH CS5
Create Classic Tween Animation
• Each symbol has a transformation point in the form of a circle (O)
that you can use to orient the object when it is being animated.
• The transformation point is also the point that snaps to a motion
guide.
• You can reposition the transformation point’s position while in the
symbol edit mode by dragging it to a different location.
• Objects also have a registration point (+) that can help you
determine the X and Y coordinates of an object on the Stage.
ADOBE FLASH CS5
Create Frame-by-Frame Animation
•
•
•
You can create a frame-by-frame
animation by specifying the object that
is to appear in each frame of a sequence
of frames.
Frame-by-frame animations are useful
when you want to change individual
parts of an image.
When creating a frame-by-frame
animation, you need to consider the
following points:
– The number of different images
– The number of frames in which each
image will appear
– The movie frame rate
Three images
used in an animation
ADOBE FLASH CS5
Create Frame-by-Frame Animation
The 3 objects placed on
top of each other on the
Stage, each in its own
frame on the Timeline
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
This figure shows
the first three frames
of an animation in
which three different
objects are placed
one on top of the
other in succeeding
frames
A frame-by-frame animation of three
figures appearing to walk in place
ADOBE FLASH CS5
Create Shape Tween Animation
•
•
•
•
•
•
When you use shape tweening you can have an animation change the shape of an
object to any form you want.
You can also include two objects in the animation with two different shapes.
You can use shape tweening to change the object’s location, size, and color.
Morphing is when you change a shape into another, sometimes unrelated, object.
The number of frames included from the beginning to the end of this shape tween
animation determines how quickly the morphing effect takes place.
When working with shape tweening, you need to keep the following points in
mind:
 You can apply shape tweening only to editable graphics
 You can shape tween more than one object at a time as long as all objects are on
the same layer
 You can use shape tweening to move an object in a straight line.
 You can use the settings in the Properties panel to set options for a shape tween.
 You can use shape hints to control more complex shape changes.
ADOBE FLASH CS5
Create Shape Tween Animation
• Adjust the rate of
change between
frames.
• Choose a blend option.
– The Distributive
option
– The Angular option
The Properties panel options for a shape tween
ADOBE FLASH CS5
Create Shape Tween Animation
• The Distributive option creates an animation in which the
in-between shapes are smoother and more irregular.
• The Angular option preserves the corners and straight
lines and works only with objects that have these
features.
• You can use shape hints to control the shape’s transition
appearance during animation.
• Shape hints allow you to specify a location on the
beginning object that corresponds to a location on the
ending object.
ADOBE FLASH CS5
Create Shape Tween Animation
Middle frame of the morph
animation without shape hints
Middle frame of the morph
animation with shape hints
Two shape animations (A morphing into B)
with and without shape hints
ADOBE FLASH CS5
Create Movie Clips
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 animations
of the rotating wheel
The animation of a car
moving with the wheels
placed on the car
Main Timeline used to
create the animation of
the moving car
The process of nesting a movie clip within an animation
ADOBE FLASH CS5
Create Movie Clips
• You can view an animated movie clip in
the Edit window that is displayed when
you double-click the movie clip symbol in
the Library panel.
• You cannot view the animated clip by
playing the movie on the main Timeline.
ADOBE FLASH CS5
Animate Text
• You can motion tween text block objects just as you
do graphic objects.
• You can resize, rotate, reposition, and change the
colors of text blocks.
• Once you create a motion animation using a text
block, the text block becomes a symbol.
• You are unable to edit individual characters within a
text box.
• You can, however edit the symbol as a whole.
ADOBE FLASH CS5
Create Movie Clips
Text
rotates
Text scrolls
from off the
Stage to the
Stage
Text
zooms
Three examples of animated text