ActionScript 3 Tweens Tutorial

Since I think it’s something people want, I am going to do a tutorial about using ActionScript 3 to do animations. I recently made a new tutorial about using Tweener instead of the Tween classes, or even better, how to use TweenLite (TweenLite is smaller and faster than Tweener). I think it is better to use Tweener or TweenLite because it is easier to understand and it takes way less lines of code.
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 or the Zigo Engine (but it’s not yet AS3).
Ok first thing you will need to do is to draw a rectangle 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 “rectangle”. 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. I’ll explain what easing is later on.
Now all we need to do is add one line of code to make the rectangle move.

var myTween:Tween = new Tween(rectangle, "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 300. The sixth parameter is the duration of the tween, in this case 3 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 rectangle will go from left to right in three 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 myTweenX:Tween = new Tween(rectangle, "x", Strong.easeOut, 0, 300, 3, true);
var myTweenAlpha:Tween = new Tween(rectangle, "alpha", Strong.easeOut, 0, 1, 3, true);
var myTweenWidth:Tween = new Tween(rectangle, "width", Strong.easeOut, rectangle.width, rectangle.width + 300, 3, true);
var myTweenRotation:Tween = new Tween(rectangle, "rotation", Strong.easeOut, 0, 90, 3, true);

So here our rectangle fades 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.