Tweener Recipes

Tweener Recipes

Introduction
Tweener is a set of Actionscript classes that animate the properties of objects in Flash. In it's most common useage Tweener is used to animate MovieClips on the stage. Tweener is not limited to animating MovieClips, it can be used to animate just about any property of any Object in Flash. This includes animating the Volume or Pan of a Sound. The text in a Text Field and more.

When it comes to MovieClips Tweener can animate all of the standard MovieClip properties, like x, y, rotation and scaleX and scaleY. Tweener can also apply filters to Objects, and animate the properties of the filters.

Tweener is flexible and easy to work with.

Tweener requires only that copy the class library into the folder with your project and import the class in any script that will use it.

Downloading Tweener


Working with the Tweener class library
The Tweener class library is contained with the folder caurina. In order for any project to use Tweener you must place the caurina folder in the same folder with your fla.

For more information about working with class files and class libraries see the Working with Classes recipe.



Some recipes using Tweener

Basic Tweener recipes: Making things move
The following recipe makes things move with Tweener. Many of students, after learning Tweener, have said they find it easier to work with than using the timeline to create motion.

You must place the caurina folder in the same folder as the fla for this example.

The basic recipe for Tweener motion is first import the class with the following line.

import caurina.transitions.Tweener;

From here create a Tween by calling Tweener's static addTween function and passing two parameters, the target clip and an object describing the tween or motion that wish to create.

For example imagine you wanted to make an object move to the center of the stage, you might use the following:

Tweener.addTween( target, {x:275, time:1} );


Animate multiple properties at the same time
To animate more than one property with Tweener just add them to the tween object. For example imagine you wanted to animate both scaleX and scaleY at the same time. You could use the following:

Tweener.addTween( target, {scaleX:2, scaleY:2, time:1} );


Setting the ease type
The type of easing applied with Tweener is set via the transition property of the Tween object. The transitions properties are listed as part of the documentation.

Here's an example of an elastic ease out:

Tweener.addTween( target, {x:275, time:1, transition:"elasticEaseOut" } );


Animating Filter Properties
You can animate any of the filter properties with Tweener. You must first import the FilterShortcuts class and initialize the class with the following two lines:

import caurina.transitions.properties.FilterShortcuts;
FilterShortcuts.init();

To animate a filter you'll need to consult the Tweener documentation to check the property's name. The following line animates the _Blur_blurX property.

Tweener.addTween( target, {_Blur_blurX:40, time:2} );

Bonus: You can apply a Filter to a clip with Tweener without having to animate the Filter. If you have already used Tweener in a project it's easier to apply a Filter this way. Just use addTween() without the time parameter. The following applies a drop shadow the target with a 12 pixel blur on the x and y axis:

Tweener.addTween( astronaut_mc, { _DropShadow_blurX:12, _DropShadow_blurY:12 } );

Exluding the time property from the tween object causes the properties listed in the tween object to be applied immediately.

Note: Some filters may not become visible until certain properties are set.