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). 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.

  1. #1 by chris g - February 24th, 2009 at 09:48

    Thank you so much for this string of tutorials. You have helped me so much!

  2. #2 by Bart - March 18th, 2009 at 11:59

    thanks for the tutorial

  3. #3 by Rob - April 6th, 2009 at 03:29

    I have two tweens; one moving an object 30px down, and the other to move the object up 30px.

    I have used your code above to start tween 2, after tween 1 has completed.

    How would I go about starting tween 1 again after tween 2 has finished as to create a continuous loop of tweens.

  4. #4 by Rob - April 6th, 2009 at 06:47

    I Found that this worked

    [as]

    function moveMouth(){
    var randomNum:Number = Math.random()*5 + 5;
    Tweener.addTween(myTiger.myHead_mc.myMouth_mc, {y: 30, time: 3, delay: randomNum, transition:”easeOut”});
    Tweener.addTween(myTiger.myHead_mc.myMouth_mc, {y: 0, time: 3, delay: 3+randomNum, transition:”easeOut”, onComplete:moveMouth});
    }
    moveMouth();

    [/as]

  5. #5 by Arley - April 22nd, 2009 at 12:00

    Another way you might do this would be to use the TweenEvent.MOTION_CHANGE then input logic to check the time, position, or other Tween attribute to determine when to start your next Tween.

    It seems this would be more burdensome on the processing, but it gives you direct control of your next tween in terms of the original one, which can be very useful.

  6. #6 by Steve - June 15th, 2009 at 16:41

    @Rob
    Try This

    function tween1():void {
    var tweenY1:Tween = new Tween(instanceName, “y”, None.easeNone, 0, 30, 3, true);
    tweenY1.addEventListener(TweenEvent.MOTION_FINISH, tween2);
    }

    function tween2():void {
    var tweenY2:Tween = new Tween(instanceName2, “y”, None.easeNone, 30, 0, 3, true);
    tweenY2.addEventListener(TweenEvent.MOTION_FINISH, tween1);
    }

    //Warning:infinite loops can cause problems

  7. #7 by Steve - June 15th, 2009 at 17:25

    sorry nevermind that doesn’t work

    it might be easier to just make a timeline tween where it goes down 30 then up 30 and just loops inside a movieClip

  8. #8 by Steve - June 16th, 2009 at 21:40

    i finally found this at

    http://www.republicofcode.com/tutorials/flash/as3tweenclass/

    import fl.transitions.Tween;
    import fl.transitions.easing.*;
    import fl.transitions.TweenEvent;

    var myTween = new Tween(my_mc, “x”, Strong.easeInOut, 100,300, 1, true);

    myTween.addEventListener(TweenEvent.MOTION_FINISH, onFinish);
    function onFinish(e:TweenEvent):void {
    myTween.yoyo();
    }

    this code will loop my_mc forever

    @Rob

  9. #9 by luis - July 14th, 2009 at 03:35

    Hello. I have the next situation: I need a logo to fade out and then fade in again every 5 seconds on an infinite loop. (during these 5 seconds it has to stay on alpha=1). I already tried this:

    var timer_logo:Timer = new Timer(5000,1);
    timer_logo.addEventListener(TimerEvent.TIMER,f_logo_out);
    timer_logo.start();

    function f_logo_out(event:TimerEvent):void{
    var logo_fade_out:Tween = new Tween(logo_inside,”alpha”,Regular.easeInOut,1,0.3,1,true);
    logo_fade_out.addEventListener(TweenEvent.MOTION_FINISH,f_logo_in);
    function f_logo_in(event:TweenEvent):void{
    var logo_fade_in:Tween = new Tween(logo_inside,”alpha”,Regular.easeInOut,0.3,1,1,true);
    logo_fade_out.removeEventListener(TweenEvent.MOTION_FINISH,f_logo_in);
    logo_fade_in.addEventListener(TweenEvent.MOTION_FINISH,f_logo_x);
    function f_logo_x(event:TweenEvent):void{
    timer_logo.start();
    logo_fade_in.removeEventListener(TweenEvent.MOTION_FINISH,f_logo_x);
    }
    }
    }

    When I export the movie it works, but if I live it on playing eventually something goes wrong and it stops. What should I do?

  10. #10 by Dave - August 17th, 2009 at 09:16

    @luis
    When I export the movie it works, but if I live it on playing eventually something goes wrong and it stops. What should I do?

    Same problem! I used your method for 8 boxes to do fade in and fade out one after the other, sometimes work, sometimes not, the animation is stuck at some point. Flash can’t handle this? or I have done something wrong?!

  11. #11 by zedia.net - August 17th, 2009 at 11:33

    @Dave
    @luis

    You guys should try TweenLite, it is way faster and works better than the Adobe Tweens. Plus it has a delay parameter that is good for animating.

    http://www.zedia.net/2008/actionscript-3-tweenlite-basic-tutorial/

  12. #12 by Dave - August 17th, 2009 at 17:54

    @ zedia.net
    Thanks zedia. Thank you for the quick reply.
    I will try TweenLite tonight, it looks very promising.
    But I am still not sure what is wrong with the Tween class, if it is the performance problem that causes the animation stop and goes wrong , I am really disappointed with Adobe….

  13. #13 by Travis - November 13th, 2009 at 22:33

    Code gives following error. Works fine if I dont try to remove the second listner. I thin because the varible “myTweenAlpha1″ is not defined out side the function but I dont know how to define with enacting the the tween. Any help would be aprreciated.

    Thanks

    import fl.transitions.Tween;
    import fl.transitions.easing.*;
    import fl.transitions.TweenEvent;

    var myTweenAlpha0:Tween = new Tween(bloc1, “alpha”, Strong.easeOut, 1, 0, .75, true);
    myTweenAlpha0.addEventListener(TweenEvent.MOTION_FINISH, doNextTween1);

    function doNextTween1(e:TweenEvent):void {
    var myTweenAlpha1:Tween = new Tween(bloc2, “alpha”, Strong.easeOut, 1, 0, .75, true);
    myTweenAlpha0.removeEventListener(TweenEvent.MOTION_FINISH, doNextTween1);
    myTweenAlpha1.addEventListener(TweenEvent.MOTION_FINISH, doNextTween2);
    }

    function doNextTween2(e:TweenEvent):void {
    var myTweenAlpha2:Tween = new Tween(bloc3, “alpha”, Strong.easeOut, 1, 0, .75, true);
    myTweenAlpha1.removeEventListener(TweenEvent.MOTION_FINISH, doNextTween2);
    myTweenAlpha2.addEventListener(TweenEvent.MOTION_FINISH, doNextTween3);
    }

    function doNextTween3(e:TweenEvent):void {
    var myTweenAlpha3:Tween = new Tween(bloc4, “alpha”, Strong.easeOut, 1, 0, .75, true);
    }

    1120: Access of undefined property myTweenAlpha1.

  14. #14 by mark - January 14th, 2010 at 13:59

    Thank you!!!!!!
    been searching all day for an easy to understand and basic example of how to do this!

  15. #15 by Josue - March 1st, 2010 at 12:37

    Thanks for the great tutorial! Very clear and informative.

  16. #16 by Oronnyo Rahman - May 30th, 2010 at 20:36

    Hi,

    i am just beginner in flash ac3. I need to know that when i press a button then below script works in that button. and when i press another button… first page will be gone same way. Please answer my question. I need know it very much.

    import fl.transitions.Tween;
    import fl.transitions.easing.*;

    var myTween:Tween = new Tween(page, “x”, Strong.easeOut, 0 , 200, 2, true);

  17. #17 by John - September 19th, 2010 at 23:09

    Hi,

    I am using Flash CS5 and AS3 for a project. I want to change the color of a button when it is being pressed. Actually it is changing the “tint” of the button. how can i do with tween class ? I do not know what is the property name i should use. I really need to use pure as 3 and one of requirement of the project is not to use outside libraries. They will examine my source codes as this is for assignment in my education institute.

    what i need is

    new Tween(myBtn, “???”, Strong.easeOut, ?? , ??, 0.8, true);

    what are the properties i should fill above statement in order to get a tint tween ?

  18. #18 by xander - October 27th, 2010 at 00:43

    lets say I want to do what you show in the second example, but to a different object immediately following?

  19. #19 by Sameera Thilakasiri - November 14th, 2010 at 05:21

    I’m looking actionscript based transitions and animations, any one can drop something?

  20. #20 by respect - December 3rd, 2010 at 21:37

    I need your help please. I have an assignment using actionscript3 and FlasgCS4 I have to click upon the stage to select a series of 6 waypoints. As each of the 6 waypoints is selected a movieClip (such as redX)should be placed on the stage to visually mark the positions of the way points. The x and y value of the position of each waypoint should be stored in memory, how is this done for when one clicks on these position a shape will appear this is what is confusing me. ?? Sean

  21. #21 by alvin - April 2nd, 2011 at 16:31

    Hello,
    Do you know how to make a function that show an object at certain time? For example, I would like an arrow to show at the 59 second and disappear at 1:10. Thank you.

  22. #22 by Jameel Ahmed - June 11th, 2011 at 07:33

    Zedia, thank you so much for this tutorial.
    I got it what I wanted…
    Thanks again!

  23. #23 by aaron - June 20th, 2011 at 19:54

    Praise God, thank you for this tut, I was looking for instructions of this exact nature for a week now. Peace.

  24. #24 by Jai - June 22nd, 2011 at 22:49

    Thank you.

  25. #25 by learningflash - September 15th, 2011 at 13:33

    Hi,
    I have the following code. Im a newbie in Flash.
    my question is:~ “how to stop a function????”.

    on my layer, i start a Keyframe goes from Alpha 0 to 100,from left to right.then my funcion starts,wich makes mi image to look like water moving ,once it stop all teh way to the right on alpha 100.
    then, I want to go from alpha 100 to cero..
    like if my function will stay on for 3 seconds…then the image will disolve…dissapear..

    here is my code, i hope i did explain my self!
    thanks in advance, your help will save me!!!
    var bm:BitmapData=new BitmapData(backImg1.width, backImg1.height);
    var disp:DisplacementMapFilter = new DisplacementMapFilter(bm,new Point(0,0),1,2,10,60);
    var pt1:Point = new Point(0,0);
    var pt2:Point = new Point(0,0);
    var perlinOffset:Array = [pt1, pt2];

    addEventListener(Event.ENTER_FRAME, onFrame);
    function onFrame(evt:Event):void {
    perlinOffset[0].x +=1;
    perlinOffset[1].y +=0.1;
    bm.perlinNoise(45,9,2,50,true,false, 7,true,perlinOffset);
    backImg1.filters=[disp];
    }

(will not be published)
Subscribe to comments feed