Using the Tween Class

Starting with MX2004, Macromedia gave developers access to the Tween class. This class allows you to use bits and pieces of the Flash tweening features directly using ActionScript. This tutorial will (hopefully) teach you how to use the Tween class to create various motion effects by deconstructing a simple example.

The following is some text animated using the Tween class:

The main part of this tutorial is the code explanation, so instead of having you go through creating the text, etc., I will provide the full source code for the above animation.

Download FLA for Flash MX 2004/Flash 8

After you have unzipped and opened the tweenComplete file from the above link, select the frame with Actions on it, and press F9 (Window | Actions). You should see the following code:

import mx.transitions.Tween;

import mx.transitions.easing.*;

var xScaleT:Tween = new Tween(kText, "_rotation", Elastic.easeOut, 0, 360, 3, true);

var xPosT:Tween = new Tween(kText, "_x", Bounce.easeOut, 0, Stage.width, 3, true);

xScaleT.onMotionFinished = function() {

this.yoyo();

};

xPosT.onMotionFinished = function() {

this.continueTo(Stage.width / 2, 3);

};

Before I explain the code, you should be aware that kText in our code references the instance name of our movie clip on the stage.

Let's go through the code:

import mx.transitions.Tween;

import mx.transitions.easing.*;

The first line imports the Tween class file into your Flash document. You can find the class file called Tween.as at C:\Program Files\Macromedia\Flash 8\<language>\First Run\Classes\mx\ transitions\ assuming a default installation. Here you should find 16 class files used by Flash for various other effects (including the slideshow templates).

For this tutorial we are only interested in the Tween class and the 6 easing classes contained within the easing folder. The second line imports the latter.

var xScaleT:Tween = new Tween(kText, "_rotation", Elastic.easeOut, 0, 360, 3, true);

var xPosT:Tween = new Tween(kText, "_x", Elastic.easeOut, 0, Stage.width / 2, 3, true);

These two lines create two new tween instances and store them as the variables xScaleT and xPosT. The Tween class constructor requires seven parameters, which are in order:

1. object – The instance of an object in which to apply the tween. This can be any object, and is not just limited to movie clips.

2. property – The numeric property of the previous object in which to Tween. The property name is passed to the constructor as a string.

3. ease class and method – The type of tween and the method of ease applied to it. Flash comes bundled with 6 easing classes:

   1. Back – Extends the animation over one or both ends of the tween.

   2. Bounce – Creates a bouncing effect in the tween at one or both ends.

   3. Elastic – Creates a mixture of the bounce and back classes. The animation is extended over and bounces back at one or both ends of the Tween.

   4. Regular – Slower motion at one or both ends of the tween.

   5. Strong – Similar to regular but is more pronounced when combined with the various easing methods.

   6. None – A simple linear transition from a to b.

These six easing classes each have three methods to control the ease:

1. easeIn – The ease is applied only at the start of the tween.

2. easeOut – The ease is applied only at the end of the tween.

3. easeInOut – The ease is applied at both the beginning and end of the tween.

By combing the six easing classes with the three easing methods, we can create a possible 18 different effects for each property.

4. begin – The beginning value for the property in the tween.

5. end – The end value for the property in the tween.

6. duration – The duration of the tween. This value can either be specified as a number of frames or a number of seconds depending on the value of the next parameter.

7. use seconds – Specifies whether or not the duration parameter should be measured in frames or seconds. Requires a Boolean of either true (use seconds) or false (use frames).

xScaleT.onMotionFinished = function() {

This is an event handler for the xScaleT tween instance. So when the current tween finishes (reaches its end value), the code defined within the function will execute.

this.yoyo();

Using the yoyo method, this line basically instructs the tween to flip the end and begin values creating an endless back and forth motion.

xPosT.onMotionFinished = function() {

Another event handler, but this time for the xPosT tween instance.

this.continueTo(Stage.width / 2, 3);

The final method of the easing classes which continues the tween to a new end value. The continueTo method requires two parameters, end and duration. The duration parameter assumes the use seconds Boolean from the tween in which it is applied to.

Note
In Flash MX 2004, the many events associated with the Tween class are not declared as members of the class. In layman's terms this means that you cannot use these functions in the way I have shown (as a property of the instance). The Tween class in MX 2004 was meant to be used with listeners, but there are several workarounds for this:

1. Obviously using listeners is one of the solutions. This is the way the developers intended but can become quite cumbersome. All in all however this is the correct way to go since the other two methods are basically just fooling the compiler's error checking. An example of using listeners with the Tween class:

import mx.transitions.Tween;

import mx.transitions.easing.*;

var myTween:Tween = new Tween();

var listeningObject:Object = new Object();

myTween.addListener(listeningObject);

listeningObject.onMotionFinished = function():Void {

//actions for motion finished

};

2. Don't use dot notation but rather use array referencing, the compiler cannot check these properties and thus it can't give an error. Example:

var myTween:Tween = new Tween();

myTween["onMotionFinished"] = function ():Void {

//actions for motion finished

};

3. Don't data type the variable. If the compiler doesn't know what type the variable is there is no way for it to tell which properties belong and which do not. Alternatively you could type the variable as Object, which is a dynamic class (meaning there is no restrictions on the properties an instance can have). Example showing the variable with type Object:

var myTween:Object = new Tween();

myTween.onMotionFinished = function():Void {

//actions for motion finished

};

As you can hopefully see, the Tween class is actually very easy to use and manipulate to create the desired effect. If you have any questions, feel free to post them on the kirupaForums.

Good Luck!

Jesse Marangoni TheCanadian