If you want to attract visitors,
you sould definitely add some animation
to your web site. In this tutorial
we will introduce the basics about animating
objects in Flash by using Tween.
how does this whole thing work?
Think about the cartoons that you used
to watch every Saturday morning. The movement
of an object in Flash
is very similar with how cartoons
or motion pictures work, which consists
of frame by frame motion. But
don't worry, this tutorial will tell
you how to generate the motion an object
without having to draw the motion
frame by frame like a cartoonist.
What is Tween?
Tweening is the
easiest and most basic way to animate
in Flash. Flash will automatically write
in the animation
when you provide the first and last frame.
Tip: Before you begin,
it would be great to start by sketching
out what you are planning to animate
on a piece of paper, just like a director's
storyboard. That way it will be easier
to capture what you
are aiming for.
Let's say we want to animate the square
moving from point
A to point
B. You can download
our source file to walk through the
Create your object first;
let's use the gray box that we had mentioned.
After creating your object, you should
see a frame with a dot on
your timeline. This is the first
frame in the movie. You have to generate
the first and last frame in
order to tell Flash where you want
the box to move. There are ways to
generate the last frame without
having to draw the box again:
First, copy the 1st frame
frames or press Ctrl+Alt+C ). Then,
let's say our animation will end at frame
15. Click on the
place where it says 15 on your timeline,
and paste your
frame (right click>Paste Frames
or press Ctrl+Alt+V ).
Next, click on frame
and move the box where you want
your animation to end. In this
objective is to move the box to point
B at the right, so
we will drag our box to where point
To tell Flash to animate
this entire clip, right click the first
frame and then "Create Motion
Tween" and do the same thing
You will see the frames in purple
with an arrow running down. When
you are finished, you can check if
is working by pressing enter anywhere
to preview the movie.
If you click on a frame of the movie, you will
notice the frame option will appear in the properties
popup window (or at the bottom of your screen for
Flash MX or version 6)
There are several more option to apply to the
motion to make it more interesting: Ease: Select a value of 1
to 100 to adjust how
fast you want the object to move from fast
and slow down as it reaches towards the end.
from -100 to
-1 for the opposite effect. Rotation: there are Normal
(auto), Counter Clockwise, and Counter Counter
Clockwise options available
to allow the object to rotate as it moves.
Fade In/ Fade out effect
Since you have learned how to create motion
using Tweens, you can also make a fade in/ and
effect using the Tween feature.
1. Simply create frames and objects as stated
above. Click on an object,
the "graphic" option
will appear in the properties popup window (or
at the bottom of your screen if you are using
MX or version 6).
2. Find “Color”, then choose Alpha.
You will see numbers with % sign next to it.
how much you want to fade as 0% is completely
transparent and 100% is opaque.
3. Apply them on either the first or the last
frame, depending on if you want a fade in or
fade out effect.
Finally right click all the frames and select
Create Motion Tween.
Copyright 2002 BLUEPRINT Los Altos High School Web Club. All rights reserved.
201 Almond Ave. Los Altos, CA 94022