Home / Flash / Timing an animation in ActionScript 3

Timing an animation in ActionScript 3

This tutorial will show you how to time your animation in ActionScript 3. All the concept are the same as in ActionScript 2, but how you do it is quite different.
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, (this is the same as in ActionScript 2):
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, 1, 3, true);
This code will move the MovieClip(or Sprite) 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.In ActionScript 2 You would use the onMotionFinished event from the Tween class in order to do so, but the way Flash handles event is different in ActionScript 3. Here is the code:
1
2
3
4
5
6
7
8
9
10
11
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
 
var myTweenX:Tween = new Tween(bloc, "alpha", Strong.easeOut, 0, 1, 3, true);
myTweenX.addEventListener(TweenEvent.MOTION_FINISH, doNextTween);
 
function doNextTween(e:TweenEvent):void{
  var myTweenAlpha:Tween = new Tween(bloc, "x", None.easeOut, 0, 300, 3, true);
  myTweenX.removeEventListener(TweenEvent.MOTION_FINISH, doNextTween);
}
First you have to import the events relative to tweens using the “import fl.transitions.TweenEvent;” statement. Then you have to create a listener to catch the event when the first tween will finish. You give to the listener the function containing the next tween to do, a bit like the setTimeout function in the previous tutorial. 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 ActionScript 2 we would use the setTimeout function but in ActionScript 3 it is better to use the timer class, like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import fl.transitions.Tween;
import fl.transitions.easing.*;
import flash.utils.Timer;//classes to use Timer
import flash.events.TimerEvent;
 
var timer:Timer = new Timer(1500, 1);//create the timer
timer.addEventListener(TimerEvent.TIMER, doNextTween);
timer.start();
 
var myTweenX:Tween = new Tween(bloc, "alpha", None.easeOut, 0, 1, 3, true);
 
function doNextTween(e:TimerEvent):void{
  var myTweenAlpha:Tween = new Tween(bloc, "x", Strong.easeOut, 0, 300, 3, true);
  timer.removeEventListener(TimerEvent.TIMER, doNextTween);
}
First you have to import the classes related to the Timer, then you create your timer. The first argument of the Timer constructor is at what interval it will send the event, and the second argument is how many time it will send it. In our case, it will send one event after 1.5 seconds (1500 milliseconds).

Timing an animation in ActionScript 3 Rating: 4.5 Diposkan Oleh: Catatanku