Flash Tutorial

ActionScript 3 Tutorial – Tweener Transitions

, Author

I recently posted a couple of ActionScript button tutorials that made use of the Tweener class instead of the traditional Tween class, so I thought it would be appropriate to talk a little more about the Tweener class and discuss why and how to use it.

Tween vs Tweener

It doesn’t take a Flash developer long to discover what a pain the traditional Tween class can be. Often for seemingly unknown reasons, animations created using the Tween class will just stop playing right in the middle of a transition. This is usually due to ActionScript’s method of garbage collection, and extra code is often needed to alleviate the issues. In other words, sometimes Flash thinks you’re done using a Tween before it’s even finished animating, so it just throws the Tween away. Thanks, ActionScript, but no thanks! Why deal with these pesky annoyances when there’s a much easier class to use?

Introducing the Tweener class, an open-source class for creating ActionScript animations that doesn’t have all the messy garbage collection problems. In other words, the Tweener class will actually wait for your animations to finish before deciding they’re not needed any more. A novel idea!

Installing Tweener

If you’ve never installed your own class before, I’ll give you a quick rundown of what I do.

1. Create a folder. I keep all of my external classes in a folder on my desktop called “as”. If you’re a neat freak who doesn’t like a messy desktop, then you can place your ActionScript folder wherever you wish, but don’t come crying to me when you can’t seem to find where you placed it. (Because then I’ll make fun of you for not knowing how to use your computer’s search features.)

2. Download the class files. The class files for the Tweener class can be found at Google’s code repository, here. Click on the “download” tab at the top of the page, and you’ll see a list similar to this one:

Notice that Tweener is available for both ActionScript 2 and ActionScript 3, so make sure you grab the right version. The version I’ll be using is the ActionScript 3 version. Select the latest stable version, and download the appropriate zip file–in this case, the tweener_1_33_74_as3.zip file.

3. Install the Tweener Class. This part is easy. Simply unzip the files you just download and then copy the caurina folder (which contains the Tweener class) into the ActionScript folder that you created earlier. Then open up Flash and go to Edit > Preferences.

Click on the ActionScript category on the left side of the Preferences dialog, and then click on the button for ActionScript 3.0 Settings. Under the “source” section, we can tell Flash where to look for classes that aren’t included in the default Flash package. Next to “Source path:”, click on the plus sign icon. This allows you to create a new path for Flash to include.

Clicking the plus sign will create a new entry. Now we need to point that entry to the right place, so click on the folder icon to browse for the folder(s) you want to include. In this case, we want to include more than just the “caurina” folder. If you don’t want to go through this process every time you download a new class, it would be best to simply include the entire “as” folder that you created before. Notice that my path includes a subfolder called “3”. I have two separate folders: one for ActionScript 2 classes and one for ActionScript 3.

Using the Tweener Class

Now that you’ve installed the Tweener class, let’s take a look at just how easy it is to use. First of all, the Tweener class must be imported using the following line of code:

import caurina.transitions.*;

This will import all of the classes associated with the Tweener class. If this import doesn’t work, then you need to double-check to make sure that your “caurina” folder is inside the “as” folder that we discussed before. Also, double check your ActionScript settings to make sure you entered your Source Path properly.

As for the Tweener code itself, you will hopefully appreciate its beautiful simplicity. Consider the following example:

Tweener.addTween(square_mc, {"x":100, transition:"linear", time:1, delay:1});

It may seem complicated at first, but if you take a close look, it’s pretty easy to figure out.

To create a new Tween with the Tweener class, you will use the Tweener.addTween() method. The first parameter sent to this method (in this case, square_mc) is the name of the object you want to apply the animation to. Here, we’re assuming that there’s a MovieClip on the stage with an instance name of square_mc.

The second parameter for the addTween() method is an object contained within curly brackets that consists of numerous property/value pairs. In this example, you can see that we’re going to animate the “x” property of the square MovieClip. The starting value for this property will be whatever its current “x” coordinate is on the stage. It will animate until it reaches an “x” value of 100.

Note that you can include multiple properties here, which is another fantastic advantage to the Tweener class. With the traditional Tween class, if you wanted to animate both the x and y coordinates, for example, you would have to create two separate Tweens for it. With the Tweener class, on the other hand, you simply add another property/value pair within the curly brackets. So if I wanted to animate both x and y, I could enter the following:

Tweener.addTween(square_mc, {"x":100, "y":100, transition:"linear", time:1, delay:1});

You can animate any number of properties all at once simply by including them within the curly brackets. As you can see, this is a very flexible class. (Now you can see why I never use the Tween class anymore!)

The next property–the transition property–determines how easing is applied to your animation. The Tweener class contains a more flexible array of easing options than the traditional Tween class, which we will discuss shortly.

The time property determines the duration, in seconds, of the transition. In this case, the new Tween will last 1 second.

The delay property is an optional property that allows you to delay the start of the transition. In this example, the animation waits one second before starting. This property can come in very handy if you have multiple animations that you want to occur in sequence. For example, if you want to play three 1-second animations, one after the other, then you would set the delay for the first Tween to zero, the second Tween to one, and the third to two, like so:

Tweener.addTween(square_mc, {"x":100, transition:"linear", time:1});
Tweener.addTween(square2_mc, {"x":100, transition:"linear", time:1, delay:1})
Tweener.addTween(square3_mc, {"x":100, transition:"linear", time:1, delay:2})

Note that there is no delay set for the first Tween here. The delays are only set for the second and third animations.

Tweener Transitions

As I mentioned, the Tweener class contains more options for easing than the easing classes associated with the traditional Tween class. Here are a few of my favorite options for use with the transitionproperty:

  • “linear” – This option is the most basic. With the “linear” option, no easing is applied to your animation.
  • “easeInSine” – This is a basic “ease in” option. The animation starts off slow and speeds up towards the end, like an accelerating car.
  • “easeOutSine” – The basic “ease out” option. The animation starts off quickly and slows down towards the end, like a car hitting the brakes and coming to a stop.
  • “easeInOutSine” – This option gives a smooth, gradual start and end to the animation.
  • “easeOutElastic” – This is more of a rubber-band-like animation. Just try it. It’s easier to watch than to explain.
  • “easeOutBounce” – Again, just try it.

Overwhelmed? Afraid you’re not going to remember all of these easing options? Don’t worry about it. There is a very useful Tweener Transitions cheat sheet available that has graphs of all the transitions and how they behave. I keep this cheat sheet pinned to my corkboard. It would behoove you to do the same.

Sample Animation

Consider the following code:

import caurina.transitions.*;
import flash.events.MouseEvent;

square_mc.buttonMode = true;
square_mc.addEventListener(MouseEvent.CLICK, rotateIt);

function rotateIt(e:MouseEvent):void {
   square_mc.rotationX = square_mc.rotationY = square_mc.rotationZ = 0;
   Tweener.addTween(square_mc,{"rotationX":360, "rotationY":360, "rotationZ":360, time:1, transition:"easeInOutSine"});
}

This code sets up a Movie Clip called square_mc as a button that rotates around its x, y, and z axes when clicked. Inside the rotateIt function, notice that I’m resetting the rotationX, rotationY, and rotationZ properties before actually doing the rotations. Otherwise, the animation will only work the first time you click on the Movie Clip. Here’s the final result: