Let me start off by saying the Tween Class is one of the best built-in features included with Flash. Simply put, the Tween Class is the tool that a designer needs to create Flash websites and animations that are smooth and complex. So without further ado let us enter in to the mystical world of the Tween Class.

Note please all ready have read Actionscript Animation Basics Part 1 before going any further in this article.

As always we will begin with a new Flash document, say 800×600 at 30 fps. Create a ball on stage, select it and press F8, convert the ball to a movieclip and give it an instance name of redBall.

Now create a new layer, name it actionscript, and lock it. Select the first frame and go to the actions panel(F9). The first thing we have to do is import the class into our Flash document so our redBall can use it. Type

onto the first line of the actions panel. Let’s break this down. import mx.transitions.Tween is importing the Class and the second line mx.transitions.easing* is importing all of the easing parameters for the Tween Class. Note the * is common in programming languages and it usually is used to cycle through everything. So in this case we are importing all of the easing parameters for the Tween Class. Another example of the * is to type “*{…styles…}” into a CSS document to apply styles to an entire document, but now we are getting off track. Back to the Actionscript!!!

Now that we have imported the class lets use it. Type this bit of code on the next line.

Press Apple(CTRL on a PC)+Return and watch the magic. A lot is going on here so let’s break it down bit by bit.

new. mx.transitions.Tween is used to call the class, the items inside the parenthesis are parameters we apply to the class that causes our ball to animate. The first parameter is the instance name of the item we want to animate, in this case, redBall. The next parameter “_y” is telling the redBall to move along the y axis. _x, _y, _xscale, _yscale, _alpha can all be used to control the movieclip with the Tween Class.

mx.transitions.easing.Strong.easeOut is telling our ball to use an easing class, Strong, and an easing method, easeOut. This creates a smooth ease out animation. I will go over all of the classes and methods that can be used here in a bit.

The next two numbers 0, 500 are simply the starting and ending points respectively. In this case we are telling the ball to move from 0 to 500 pixels. If _alpha is used then the values would be something like 100, 0 meaing we would animated from 100 transparency to 0.  The last two parameters are connected as well. The 60 here is basically a counter that tells our movieclip how long it has to run the animation, in this case 60 frames. The last parameter is a boolean value, which means it can be true or false. If the value is false then the animation is animated using frames, in this case 60 frames. If we change this value to true then the animation is animated using seconds. In this case it would animate over 60 seconds. I recommend mostly using frames to animate your objects because it is easier to control them that way.

Here is a list of all the easing classes and methods play around with them to get an idea of what they can do.

Easing Classes-

• Back
• Bounce
• Elastic
• Regular
• Strong
• None

Easing Methods

• easeIn
• easeOut
• easeInOut
• easeNone

So by know I have the feeling your are saying this is truly awesome, and you would be right, it truly is. Just think of the possibilities. In fact let’s create a possibility right now. We are going to create a basic button. Delete the last line and type this

What we are doing here is creating two functions and within them we are telling the ball that onRollOver have the yscale or height scale from 100% to 200% over the course of 30 frames with an Elastic easeOut. Also we are telling the ball to scale in the xscale direction (width) from 100% to 200% over 30 frames with a Strong easeOut. The OnRollOut function should be self explanatory since we are just reversing the values so it returns to it’s orginal size.

Play around with the Tween Class changing the values and methods to get a feel for how it works. It is truly powerful and you will begin to notice when and how designers have used this tool on professional sites. I will be tackling more complicated uses of the Tween Class in other Actionscript Articles.