Flash Notes: Using Tweener

March 21st, 2008

Again, this post consists of notes for myself, but someone else out there might find them interesting.

I’ve used McTween in Flash for quite some time now. It’s a code extension to Flash that makes many animations extremely easy to implement. A newer version called Tweener has been developed, and it obviously took me until now to move over. But after playing with it for a day I can already see it making some things much easier. There are ActionScript 2.0 and ActionScript 3.0 versions of Tweener.

Installing Tweener

Installing Tweener is different from McTween which was a Flash extension that installed with a double click. Tweener has to be added as a class. If you’ve never added a class to your installation of Flash, here’s how.

1. Download Tweener. It will appear as folder named “caurina”. This is standard practice as otherwise all the classes you install by different developers could have similar names and cause problems down the line.

2. Put the folder somewhere on your computer. It might be a good idea to create something like “Flash Development/Classes” in your My Documents folder, and put the “caurina” folder in it.

3. Start up Flash. Go to Edit -> Preferences. In the menu on the left, click ActionScript. Then click on the Language: ActionScript 2.0 (or 3.0) Settings. In the dialog box that appears, you’ll be given an option to set up a “Classpath”. This is basically going to point to the directory you just put the “Caurina” folder into. Click the “+” to add a new path and then use the target button to browse to the directory that contains the “caurina” folder. Once this is set up, you won’t have to do this again, and any new classes you put into that folder will be accessible to your Flash files.

4. In your Flash file, include this ActionScript:

import caurina.transitions.Tweener;

There are other ways to add classes to ActionScript files but this is the manner most similar to that of McTween.

Using Tweener

The syntax for Tweener is different from McTween but more flexible once you get used to it. In McTween, you’d name the movie clip you wanted to animate and then the animation type with parameters:

button_mc.alphaTo(0, 2, "linear");

This would basically tell the movie clip with an instance name of button_mc to fade to zero over two seconds with a linear transition.

In Tweener, the syntax is flipped:

Tweener.addTween(button_mc, {_alpha:0, time:2, transition:"linear"});

The first big difference is the movie clip to be animated appears in the parameters. Second, the animation type doesn’t have to be named. McTween had a whole list of them: alphaTo, scaleTo, xScaleTo, volumeTo, rotateTo, etc. You just use “Tweener.addTween” any time you use Tweener. What ends up happening is a result of the parameters. If they’re different than what they were before, the animation occurs. The parameters can therefore be listed without having to know what to “call” the animation.

With McTween, if you wanted to fade out and change the scale simultaneously, you’d have to write:

button_mc.alphaTo(0,2,"linear"); button_mc.scaleTo(0,2,"linear");

Wheras with Tweener you can just list another parameter:

Tweener.addTween(button_mc, {_alpha:0, _scale:0, time:2, transition:"linear"});

You don’t have to remember that the animation was specifically called “scaleTo” and “alphaTo” and you can just list everything in one tween and let Tweener figure it out.

Also note how the parameters are clearly idenitified, making it easier for other people looking at your code to figure out what’s going on. It should be very obvious which number to change to have animation take three seconds instead of two, while in the McTween version, not at all.

Event updates

With Tweener you can add function calls that fire at the start, end, and animation in progress.

Tweener.addTween(button_mc, {_alpha:0, scale:0, time:2, transition:"linear", onStart:this.starting, onUpdate:this.updating, onComplete:this.completing});

You can then write functions called button_mc.starting, button_mc.updating, and button_mc.completing containing whatever you want to happen at those moments. Before you would have to code your own test for the movie clip’s properties.

Base style

Using a base style is similar to CSS (at least in my mind). You can set up a basic transition style at the top of your ActionScript, to be used in your code. Defining this base will make for easier editing later.

var fadingIn:Object = {alpha:100, _scale:1, time:0.5, transition:"linear"}

(later in your code)

Tweener.addTween(button_mc,{base:fadingIn,_color:0x000000});

The base scale is used in the button_mc animation, with the addition of the different color.

Anyhow, that’s my Tweener overview. Essentially, the results aren’t any cooler than McTween but the code behind is better and will be easier to read and edit in the future. That’s a good thing.

Here are some resources for further investigation into Tweener: