Timing an animation in ActionScript 2

In the previous tutorial, I showed how to do Tweens in ActionScript 3, I don’t really need to show it in ActionScript 2 because it is fairly the same. But when it comes to timing your animations, doing it in ActionScript 2 really differs from doing it in ActionScript 3. So I am going to do this first tutorial in ActionScript 2 and then I am going to do exactly the same Tutorial in ActionScript 3.

The easiest thing to do is to animate to properties in parallel (starting at the same time). All you have to do in your code is to write your tweens one after the other just like this:

1
2
var myTween1:Tween = new Tween(bloc, "_x", Strong.easeOut, 0, 300, 3, true);
var myTween2:Tween = new Tween(bloc, "_alpha", Strong.easeOut, 0, 100, 3, true);

This code will move the MovieClip with instance name “bloc” horizontally while making it appear (alpha). But you can’t do all animations like this. Sometimes, you want to do it sequentially, meaning that one Tween will start after the first one as finished playing. You have to use the onMotionFinished event from the Tween class in order to do so.

1
2
3
4
var myTween1:Tween = new Tween(bloc, "_alpha", Strong.easeOut, 0, 100, 1, true);
myTween1.onMotionFinished = function(){
  var myTween2:Tween = new Tween(bloc, "_x", Strong.easeOut, 0, 300, 1, true);
}

So now, the MovieClip bloc will first appear by doing the tween myTween1 and once it is finished, “bloc” will move horizontally by executing myTween2. Ok, that is one thing more we can do. There is one thing left. What if we want to start a tween, and while it is playing start another one. That is a bit harder than the two previous options. In order to do that, you have to use an undocumented function named setTimeout. Basically what it does is that it execute a given function after an amount of time (in milliseconds, 1000ms = 1 second) you input. So we can use it in this way:

1
2
3
4
5
var myTween1:Tween = new Tween(bloc, "_alpha", Strong.easeOut, 0, 100, 2, true);
setTimeout(this, "doNextTween", 1000)//this will execute function doNextTween after 1 second
function doNextTween(){
  var myTween2:Tween = new Tween(bloc, "_x", Strong.easeOut, 0, 300, 1, true);
}

With what I have shown here you should be able to time your animations the way you want without any trouble.

  1. #1 by Octy - March 24th, 2009 at 10:51

    This was all about setInterval rather than setTimeout, I think.. Thx anyways. Nice work ^^,

  2. #2 by BT - December 20th, 2010 at 10:59

    I need a Flash Developer. Help.

  3. #3 by shiri - May 19th, 2011 at 06:45

    hi…
    when i am trying to write: var mytween:Tween=….

    the compiler say that i the tween class cn`t be loaded…
    please… help me!!!!
    TNX

  4. #4 by Erwin - August 7th, 2011 at 21:45

    you have to add
    import mx.transitions.Tween;
    import mx.transitions.easing.*;

    on top of the actionscript

  5. #5 by Ronald Jones - September 4th, 2012 at 06:14

    Great, no, let me change that, perfect timing rather is what makes great animation, no question about that. But what differentiates Action Script 2 from Action Script 3 is not clear to me.

(will not be published)
Subscribe to comments feed