Motion Tween

Tweening is the process of creating a smooth animation from just two key frames. Of course, that's an incomplete description of tweening, but yes, I think it's good enough for the purpose of this tutorial. :-)

There are two kinds of tweens in Flash:

1. Motion Tween

2. Shape Tween

In this tutorial, we are going to talk about motion tweens. Below you can see an example of a motion tween in action.

The animation we are about to create is a little different than this one.

Let's go!

i. Create a new Flash document, 300x300, 20-30 fps.

ii. Let's now draw something on the stage. It can be just a simple circle. To draw one, press "O" on your keyboard.

iii. Select the object and press F8 to convert it to a Symbol. In this case, the Name and Type of the symbol don't matter—you can choose anything you like.

iv. Move the object to the other side of the canvas.

v. Click on the 25th frame of the Timeline and press F6 to make a Keyfame there.

vi. Now, the 1st and 25th frame of the Timeline should be exactly the same. It means that we need to change one of them so that a motion tween can work.

So, select your object on 25th frame and place it in the center.

You can also make it about two times larger (press Ctrl + Alt + S and type 200 in Scale field) or change it in any other way.

vii. Now goes the most important part: Right-click anywhere between the two key frames and go to Create Motion Tween. If everything went right, the space between the two keyframes should now turn light blue. An arrow pointing right should appear as well.

If you feel like it, you can add some more frames to the motion tween by selecting any frame between the two key frames, and pressing F5.

OK, this is it. To preview the movie, press Ctrl + Enter. Your object should now slowly drift from left to right, growing.

Oh, and remember that you do not have to limit yourself to only the two properties I have used in this tutorial. What do I mean by that? Look below to find out!

 

In the above animation, the head changes in many ways. This is thanks to manipulating five properties of the object: Alpha, Blurr Filter, x and y Scale, Skew and Rotation.

While the above animation might not be the best I have ever created, it certainly demonstrates the philosphy of tweens very well. It also shows just how much time they save—imagine animating this scene frame-by-frame! It would take hours!

---

So, we are done with motion tweens! I hope you have enjoyed this tutorial, and that it allowed you to get a better idea of this not-so-easy topic.

Below you can download the source file for your better understanding.

Cheers!