Creating
a Motion
Tween
by
kirupa
What exactly is a motion tween? First, let's
imagine that you place a box on the table. Now, imagine,
that after 10 seconds, the box suddenly disappears and
magically appears again a few inches to the right of where
it had been originally. Pretty strange isn't it?
Well, if you could rewind your past minute
and watch it again, what will you see? You will see the box
suddenly disappear and appear again in a different position
with no cohesion or "animation" in the 10 seconds that
elapsed. Here is where motion tweening comes in. With motion
tweening, instead of the square disappearing and
reappearing, you will instead see the square
slowly moving itself to its new position - no disappearing
acts at all! A motion tween, simply put, fills in the
missing sequences between a starting position and the ending
positions to create a full animation.
This tutorial will explain how to create a
motion tween in Flash MX 2004, and hopefully you will
understand more about motion tweens. Your animation, toward
the end, will look a tad bit similar to the following
animation:
[ create a
simple animation ]
Learn How
to Tween:
First, launch Flash MX 2004. Once the program loads, you
should see a new, blank area called your workspace. If you
do not see anything resembling a white box, create a new
animation by going to File | Flash Document. There, you
should be all set!
Now, click on the Rectangle tool from the set of icons on
the left. The Rectangle tool icon looks like the following
image:
[ click the
rectangle tool icon ]
Once you have clicked the Rectangle tool icon, go to your
drawing area, and draw a square by clicking your mouse and
dragging - then releasing once you have a square. Try to
ensure that your square is close to or hugging the left
edge of your white drawing area:
[ draw a
square - make sure it is aligned toward the left ]
After the square has been drawn, take a peek at your
timeline. Your timeline is the large area toward the top
with numbers and small, vertical boxes. Notice, that at
Frame 1, there appears a solid dot:
[ notice the
solid dot in your timeline ]
The solid dot signifies that something substantial exists
on that frame - Frame 1. In our case, the "something
substantial" is the square you created! Now, look a little
to your right and find the number 20. Right click directly
at the box under the number label 20 and select "Insert
Keyframe":
[ select Insert Keyframe
on Frame 20 ]
Once you select Insert Keyframe, you will see another
black dot appear in Frame 20. Don't worry - that's a good
thing! Now, make sure you select the keyframe on Frame 20
by clicking it with your mouse pointer.
With the keyframe selected, go down to your square again.
Notice that your entire square is also selected. Now,
press your Right arrow (on the keyboard) a few times to
make it move a few centimeters from the right-most edge of
your movie area:
[ square
moved to the right of the movie ]
Now, with your mouse pointer, click on Frame 1 of your
movie in the timeline. Notice where the square is! It is
on the left. Without hesitation, now click on Frame 20.
Notice that the square is to the right. Click anywhere
else on Frame 10, and notice the square finds its way back
to its original, left position.
Enough of me chattering, It's time to motion tween! Click
on Frame 1 and highlight all the frames between Frame 1
and Frame 20. While all the frames are highlighted, right
click and select "Create Motion Tween:"
[ highlight
all the frames and select "Create Motion Tween" ]
If everything worked out well, your highlighted frames
will take on a purplish color with a large arrow leading
from Frame 1 to Frame 20. Click anywhere on the timeline,
and notice that you can "track" the square's position
through its 20 frame journey.
Go to File | Save to save the animation. From there, go to
File | Publish Preview | HTML. You should see your square
gradually moving from the left toward the right.
I hope this tutorial helped you to
understand what a motion tween is. Think back toward the box
example I used earlier. Notice that before the motion tween,
the box just vanished and appeared in a new position.
Similarly, remember that the square between Frame 1 and
Frame 20 just abruptly appeared at Frame 20 prior to the
motion tween. With the motion tween applied though, notice
that the abruptness was gone.
The motion tween approximated the position
the square or box would be during their quest, and made it
more realistic - more animated. No more random disappearing
and appearing acts.
I have provided my source code that shows
you how I created the example shown in the screenshots in
the tutorial. Click the following link to download the FLA
file:
Got a question or just want to chat? Comment below or drop by our forums (they are actually the same thing!) where a bunch of the friendliest people you'll ever run into will be happy to help you out!
When Kirupa isn’t busy writing about himself in 3rd person, he is practicing social distancing…even on his Twitter, Facebook, and LinkedIn profiles.
Hit Subscribe to get cool tips, tricks, selfies, and more personally hand-delivered to your inbox.
This is a companion discussion topic for the original entry at https://www.kirupa.com/developer/mx2004/motion_tween.htm