ActionScript 3 Tweens Tutorial

Since I think it’s something people want, I am going to do a tutorial about using ActionScript 3 to do animations. I recently made a new tutorial about using Tweener instead of the Tween classes, or even better, how to use TweenLite (TweenLite is smaller and faster than Tweener). I think it is better to use Tweener or TweenLite because it is easier to understand and it takes way less lines of code.

In this tutorial I’ll be using the Tween Classes already bundled in Flash Cs3. There are other ways to do this but I find it’s the easiest. You could do the same using onEnterFrames or Timers or the Zigo Engine (but it’s not yet AS3).

Ok first thing you will need to do is to draw a rectangle on the stage and then convert that shape to a movie clip. After that, give it an identifier name in the property inspector. Let’s name it “rectangle”. Now open the actionScript Window by pressing F9. Create a new layer on the timeline, name it actions, and start writing your actionscript there. The first thing we will need is to import the actual classes for tweening. Add these to line of code at the start.

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

The first line is to import the Tween, the second one is to import the Easing classes. I’ll explain what easing is later on.

Now all we need to do is add one line of code to make the rectangle move.

var myTween:Tween = new Tween(rectangle, "x", Strong.easeOut, 0, 300, 3, true);

This create a new tween object with its properties in the parenthesis. The first parameter is the object you want to animate. The second parameter is the property of that object that you want to animate. You can animate a lot of properties for a display object example: x, y, alpha, width, height, xscale, yscale, rotation etc. I’ll give some example later. The third parameter is easing. Fourth and fifth parameters are the starting and ending position of the property you are animating in this case, the rectangle will go from the x position 0 to the x position 300. The sixth parameter is the duration of the tween, in this case 3 seconds. And lastly the last parameter is if you want to use seconds or frames. I’ve always left that to true meaning use seconds, that way if you change the framerate of your movie, it doesn’t change the timing of your animation.

So if you test your movie, your rectangle will go from left to right in three seconds. Pretty boring, but it’s your first animation. What we can do next is affect more than one property at the time. But for that, we have to create a new tween for each property we want to affect.

var myTweenX:Tween = new Tween(rectangle, "x", Strong.easeOut, 0, 300, 3, true);
var myTweenAlpha:Tween = new Tween(rectangle, "alpha", Strong.easeOut, 0, 1, 3, true);
var myTweenWidth:Tween = new Tween(rectangle, "width", Strong.easeOut, rectangle.width, rectangle.width + 300, 3, true);
var myTweenRotation:Tween = new Tween(rectangle, "rotation", Strong.easeOut, 0, 90, 3, true);

So here our rectangle fades in, moves to the left, becomes wider and turns right. Two things to see here. First the alpha property doesn’t work like in actionScript 2. Before, it ranged from 0 to 100; in ActionScript 3, it ranges from 0 to 1. It’s a minor difference, but you have to know it. Also as you can see with the width tween, you can put variables in the fourth and fifth parameters so that you don’t really know the beginning and ending values.

