Using the Tween class -- Version 8

If you use the Tween class in more than one place in your Flash document, you might opt to use an import statement. This lets you import the Tween class and easing methods rather than give the fully qualified class names each time you use them, as the following procedure shows.

To import and use the Tween class:

Flash documentation defines package as directories that contain one or more class files and that reside in a designated classpath directory. In this case, the package resides in the C:\Program Files\Macromedia\Flash 8\language\First Run\Classes\mx\transitions\easing folder (Windows), or HD:Applications:Macromedia Flash 8:First Run:Classes:mx:transitions:easing (Macintosh). You might agree that importing an entire package is much better than having to import the six classes separately. Instead of referring to the mx.transitions.Tween class, 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 for example, you can type Elastic.easeOut in your ActionScript code. For more information, see Working with filter packages.

Using similar code, you set the _alpha property to fade instances in and out, instead of the _x property, as the next procedure shows.

To fade instances using the Tween class:

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. If you set the parameter to false, the duration is the number of frames you want to use for the tween. The next procedure shows how to set a tween to frames instead of seconds.

To set a duration of frames instead of seconds:

Using frames instead of seconds offers more flexibility, but remember that the duration relates to the frame rate of the current Flash document. If your Flash document uses a frame rate of 12 frames per second (fps), the previous code snippet fades the instance over two seconds (24 frames/12 fps = 2 seconds). However, if your frame rate is 24 fps, 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 several more useful features. For example, you can write an event handler that triggers when the animation completes, as the next procedure shows.

To trigger code when an animation is completed:

Comments

helentriolo said on Oct 30, 2005 at 9:59 AM :

Shouldn't instances of the Tween class now be created with that data type instead of Object (now that onMotionFinished is declared a public var so the compiler won't throw an error on assignment to it)? Thanks for documenting the whole class in this version!

jdehaan said on Oct 31, 2005 at 3:16 PM :

Yes, thanks for noting that! You can use this code for the final snippet instead:

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

hlindley said on Aug 3, 2006 at 3:19 PM :

How would you write a function so that onMotionFinished is called after several tweens are finsihed? For examle, say you have an MC that you are tweening both the _x and the _y and you want onMotionFinsihed to execute only after both tweens are complete.

ctcrmcou said on Nov 9, 2006 at 6:32 AM :

The tween onMotionChanged event fires in timing with the document's FPS, and is not independent of it like setInterval() is. I set the FPS to 4, and the tween was very sparatic. Setting it to 24 revealed a smooth tween.

pixelone said on Dec 14, 2006 at 10:52 AM :

What if you have multiple Movie Clips I.e ball_mc1, ball_mc2, ball_mc3 etc.. How would you check to see if they are all completed.. Would you use an array? If so could you show an example.

Thanks

SuperRoach said on Jan 28, 2007 at 2:54 PM :

On a multipage website, pasting in the code:
import mx.transitions.Tween;
import mx.transitions.easing.*;

Gives me a syntax error for where the two lines appear. - This will make any transitions and tweens not appear (the two lines above need to be commented out for it to compile). However, when a page is loaded that contains the code (and gives no syntax error), the transitions and tweens in the first movie as well as the loaded clip all work fine.

What would cause a synax error when trying to use the import code?

No screen name said on Aug 1, 2007 at 1:20 PM :

How do you get something to fade in?

Jerusik said on Aug 1, 2007 at 1:25 PM :

I can fade a graphic in using the Fade Transition. Is it possible to use the Tween class to fade in also? I cannot get the Fade Transition to fade in as fast as I would like.

Thank you.