Creating a Motion Tween

by kirupa   | filed under Flash and ActionScript

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:

1. 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!
    
2. 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 ]

3. 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 ]

4. 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 ]

5. 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 ]

6. 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.
    
7. 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 ]

8. 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.
    
9. 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" ]

10. 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.
     
11. 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:

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