ActionScript 3 Tweens Tutorial

In this tutorial I’ll be using the Tween Classes already bundled in Flash Cs3.
There are other ways to do this but I find it’s the easiest. You could do the
same using onEnterFrames or Timers.

Ok first thing you will need to do is to draw a circle on the stage and then
convert that shape to a movie clip. After that, give it an identifier name in the
property inspector. Let’s name it “ball_mc”. Now open the actionScript
Window by pressing F9. Create a new layer on the timeline, name it actions,
and start writing your actionscript there. The first thing we will need is to
import the actual classes for tweening. Add these to line of code at the start.

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

The first line is to import the Tween, the second one is to import
the Easing classes.

Now all we need to do is add one line of code to make the ball_mc move.

var xTween:Tween = new Tween(ball_mc, "x", Strong.easeOut, 0,
                                               300, 3, true);

This create a new tween object with its properties in the parenthesis. The first parameter is the object you want to animate. The second parameter is the property of that object that you want to animate. You can animate a lot of properties for a display object example: x, y, alpha, width, height, xscale, yscale, rotation etc. I’ll give some example later. The third parameter is easing. Fourth and fifth parameters are the starting and ending position of the property you are animating in this case, the rectangle will go from the x position 0 to the x position 500. The sixth parameter is the duration of the tween, in this case 5 seconds. And lastly the last parameter is if you want to use seconds or frames. I’ve always left that to true meaning use seconds, that way if you change the framerate of your movie, it doesn’t change the timing of your animation.

So if you test your movie, your ball_mc will go from left to right in 5 seconds. Pretty boring, but it’s your first animation. What we can do next is affect more than one property at the time. But for that, we have to create a new tween for each property we want to affect.

var xTween:Tween = new Tween(ball_mc, "x", Strong.easeOut,
                                        0, 300, 3, true);

var alphaTween:Tween = new Tween(ball_mc, "alpha", Strong.easeOut,
                                          0, 1, 3, true);

var widthTween:Tween = new Tween(ball_mc, "width", Strong.easeInOut,
           ball_mc.width, ball_mc.height + 600, 7, true);

var rotationTween:Tween = new Tween(ball_mc, "rotation", 
                    Strong.easeInOut, 0, 90, 5, true);


So here our ball_mc in, moves to the left, becomes wider and 
turns right. Two things to see here. First the alpha property
doesn’t  work like in actionScript 2. Before, it ranged
from 0 to 100; in  ActionScript 3, it ranges from 0 to 1.
It’s a minor difference, but you  have to know it. Also as
you can see with the width tween, you can put  variables in
the fourth and fifth parameters so that you don’t really  know
the beginning and ending values.

see preview.
Download .zip