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 Shawn - July 26th, 2010 at 15:00

    I am getting an error
    1172: definition mx.transitions:Tween could not be found.
    I am using Flash cs4 pro. I am missing something in my class path?

  2. #2 by josephncampbell - July 31st, 2010 at 23:17

    You need to load flash not mx..

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

  3. #3 by Ivan - September 3rd, 2010 at 11:24

    You are awesome! thanks for sharing your knowledge, keep it up.

  4. #4 by Jymi - September 29th, 2010 at 21:48

    I have put the above code in as I had also found it on Lynda.com.
    But when I test the movie – nothing happens at all.
    Any idea why this would be.

  5. #5 by Anneli - November 5th, 2010 at 06:06

    Hi, thank you for this tutorial, it works very well for a project I’m currently working on. Thanx :)

  6. #6 by Timon - November 5th, 2010 at 10:26

    Thanks! I just get started with AS. This helped!

  7. #7 by Timon - November 5th, 2010 at 10:28

    Lymi, I bett you forgot to draw the rectangle which you need to name “rectangle”. :)

  8. #8 by callum - December 6th, 2010 at 14:22

    i have been looking to do this is actionscript without the use of the frames panel. Although your tut doesn’t do this, I came here to get a proper understanding of the code due to your clarity. Much appreciated.

  9. #9 by Tommy - December 6th, 2010 at 23:19

    Really helpful information. Thank you for sharing.

  10. #10 by Wally - December 8th, 2010 at 19:02

    Hey mate, thanks for the AWESOME tutorial, just what i was looking for my project at work.

  11. #11 by Patrick - December 15th, 2010 at 18:25

    Hi,

    I got my object to rotate 30 right. How can i afterwards let it rotate 60 left, 30 right, etc. looping?

  12. #12 by {{nestedWorld}} - December 17th, 2010 at 01:09

    How do i get rid of the easing property, i just want normal tween……any idea

  13. #13 by me - December 21st, 2010 at 11:31

    awesome works perfect ! really simple. thanks

  14. #14 by Unaloműző - December 24th, 2010 at 05:55

    very useful tutorial, thanx!

  15. #15 by Ives - December 28th, 2010 at 16:01

    Tou saved my life

  16. #16 by BM - January 10th, 2011 at 07:28

    Very nice tutorial!!!
    Thanks

  17. #17 by uday - January 14th, 2011 at 05:27

    nice one

  18. #18 by nick - January 15th, 2011 at 13:59

    hiie, i am doing exactly same the way you did,why am i getting errors? i don’t have any idea, i did coding on main time line’s first frame,and error pop up

    1172: Definition f1.transitions:Tween could not be found.
    1172: Definition f1.transitions.easing could not be found.
    1172: Definition f1.transitions:TweenEvent could not be found.
    1046: Type was not found or was not a compile-time constant: Tween.
    1180: Call to a possibly undefined method Tween.
    1120: Access of undefined property Strong.

    i am using flash cs4. please help…

  19. #19 by Benjamin Santiago - January 31st, 2011 at 18:37

    @nick It sounds like you are missing importing the Tween library:

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

    if its not that, I’m not sure.

  20. #20 by Andy - February 7th, 2011 at 16:51

    Hi,
    Im trying to apply your script to a UI loader that is loading an array of images. Buttons serve as the navigation. Everything works as is now but I would like to transition the images when the user clicks another image’s button. I am having a hard time applying what you have provided. Can you help?

    [AS]import fl.transitions.Tween;
    import fl.transitions.easing.*;

    var myTweenAlpha:Tween = new Tween(my_ldr, “alpha”, Strong.easeOut, 0, 1, 3, true);

    var myArray:Array = ["0001.jpg", "0002.jpg", "0003.jpg", "0004.jpg"]

    thumbPanel.pic1_btn.addEventListener (MouseEvent.CLICK, ldr1)
    function ldr1 (e:Event) {
    my_ldr.source = myArray[0];
    }

    thumbPanel.pic2_btn.addEventListener (MouseEvent.CLICK, ldr2)
    function ldr2 (e:Event) {
    my_ldr.source = myArray[1];
    }

    thumbPanel.pic3_btn.addEventListener (MouseEvent.CLICK, ldr3)
    function ldr3 (e:Event) {
    my_ldr.source = myArray[2];
    }

    thumbPanel.pic4_btn.addEventListener (MouseEvent.CLICK, ldr4)
    function ldr4 (e:Event) {
    my_ldr.source = myArray[3];
    }[AS]

  21. #21 by Vicento - February 28th, 2011 at 11:09

    Hi everyone. i know this must be very simple but i can’t get it done right.
    I want to do the animation to more objects in the stage. so i repeated the code, and it generates errors. here’s my code:

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

    var myTween:Tween = new Tween(rectangle, “y”, Strong.easeOut, 0, 500, 3, true);
    var myTweenX:Tween = new Tween(circle, “y”, Strong.easeOut, 0, 500, 3, true);

    and here’s the error:
    TypeError: Error #1009: No se puede acceder a una propiedad o a un método de una referencia a un objeto nulo. (can’t access to a property or method of a reference to a null object)

  22. #22 by Vicento - February 28th, 2011 at 15:14

    it doesn’t work with more than 1 object.

  23. #23 by Jane - March 2nd, 2011 at 14:56

    Hi,
    thank you for sharing, really usefull. Is there a possibility to start another function or to set some values when the tween is completed? Something like the onComplete-Function for TweenLite (http://www.greensock.com/tweenlite/)

  24. #24 by Dushan - April 9th, 2011 at 20:35

    Hello,
    this is very nice tutorial i learned from it a lot, i am new to action script but i have some C++ and C programing knowledge and this tutorial made things clear in my head, but i am curious how can i do blur tweening? I need to know how it works in a simple line of code as are this for rotation,position, alpha etc. so that when i publish it it blurs from 0 to 50 on x axis.

    If anyone knows i would be greatfull.

  25. #25 by Berg - May 20th, 2011 at 06:40

    Ooh! This if fun. I’m picking up Flash again after a short unplanned hiatus. Thanks for the tutorial.

  26. #26 by Lana - May 23rd, 2011 at 22:05

    On the first frame I have the tween for a movieclip. On this frame is a next and previous button. This jumps to a certain frame. From that frame I jump to, If I click previous I want it to go back to the movieclip I just tweened but at the end state and not at redoing the animation agian. Is there a way to do this?

  27. #27 by Mario - May 31st, 2011 at 06:47

    Hello!
    I have a problem! I use the correct code but still I get this error message.
    This is the code I have:
    import fl.transitions.Tween;
    import fl.transitions.easing.*;

    Tweener.addTween(btn1, {x:300, time:3, transition:”linear”});

    And this is the error I get every time :
    Scene 1, Layer ‘Layer 1′, Frame 1, Line 4 1120: Access of undefined property Tweener.

  28. #28 by Ernesto Quezada - June 10th, 2011 at 16:43

    Mario, Tweener and the Tween class are two different things. I much prefer Tweener (the import is caurina.transitions.Tweener), but Tween is okay as well for simple tasks.
    You can use either but don’t mix them. See the examples here, none of them mention Tweener.

  29. #29 by Josh - June 15th, 2011 at 17:38

    I know that i’m doing this wrong, but what do i need to do to Tween the Filters in AS3? in this case, below, the scale will tween but the glow filter will not.

    my AS3 =
    import flash.filters.GlowFilter;
    import fl.transitions.Tween;
    import fl.transitions.easing.*;
    movieGlowA.filters = [new GlowFilter(0x36FDEA, .5, 8, 8, 2, 2, false, false)];

    movieGlowA.addEventListener(MouseEvent.MOUSE_OVER, rollOver);
    function rollOver(evt:MouseEvent):void {
    trace(“rollOVER”);
    new Tween(bossGlowA, “scaleX”, Strong.easeOut, movieGlowA.scaleX, 1.20, 0.5, true);
    new Tween(bossGlowA, “glow”, Strong.easeIn, movieGlowA.filters = [new GlowFilter(0x36FDEA, .9, 20, 20, 2, 2, false, false)];
    }

  30. #30 by Brandon - June 18th, 2011 at 13:23

    Works great, thanks!!

  31. #31 by kanwal - June 24th, 2011 at 20:45

    hi ,
    actually i want to rotate object about its own place(without changing its position) , how do we do this using code?? , help urgent

  32. #32 by Nathan - July 26th, 2011 at 11:38

    Such a clear and simple tutorial. Works a treat.

    Thanks!!!

  33. #33 by Valde - August 5th, 2011 at 08:25

    @kanwal

    kanwal : hi ,
    actually i want to rotate object about its own place(without changing its position) , how do we do this using code?? , help urgent

    Kanwal, go inside your object and check if the center is on the top left corner. If it is change it to the center of the stage and you’ll get what you need.

  34. #34 by Camilo - August 29th, 2011 at 14:02

    Camilo : please help me.
    I need a simple animation tween but i don’t know how to do it.
    I have This TWEEN:
    new Tween(verdemc, “scaleX”, None.easeNone, 1, 0, .5, true);
    The tween animates a square who scales from th<e RIGHT to the LEFT.
    what i need is the same but for the other side…
    that the rectangle scales from LEFT to RIGHT.
    basicly i need this:
    http://www.egelworldcup.com/imagenes_misc/flash.swf
    thanks for your help!

    aah i discover it!
    was the registration point of the mc

    problem auto-solved :P

  35. #35 by alex - August 29th, 2011 at 21:41

    tip: pass “null” (without quotes) to the easing parameter if you don’t want any easing

  36. #36 by Mark - October 10th, 2011 at 11:56

    How would i do continuous tweening every click of my button so my formula would be like this

    var myTween:Tween = new Tween(mc_container, “y”, Strong.easeOut, mc_container.y, mc_container.y-125, 2, true);

    it seem that it didnt get the value…

    why is that?

  37. #37 by Mark - October 10th, 2011 at 12:03

    @Mark
    i already solved it my self it just happen that it keeps tweening form the same value

    i just make another frame to update the value of mc_container.y

    anyways thanks ;)

  38. #38 by Renato - October 11th, 2011 at 09:15

    Hello
    I do like to move from the point that the object is on stage.
    if I determine, for example, 30 in the X axis
    the movie clip goes to 30, and not for more than 30 pixels x that he is
    so how do I apply for a + 30 =?

    I thank
    a hug!

  39. #39 by Naim - February 23rd, 2012 at 13:32

    Thanks a lot for this tutorial. Simple and deficient :)

  40. #40 by sabharish.ps - May 31st, 2012 at 10:18

    I need to start the tweeing after completing another tweening , Plz help me to know, How to check that Previous tweeing has been stopped..

  41. #41 by Brian - July 2nd, 2012 at 23:10

    I made a tween code generator if anyone wants to use it feel free. it’s in the downloads section of http://www.pyelive.com
    it is used by the programmers at Pye Website design and development of st Louis mo. its free because we wanted to give something back to the programming community.

    we hope it helps someone

  42. #42 by assu alduaa - November 22nd, 2012 at 01:38

    Can you help me to know how to use onComplete function in TweenLite.

  43. #43 by assu alduaa - November 22nd, 2012 at 02:10

    May I know how to move a tween to cross way in a stage. It is possible to move only in x and y direction.

(will not be published)
Subscribe to comments feed