Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

About the Tween Class

About the Tween Class

The Tween class enables you to move, resize, and fade movie clips easily on the Stage. The following code is from the class file.

/*  constructor for Tween class 
obj: reference - the object which the Tween targets
prop: string - name of the property (in obj) that will be affected
begin: number - the starting value of prop
duration: number - the length of time of the motion;
set to infinity if negative or omitted
useSeconds: boolean - a flag specifying whether to
use seconds instead of frames

function Tween (obj, prop, func, begin, finish, duration, useSeconds) {
/* omitted to save space. */

For example, imagine that you want to move a movie clip across the Stage. You can add keyframes to the Timeline and insert a motion or shape tween between them, or you can write some code in an onEnterFrame event handler, or you could use the setInterval() function to call a function at periodic intervals. If you use the Tween class, you have yet another option where you can modify a movie clip’s _x and _y properties. You can also add the easing methods demonstrated earlier. In order to take advantage of the Tween class, you can use the following ActionScript:

new mx.transitions.Tween(ball_mc, "_x", 
0, 300, 3, true);

The previous ActionScript snippet creates a new instance of the Tween class, which animates the ball_mc movie clip on the Stage along the X-axis (left to right). The movie clip animates from 0 pixels to 300 pixels in three seconds, and the ActionScript applies an elastic easing method. This means the ball extends past 300 pixels on the x-axis before animating back using a fluid motion effect.

If you use the Tween class in more than one place in your Flash document, you might opt to use the import keyword. This enables you to import the Tween class and easing methods rather than give the fully qualified class names each time you use them, as shown in the following example:

import mx.transitions.Tween;
import mx.transitions.easing.*;
new Tween(ball_mc, "_x", Elastic.easeOut, 0, 300, 3, true);

Here you use two separate import statements. The first statement imports the mx.transitions.Tween class only, and the second import statement uses the wildcard (*) shortcut to import each of the six easing classes using a single line of code. The second statement imports an entire package of classes. Flash documentation defines package as “directories that contain one or more class files and reside in a designated classpath directory.” In this case, the package resides in the <Flash Install directory><language>First RunClassesmx ransitionseasing folder. You might agree that importing an entire package is much better than having to import the six classes separately. Instead of having to refer to mx.transitions.Tween, your ActionScript directly refers to the Tween class. Likewise, instead of using the fully qualified class name for the easing classes (mx.transitions.easing.Elastic.easeOut), you simply type Elastic.easeOut.

Using similar code, you set the _alpha property to fade instances in and out, instead of _x, as shown in the following code snippet:

import mx.transitions.Tween;
import mx.transitions.easing.*;
new Tween(ball_mc, "_alpha", Strong.easeIn, 100, 0, 3, true);

Instead of moving around the Stage, now ball_mc fades from 100 percent visible to completely transparent in three seconds flat. If you want the symbol to fade out quicker, then you can change the duration parameter from 3 to 1 or 2.

Instead of using seconds, you can fade the symbol over a few frames. To set the duration in frames instead of seconds in the Tween class, you change the final parameter, useSeconds, from true to false. When you set the parameter to true, you tell Flash that the specified duration is in seconds. Or, if you set the parameter to false, the duration is the number of frames you want to use for the tween. For example, examine the following code:

import mx.transitions.Tween;
import mx.transitions.easing.*;
new Tween(ball_mc, "_alpha", Strong.easeIn, 100, 0, 24, false);

The previous snippet fades out the ball_mc instance using the Strong.easeIn easing method. Instead of fading the instance for three seconds, it fades the instance across 24 frames. Using frames instead of seconds offers you a lot more flexibility, but remember that the duration is tied to the frame rate of the current Flash document. If your Flash document uses a frame rate of 12 frames per second (fps), then the previous code snippet fades the instance over two seconds (24 frames/12 fps = 2 seconds). However, if your frame rate is 24 fps, then the same code fades the instance over one second (24 frames/24 fps = 1 second). If you use frames to measure duration, you can significantly change the speed of your animation when you change the document’s frame rate, without modifying your ActionScript.

The Tween class has a few more cool tricks that you can use. For example, you can write an event handler that triggers when the animation completes, as seen in the following snippet:

import mx.transitions.Tween;
import mx.transitions.easing.*;
var tween_handler:Object =
new Tween(ball_mc, "_alpha", Strong.easeIn, 100, 0, 3, true);
tween_handler.onMotionFinished = function() {
//place your action here
trace("onMotionFinished triggered");

If you test this ActionScript in your FLA file, you see the message “onMotionFinished triggered” appear in the Output panel after ball_mc finishes fading on the Stage.