AS2 → AS3: Scripted Tweening

Download Example Files
Download TweenLite

The Tween class hasn't changed at all since moving from AS2 to AS3, but there are some subtle differences in handling the events in it because of the new event architecture. Let's take a look at the code to tween a box diagonally down the stage in AS2:

Actionscript:
  1. import mx.transitions.Tween;
  2. import mx.transitions.easing.*;
  3.  
  4. var xTween:Tween = new Tween(box_mc, "_x", Regular.easeOut, 0, 500, .5, true);
  5. var yTween:Tween = new Tween(box_mc, "_y", Regular.easeOut, 0, 350, .5, true);
  6.  
  7. xTween.onMotionFinished = function():Void
  8. {
  9.     trace("Finished tweening the box.");
  10. };

Now here is that code in AS3:

Actionscript:
  1. import fl.transitions.Tween;
  2. import fl.transitions.easing.*;
  3. import fl.transitions.TweenEvent;
  4.  
  5. var xTween:Tween = new Tween(box_mc, "x", Regular.easeOut, 0, 500, .5, true);
  6. var yTween:Tween = new Tween(box_mc, "y", Regular.easeOut, 0, 350, .5, true);
  7.  
  8. xTween.addEventListener(TweenEvent.MOTION_FINISH, onMotionFinished);
  9.  
  10. function onMotionFinished($evt:TweenEvent):void
  11. {
  12.     trace("Finished tweening the box.");
  13. }

As you can see, not much has changed, and you still have to make a new tween for each property you want to tween. Enter TweenLite, Jack Doyle's AS3 lightweight tweening engine. I now use this for AS3 tweens and it gets the job done the way I like it. It's also nice that it's just one static call. Here is the code:

Actionscript:
  1. import fl.transitions.easing.*;
  2. import gs.TweenLite;
  3.  
  4. TweenLite.to(box_mc, .5, {x: 500, y: 350, ease: Regular.easeOut, onComplete: onMotionFinished});
  5.  
  6. function onMotionFinished():void
  7. {
  8.     trace("Finished tweening the box.");
  9. }

Much shorter code and the ability to tween multiple properties in one line!

If you found this post useful, please consider leaving a comment, subscribing to the feed, or making a small donation.

1 Comment

Yeah!! Thanks a lot buddy, you saved my day! (and my job :P)

Leave a comment

(required)

(required)