The Flash AS3 Tween Class

In this tutorial, we're going to learn how to use the Flash AS3 Tween Class. The tween class lets you create tween animation using code.

Step 1

Let's first create a movie clip that we will use with our ActionScript 3 tween.

Draw a small circle and convert it into a movie clip symbol. Don't forget to give this circle an instance name. Let's name it circle_mc.

Step 2

Create a new layer for the ActionScript. Select the first frame of this layer, and then open up the Actions panel.

Step 3

We first need to import the Flash AS3 Tween class so that we will be able to use it. On the first line, type:

import fl.transitions.Tween;

Aside from the tween class, we also need to import the easing classes. So in the next line, type:

import fl.transitions.easing.*;

The easing classes allow us to specify different kinds of tween effects. There are 6 easing classes in the AS3 easing package. These are:

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

Each easing type will apply a different effect to your tween animation.

And now that we've imported the necessary classes, let's create a tween using code.

Step 4

To create an AS3 tween object, type new Tween() and assign in to a variable. Let's name this tween tweenX. After the import statements, type:

var tweenX:Tween = new Tween();

This creates a new tween object named tweenX. Let's use this tween object to make our circle on the stage move from the left to the right. To do that, we'll need to pass a few arguments to the Tween() constructor.

The Tween() constructor needs 7 arguments. First, we need to specify the object that we want to tween. In this case, that would be circle_mc. So type in circle_mc inside the parentheses of the Tween() constructor.

var tweenX:Tween = new Tween(circle_mc);

After that, we need to specify the name of the property of the object that we would like to tween. If you wanted to create a fading animation, then you can specify the alpha property. If you wanted to create a scaling animation then you can specify the width, height, scaleX or scaleY properties. But since we want to make the circle move horizontally, then we can use the x property. So let's pass that to the Tween() constructor as well:

var tweenX:Tween = new Tween(circle_mc, "x");

The property name is a string so it should be in quotation marks.

The third argument we need to pass is the easing type that we want to use. The easing type will apply an effect to the movement in the tween. Let's try using Bounce.easeOut for this tween. This will create a bouncing effect when the circle reaches the end of the animation.

var tweenX:Tween = new Tween(circle_mc, "x", Bounce.easeOut);

The fourth argument we need to pass is for the starting value of the object's property that we are tweening. So since we are using the x property, this next argument that we pass will be for the starting x position of the circle. Let's specify a value of 100.

var tweenX:Tween = new Tween(circle_mc, "x", Bounce.easeOut, 100);

So when the tween starts, circle_mc will have a starting x position of 100.

The fifth argument we need to pass is for the ending value of the object's property. Let's specify a value of 400.

var tweenX:Tween = new Tween(circle_mc, "x", Bounce.easeOut, 100, 400);

So this means that at the end of the tween, our circle will be positioned at x = 400.

The sixth argument we need to pass is for the duration of the tween. You can specify the duration in frames or in seconds. Let's specify a duration of 3 seconds.

var tweenX:Tween = new Tween(circle_mc, "x", Bounce.easeOut, 100, 400, 3);

The seventh and last argument we need to specify is a boolean - true or false. If we specify true, then this means that the duration will be in seconds. If we specify false, then the duration will be in frames. Since we want our tween to play over a period of 3 seconds, then we should specify a value of true.

var tweenX:Tween = new Tween(circle_mc, "x", Bounce.easeOut, 100, 400, 3, true);

And now our tween is complete. Test the movie to preview the animation.

Step 5

Here is a list of all the other easing functions that you can use. Try them out to see how they look like. Simply replace the third argument in the Tween() constructor with a new easing function of your choice.

Back	Bounce	Elastic
Back.easeIn Back.easeOut Back.easeInOut	Bounce.easeIn Bounce.easeOut Bounce.easeInOut	Elastic.easeIn Elastic.easeOut Elastic.easeInOut
None	Regular	Strong
None.easeNone	Regular.easeIn Regular.easeOut Regular.easeInOut	Strong.easeIn Strong.easeOut Strong.easeInOut

Step 6

If you want to tween other movie clips, then you'll have to create new tween objects for each movie clip that you want to tween. Even if you want to tween different properties of the same movie clip instance, you'll still need new tween objects for each. So if we also wanted to tween the scaleX and scaleY properties of circle_mc, then we'll need to create two more tween objects for each property.

import fl.transitions.Tween;
import fl.transitions.easing.*;

var tweenX:Tween = new Tween(circle_mc, "x", Bounce.easeOut, 100, 400, 3, true);
var tweenScaleX:Tween = new Tween(circle_mc, "scaleX", Bounce.easeOut, 1, 2, 3, true);
var tweenScaleY:Tween = new Tween(circle_mc, "scaleY", Bounce.easeOut, 1, 2, 3, true);

Here, aside from moving horizontally, the circle will also grow. We're starting out with a scaleX and scaleY of 1, and moving up to a value of 2 within 3 seconds. This means that the circle will grow from 100% to 200% both horizontally and vertically within that period.

We don't need to use the same easing functions, starting values, ending values, and durations for all our tweens. Try playing around with different values, and see what you can come up with.

And that concludes this Flash AS3 Tween Class tutorial.