That is it for now, I’m going to bed, but later on I’ll add stuff about easing and how to time animations.

  1. #1 by Jack - February 14th, 2009 at 04:47

    This is a very clear tutorial, but three of the variable have the same name. You need to give the tween variables different names for each property. Something like this:

    var myTweenX:Tween = new Tween(rectangle, “x”, Strong.easeOut, 0, 300, 3, true);
    var myTweenAlpha:Tween = new Tween(rectangle, “alpha”, Strong.easeOut, 0, 1, 3, true);
    var myTweenWidth:Tween = new Tween(rectangle, “width”, Strong.easeOut, rectangle.width, rectangle.width + 300, 3, true);
    var myTweenRotate:Tween = new Tween(rectangle, “rotation”, Strong.easeOut, 0, 90, 3, true);

  2. #2 by zedia.net - March 4th, 2009 at 11:50

    @Jack
    True, I made the change, thank you for showing me this.

  3. #3 by alex - March 9th, 2009 at 12:51

    You just saved me a lot of time, thanks!

  4. #4 by chuck - March 14th, 2009 at 23:20

    does the alpha work with transparent pngs? i’m upgrading a file and pngs could be in a movie with tweens w/ no prob, but now it’s printing anything that’s “semi-transparent” as complete alpha… super weird. Any clue??

    Thanks in advance,
    C

  5. #5 by eatme - April 23rd, 2009 at 10:29

    this is ace. Thanks for the post.. having lots of fun with this.

  6. #6 by Nate Lord - April 29th, 2009 at 23:17

    thanks very much.

  7. #7 by fickit - May 12th, 2009 at 18:23

    Thanks for the tutorial.

  8. #8 by history of online gambling - May 20th, 2009 at 06:37

    I like this a lot, but what happens when there are multiple timelines in several movie clips? And what if the animation doesn’t start in the very first frame of the timeline? How do I execute my instance naming process for animations that don’t start in the very first frame of the timeline?

  9. #9 by Paul - May 30th, 2009 at 16:08

    Yeh really good! Im just trying to get the hang of this scripting but still need some pointers! Any chance you can give an example of using a timer with 3 images playing one after the other? Kind of like a simple slide show!

  10. #10 by Steve - June 15th, 2009 at 16:25

    For beginners i think http://www.republicofcode.com is a good start.

  11. #11 by Dan - July 14th, 2009 at 11:54

    What if I DONT want easing? Every tween tutorial I’ve read puts the Strong.easeOut or Strong.EaseIn in there. I just want a graphic to randomly float across the screen at an even rate.

  12. #12 by zedia.net - July 14th, 2009 at 16:05

    @Dan
    You can use None.easeNone, if you use TweenLite or TweenMax it’s Linear.easeNone.

  13. #13 by KillerBadger - July 28th, 2009 at 11:14

    Why can’t all tutorials be written this clearly? ActionScript is anything but intuitive, so I rely on straightforward, how-to descriptions like this. Thank you.

  14. #14 by Zac - September 15th, 2009 at 11:13

    Thank you very much for this!

  15. #15 by Bragadeesh - September 17th, 2009 at 07:20

    Buddy,
    Neat and Nice tutorial

  16. #16 by Marble127 - September 28th, 2009 at 06:28

    Great tutorial, thanks!

    One question, though:
    Wat if I want the tween to reverse once it reached the max, efectivly creating a bounce..?

    Tanks,
    Marble

  17. #17 by zedia.net - September 28th, 2009 at 16:08

    @Marble127
    You could use a Bounce easing by replacing the Strong easing. Like this:

    var myTweenWidth:Tween = new Tween(rectangle, “width”, Bounce.easeOut, rectangle.width, rectangle.width + 300, 3, true);

    That would give you your desired effect.

  18. #18 by Jenny - September 29th, 2009 at 07:40

    My code is currently:

    var rotationXEnd:Number = jenny.rotationX + 1046;

    addEventListener(Event.ENTER_FRAME, rotate3d);

    function rotate3d(e:Event):void {
    if(jenny.rotationX < rotationXEnd){
    jenny.rotationX += 55;
    }else{
    // do nothing
    }
    }

    but I want to add ease and I'm trying to use this tutorial, but I don't really know how. Can you use the codes in this tutorial to make a Rotation X ?

  19. #19 by KroooS - October 21st, 2009 at 04:20

    KillerBadger : Why can’t all tutorials be written this clearly? ActionScript is anything but intuitive, so I rely on straightforward, how-to descriptions like this. Thank you.

  20. #20 by Porter - October 25th, 2009 at 16:26

    As I dive deeper and deeper into OOP, flash becomes more and more clear. Even things such as tweens have their own classes, something I never would have saw before OOP. Nice tutorial, thanks for sharing.

  21. #21 by Nukolar - November 25th, 2009 at 13:05

    Thx a lot for the nice tutorial :-)

  22. #22 by Magul - December 20th, 2009 at 07:31

    hi (new to flex) fl.transitions.Tween is not working for me, after a bit search came to know that for flex sdk guys its import “mx.effects.Tween”; and “import mx.effects.easing.*;” but the tween class does not get the parameters same as in flash Tween class
    yeah i did concern the documentation but still i cant do this same thing with mx.effects.Tween… plz any1 help me

  23. #23 by Jose Carlos - December 21st, 2009 at 18:56

    I added the code in the exemple but I dont see the animation ….

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

    myButton.addEventListener(MouseEvent.CLICK, myButtonClick);
    function myButtonClick(e:MouseEvent):void {
    var mc:MyMC = new MyMC();
    var myTween:Tween = new Tween(MyMC, “x”, Strong.easeOut, 485, 300, 3, true);
    trace(myTween);
    myTween.start();
    }

    I am usgin CS4 and AS3 … pleas help

  24. #24 by Rhonda - December 23rd, 2009 at 14:29

    Are you interested in teaching a university night school course (Toronto) in January?
    Rhonda

  25. #25 by zedia.net - December 24th, 2009 at 13:39

    I’d be really happy too, except for the fact that I live in Montreal… that makes it a far.

  26. #26 by joe - December 25th, 2009 at 17:24

    What do the code hints mean after the easing type (I’ve never seen this addressed in any of the Tween class tutorials, nor does the AS3 reference make it clear at all.
    I’m referring to the Back.easeOut(t:Number,b:Number,c:Number,d:Number) that pops up when typing the script.

  27. #27 by ranacseruet - December 31st, 2009 at 03:31

    I am trying to do the following:
    var myTweenAlpha:Tween = new Tween(rectangle, “alpha”, Strong.easeOut, 0, 1, 3, true);

    it showing error with as 3.0:

    “1067: Implicit coercion of a value of type Boolean to an unrelated type Number.”

    can you please let me know its this. the last parameter is boolean as i know. so why this error?

  28. #28 by zedia.net - January 5th, 2010 at 17:32

    @joe
    I never used parameters when using an easing function. Anyway I believe the Tween is passing those parameters so that you don’t have to wrap your head around this. But it could still be interesting to find out if you can play with them.

    @ ranacseruet
    Your Tween seems ok I don’t know it is giving you an error

  29. #29 by zedia.net - January 5th, 2010 at 17:48

    Yes the fl package is Flash specific as the mx package is Flex specific. I would advise on using TweenLite as it can work both in Flash and Flex and is way faster and easier to use.

  30. #30 by Keith - January 14th, 2010 at 15:48

    @fickit
    very nice tyvm

    Do I have to create a new tween object every time I want to change something, or does the tween object exist and I can manipulate it with some function?

    For example, if I want to fade an image in and out based on a mouseover, do I need to run the “new Tween(VARIABLES);” command every time?

  31. #31 by zedia.net - January 14th, 2010 at 16:10

    Yes you have to create a new Tween every time.

  32. #32 by Joshua - January 28th, 2010 at 01:47

    I agree, the built-in Tween class is pretty poor compared to most libraries out there. I use Actuate, since it is faster than TweenLite and I find it easier to use.

  33. #33 by CheDragon - January 28th, 2010 at 21:21

    Nice tutorial, very clear and you saved me a lot of time, thanks!

  34. #34 by h3d0 - January 29th, 2010 at 06:45

    Very nice! Thank you a lot. I’ve solved my problem in 5 minutes (it would cost me a couple of hours with my previous methods)

  35. #35 by LukeMack - February 8th, 2010 at 20:02

    Great tutorial – this has really cleared up a lot of things for me in terms of script based tweening.

    However, I’m starting to do more sophisticated tweens and sequences of tweens, based around your tutorials and for some reason the tweens either never start, stop half way through or never finish quite properly. Do you have any suggestions?

  36. #36 by DavidW - February 10th, 2010 at 16:23

    @LukeMack
    I had that exact same problem until I came across this site http://www.rgbeffects.com/blog/development/tween-freeze-frustrations-avoid-actionscript-tweens-stalling-out/ if you declare your tween variables outside of the function then you shouldn’t have a problem. It is to due with the garbage cleaner removing the variables before the tween has time to finish. Hope this helps!

  37. #37 by Ej - February 23rd, 2010 at 01:35

    I Love this!!!

    One thing though…

    Every time I click on the button the shape keeps getting bigger and bigger??

    Anyway to stop that???

    THANKS!

  38. #38 by Ej - February 23rd, 2010 at 01:48

    Here I posted the example I am talking about

    http://www.dndexecutive.com/tweentest/Tweener_Test.html

    If you hit the same button again and again it just keeps getting bigger and bigger.

    What do you think?

  39. #39 by atasözleri - February 25th, 2010 at 11:48

    THank you wonderful working!

  40. #40 by Josh_hom3boi - March 14th, 2010 at 19:28

    MAD PROPS from dis guy to u. i was gtting errors out da @zz till i found dis page i had da rite idea but mostly everything i had was in the wrong place or i didnt put something as simple as a comma instead of a period vice versa.
    ANYWAYS TY TY TY TY saved me at least 15 min of head scratching and head trauma XD

  41. #41 by meminus - March 26th, 2010 at 16:35

    This was a great tutorial! Very clear and easy to understand! Jsut what “getting-started”-people need! Very nice work!!

  42. #42 by suman - April 14th, 2010 at 07:54

    thank’s,nice tutorial

  43. #43 by Christo - May 12th, 2010 at 23:05

    Very nice,
    on some tutorials they include: myTween.start(); But it seems as soon as the vars are created it runs automagically.
    Perhaps you can manually stop the tween ( myTween.stop(); ) and then start it using myTween.start(); at runtime?

  44. #44 by momojiaqi - May 14th, 2010 at 16:02

    hi, could you please tell me why i meet the trouble that i cannot keep the weigth/height after change the size? (for ex: rectangle 30px/40px to 300px/400 px), i use the same code juste like yours, but il doesn’t work :(

    var myTweenWidth:Tween = new Tween(rectangle, “width”, Strong.easeOut, rectangle.width, rectangle.width * 2, 3, true);
    var myTweenHeight:Tween = new Tween(rectangle, “height”, Strong.easeOut, rectangle.height, rectangle.height * 2, 3, true);

    j’ai aussi essayé sur un carré, mais le carré devient un rectangle, je ne comprends plus rien…

    thanks for your tuto

  45. #45 by gosia - May 20th, 2010 at 05:01

    why im getting error:transitions.Tween not defined

  46. #46 by oko - May 20th, 2010 at 20:54

    It`s usefull

  47. #47 by elliott greaves - May 20th, 2010 at 21:43

    hi im using the rotate tween var myTweenRotation:Tween = new Tween(rectangle, “rotation”, Strong.easeOut, 0, 90, 3, true); but i wanted to use it from a different rotation point is the only definable by the registration point or can i alter this,

    the purpose is im having lots of objects circle around a ring but in there own timeframe. i want them to follow a path around it smoothly but im not sure if i can use this code for it.

    sorry if im not making any sence ask for more info if ya dont understand so far code worked for me tho been great help just need to tweak a bit more.

  48. #48 by Relative0 - June 17th, 2010 at 16:39

    Very nice compact code with explanations. It is very much appreciated.

    Thanks,

    Brian

  49. #49 by Neil - June 22nd, 2010 at 15:04

    Hi I am trying to load a var into the “object” section of the tween code but not sure what variable to use here is my code so far:

    var test:String = new String(“about_mc”);
    trace(test)

    var myTween2:Tween = new Tween(test, “x”, Elastic.easeOut, 1000, 0, 3, true);

    flash is saying it cannot adjust the x value of a string, so i guess i’m using the wrong type of variable. does anyone know what variable i should be using?

    thanks.

  50. #50 by Rudolf - July 12th, 2010 at 05:44

    @ Neil
    Try using a “movieclip”.

    For ex:

    var test:MovieClip = new MovieClip();

    But what is the “about_mc” if I may ask?
    Cause if its the instance name of a movieclip on the stage,
    you don’t need to put it into a var first and then into the Tween.
    Just reference it directly in the Tween:

    var myTween2:Tween = new Tween(about_mc,’x',Elastic.easeOut,1000,0,3,true);

    and the tween will be applied to your movieclip instantly.

    R

(will not be published)
Subscribe to comments feed