Motion Tween

What's tweening? Well, it's something that enables you to receive gradual change of properties of objects. Speaking more clearly, it's something that allows you to quickly create a nice, smooth animation and save loads of time. All you have do is provide two keyframes - Flash will take care of the rest!

Our tween will be a little different than that presented above. So, let's get to work!


i. First off, create a new Flash document. Let both the width and height be some 300 px. Set the frame rate to some 20 fps.

[Set both the width and height to 300 px and the frame rate to 20 fps in the Document properties window]

ii. Now it's time to draw something on the stage. If you like, it can be just a simple circle. To draw one, press O on your keyboard. I used the portrait of Steven Seagal myself.

iii. If what you've got on the stage is not a symbol yet, make it one (select it and press F8). The Name and Type of the Symbol don't matter, although I tend to choose Movieclip whenever I convert something like this to a symbol.

[ select a given object and press F8 to convert it to a symbol (learn more about symbols ) ]

iv. Drag your symbol to the left so that it's not touching the canvas.

v. Now, click on the 25-th frame of the Timeline and press F6 to make a Keyfame there.

[ clicking the 25-th frame will turn its color into dark blue. This color denotes selection on the Timeline. Press F6 to make a Keyframe on the selected frame ]

vi. If you've done the previous step, the 25-th frame should be exactly the same as the first one, which means that we need to change it. So, drag it to centre and make it about two times bigger (press Ctrl + Alt + S and type 200 in Scale field). Also, you can change it in any other way for better effect.

[ pressing Ctrl + Alt + S opens the Scale and Rotate window in which you can enlarge objects and rotate them ]

vii. Right-click anywhere between the two key frames and find "Create Motion Tween". The space between the two key frames should now turn light blue and an arrow should appear there, too . If that's not what happened, you must have made a mistake somewhere. Also, you can add some frames after our animation so that it doesn't start all over again right away. You can do that by clicking on, say, 60th frame and pressing F5.

[ the space between the two key frames should now turn light blue and an arrow should appear there, too ]

It's done! If you were now to preview the movie (press Ctrl + Enter) the circle ( or Steven Seagal's face) will slowly drift from left to right, growing.




Also, remember that you can do not have to limit yourself to only changing the 2 properties I've described. Look below to find out to what I mean:

As you can see, this guy's face changes in numerous ways and then gets back to normal after a while. This effect was achieved by changing as many as 5 properties of the object: Alpha, Blurr Filter, xand y Scale, Askew, Rotation.

Well, while this animation might not be too pleasant for the eye, shows the power of tweens very distinctly. Just think about how much time you would have to spend to make something like this!


Below you can see the FLA file which may help in understanding tweens.

Cheers!