The Complete Tween Guide – Flash MX

Well hello there. Come and have a seat. Flash is a very powerful program but it is still most commonly it is associated with the eye-popping animation present on the web. Well, without tweens there would be no animation. Hence, it is a very important topic to discuss in detail. Over the scope of this tutorial I will cover the two different types of tweens available in Flash MX: Motion Tweens and Shape Tweens. Also, if time allows, I’ll create a “Tweening in Actionscript” addition later on. So, now that I’ve had my little introduction, lets fire up flash and get started!

Motion Tween
Firstly, I will discuss the motion tween. Now if you are going to want anything to move and be ‘flashy’ you aren’t going to do it without a few motion tweens. I mean you could go in and change your little square in every key frame but that’s not very practical now is it?

Creating a motion tween is actually quite easy. If you don’t already have a brand spankin’ new flash document ready, go ahead and open one up now.

Now, what is it you want to tween? Well you can tween just about anything. But, for the purposes of this tutorial I’m going to choose a bit of text. So grab your text tool and check your properties window (don’t have your inspector open? Just press Ctrl+F3) and make sure your text type is set to static. All right, write whatever insanely witty saying you wish in your document. For lack of wittiness on my part, I shall write “Hello!” Go back to your toolbar and select your arrow tool (the black arrow, not the white.)

With your spiffy new text selected press F+8. A dialog box will come up. Enter whatever name you would like in the box, just make sure it’s short, sweet, and to the point. Now you’ll want to select the radio button next to ‘Graphic.’ Click ‘OK’ and your good to go.

Note: This is an important point! You cannot motion tween an object unless it is a symbol, a graphic to be more exact. So remember, any time you want to motion tween an object you must make it a symbol (by pressing F8 and selecting your options), assuming it is not already a symbol. Keep in mind that this rule only applies to motion tweens; shape tweens are another matter that will be covered later in the tutorial.

We will now shift our focus to the timeline. As you can see on layer one, frame one, is where your text is located. Right click on the frame under the number ten and select ‘Insert Keyframe.’ You can insert your keyframe under any number, but for this tutorial I chose 10. Keep in mind, the bigger gap between the keyframes, the slower your object will move.

Note: You can only tween between two keyframes, so make sure you created a keyframe (it has a black circle in the frame) and not just a regular frame.

Select your delightfully witty message that resides in keyframe 10 (or whatever other number you chose) and modify it. You can do just about anything to it, but, again, for the purposes of this tutorial I used the free transform tool (hotkey: Q) and made the text large enough to fill up my entire document. Done with your modifications? Wonderful.

Go back and select keyframe one. Now; in your properties inspector there should be a drop-down box next to the word ‘Tween’, click the box and select ‘motion.’ You’re almost finished! After you select ‘motion’ a bunch of new options should’ve appeared in your property inspector. The only one we need to worry about for this tutorial is the Easing. The more fluid you want your motion to be, the higher you want your Easing set to. I am going to set my easing to 100 for the purpose of this tutorial (tired of that phrase yet?).

Click anywhere on your main stage and press enter.

You’ve just created your first motion tween! How does it feel?! Like you hold the power of the universe, no?

Remember, you can motion tween any graphic symbol. So whether it’s an image, text, squares, or anything else you can conjure up, it can be tweened. Experiment; try and make your own cool effects. The possibilities are as endless as your imagination.

Shape Tween

Shape tweens are very similar to motion tweens, perhaps even easier. The main difference between creating shape tweens and motion tweens is that shape tweens are not required to be converted into symbols. It’s quite the opposite, rather.

First you will put whatever you want to tween in the first frame of your movie, just like with the motion tween. Again, it can be anything you want and, again, for the purposes of this tutorial I will choose text. So, as before, write (in static text) your witty message on the stage. Once finished, select the black arrow in your tools menu. With your text selected press ctrl+b, this will break it apart so it can be used as a part of your shape tween.

Note: If you are going to tween text or an imported object you will need to break them apart (ctrl+b). Otherwise your shape tween will not work.

In your timeline, select a later frame (I will choose keyframe 10) and right click > insert keyframe. This is another point that differs from the motion tween: select the timeline and delete the keyframe you just created (select it and press delete). You’re probably thinking I’m crazy about now (it’s true, but that’s not my point.) With the keyframe we just deleted selected, write or draw something new in it. Keep in mind that you will need to break apart any text.

Now that you have that all finished, select keyframe one and instead of selecting ‘motion’ for your tween, select ‘shape.’ Select your stage and press ‘enter’. Voila! You have now created your first shape tween!

Instead of re-typing my spiel about endless possibilities and the like, I will just direct you to read the spiel again and insert ‘shape’ for the word ‘motion’. Well, I hope you enjoyed my tutorial(s).