jump to navigation

Timing an animation of the native Tween Class in ActionScript 3 August 14, 2010

Posted by Tournas Dimitrios in Actionscript.
trackback

This article 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):

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:

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:

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). We have to create a listener to catch the event a lot like in the previous example but this time we catch a timer event. It is also good practice to remove listeners if you don’t use them.

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

Read more :

Advertisements

Comments»

No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s