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 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 by Bart - March 18th, 2009 at 11:59
thanks for the tutorial
#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 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 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 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 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 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 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 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 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 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 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 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 by Josue - March 1st, 2010 at 12:37
Thanks for the great tutorial! Very clear and informative.
#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);