Prepared by:

TWEEN Ms. Joserie M. Mirabeles

Reference:
ANIMATIONS Learning Macromedia Flash 8
by Greg Bowden
 OBJECTIVES
At the end of this lesson, the students will be able to:

• Learn two ways of animating: Motion and Shape Tween,

• Understand the difference of Motion and Shape Tween,
• Understand the importance of Layers and its functions,
• Create a Bouncing Ball and apply the Motion Tween,
• Create a Text Tween and apply the Shape Tween.
Macromedia Flash provides two main ways of
animating, Tweening and Keyframe Animation.
The most common form is Tweening where you
set a starting point and an end point and let the
program animate the objects between them. This
is where the term TWEEN comes from.
 CREATING A MOTION
TWEEN
• Motion Tweening involves moving objects from
a starting point to an end point.
• You can motion tween objects, text, drawings,
etc.
• They must be grouped or converted to a symbol.
 CREATING A MOTION
TWEEN
A. Setting the Symbol
 CREATING A MOTION
TWEEN
A. Setting the Symbol
 CREATING A MOTION
TWEEN
B. Setting the End Keyframe

• To animate an object, frames need to be inserted

in the TIMELINE panel.

• The easiest way to do this is to set an END

KEYFRAME at the frame that you want the
animation to finish at.

• Default speed of Flash: 12 frames per second

 CREATING A MOTION
TWEEN
B. Setting the End Keyframe
 CREATING A MOTION
TWEEN
B. Setting the End Keyframe
 CREATING A MOTION
TWEEN
B. Setting the End Keyframe
 CREATING A MOTION
TWEEN
B. Setting the End Keyframe
 CREATING A MOTION
TWEEN
C. Setting the Motion Tween
 CREATING A MOTION
TWEEN
C. Setting the Motion Tween
 CREATING A MOTION
TWEEN
C. Setting the Motion Tween
 UNDERSTANDING THE
TIMELINE PANEL
Now that you have created your first animation, it is
important that you understand the symbols used in the
Timeline Panel.
 UNDERSTANDING THE
TIMELINE PANEL
• Keyframe Marker (•) – You need at least 2
keyframes to create an animation.
• Playhead (red rectangle and line) – allows you to
move through the frames.
• Frame Number – located at the base of the timeline
panel, and the frame over the Playhead.
• Frames – contained in a shaded bar in the Timeline
Panel. They control the duration of the animation.
 ADJUSTING ANIMATIONS
The animation is controlled by the position of the
symbol at the Keyframe points. You can easily adjust
an animation by moving the symbol at the selected
Keyframes.
ADJUSTING ANIMATIONS
ADJUSTING ANIMATIONS
ROTATING OBJECTS
ROTATING OBJECTS
ROTATING OBJECTS
ROTATING OBJECTS
SCALING OBJECTS IN AN
ANIMATION
INSERTING ANOTHER
KEYFRAME
INSERTING ANOTHER
KEYFRAME
 EXERCISE
Try making the name rotate whilst it moves down and
up. To do this,
• You just need to select the Keyframe Marker at
frame 12.
• Select the Rotation Box in the Properties
Inspector to a required rotation type
• Select its Times box to the number of times you
want the name to rotate.
• Repeat the process for the Keyframe Marker at
frame 1.
DELETING A KEYFRAME
TWEENING ALONG A PATH
TWEENING ALONG A PATH
TWEENING ALONG A PATH
TWEENING ALONG A PATH
TWEENING ALONG A PATH
TWEENING ALONG A PATH
TWEENING ALONG A PATH
 EXERCISE
Create a simple text symbol and animate it. It can be a logo
for a company, a name of a sports team or pop group, or a
message.

Try to use a range of animation effects.

1. Enter the text and set it to a symbol.

2. Insert the end Keyframe and move the symbol to the
required position.
3. Set the animation to Motion Tween.
4. Set the required animation effects. Remember, you can
insert extra Keyframes to split the animation into sections.
 MULTIPLE OBJECT
ANIMATIONS
• When creating animation, you have some objects
that move and others that are fixed.
• The use of LAYERS in animation is the key.
 MULTIPLE OBJECT
ANIMATIONS
The Background Layer
 MULTIPLE OBJECT
ANIMATIONS
The Background Layer
 MULTIPLE OBJECT
ANIMATIONS
Locking the Layer
 MULTIPLE OBJECT
ANIMATIONS
The Ball Layer
 MULTIPLE OBJECT
ANIMATIONS
Adding the Frames
 ANIMATING THE BALL
A. Drawing the Ball
 ANIMATING THE BALL
A. Drawing the Ball
 ANIMATING THE BALL
B. Converting the Circle to a Symbol
 ANIMATING THE BALL
C. Setting the End Keyframe
 ANIMATING THE BALL
D. Setting the Motion Tween
 ANIMATING THE BALL
E. Setting the Bounce
 EASING IN AND OUT
E. Setting the Bounce
EASING IN AND OUT
EASING IN AND OUT
EASING IN AND OUT
 EXERCISE

Create an animation that involves the use of

multiple objects.

1. Create a background for your animation, name

its layer and lock it.
2. Create at least two other objects in their own
layers. Convert them to symbols and animate
them separately.
 CREATING A SHAPE TWEEN

• Shape Tweening allows you to animate one

shape into another.
• It operates on objects drawn using tools such as
the rectangle, circle or pencil tools.
• It does not work with grouped objects or
symbols.
 CREATING A SHAPE TWEEN

Remember:

• No groups
• No symbols
• This is the opposite of Motion Tween
• Shape tweens create a larger file size
• Use only when needed.
 CREATING A SHAPE TWEEN
Setting the Start Shape
 CREATING A SHAPE TWEEN
Setting the End Shape
 CREATING A SHAPE TWEEN
Setting the End Shape
 CREATING A SHAPE TWEEN
Setting the End Shape
 CREATING A SHAPE TWEEN
Setting the Shape Tween
 CREATING A SHAPE TWEEN
Setting the Shape Tween
 CREATING A SHAPE TWEEN
Adjusting the Shapes
 CREATING A SHAPE TWEEN
Adjusting the Shapes
 CREATING A SHAPE TWEEN
Adjusting the Shapes
 CREATING A SHAPE TWEEN
Reversing the Shape Tween
 CREATING A SHAPE TWEEN
Reversing the Shape Tween
 CREATING A SHAPE TWEEN
Reversing the Shape Tween
CREATING A TEXT TWEEN