ActionScript 3 Tweener Basic Tutorial

On my previous tutorial about how to do Tweens  using ActionScript 3 I used the Tween classes from Adobe. At the time I didn’t know about Tweener and the Fuse Kit didn’t have a version in ActionScript 3. I have used Tweener a bit now and I can say that I am starting to like it a lot.

On a side note, I am now using TweenLite instead of Tweener; TweenLite execute faster and is smaller in size. Here is a tutorial on TweenLite.

For this tutorial I am going to do exactly what I did in the previous tutorial but this time I’ll use Tweener. The first thing you have to do, as with the Tween classes, is import Tweener, you do it in this way.

import caurina.transitions.*

Tweener as some easing classes in it but you can also use the easing classes from Flash. One good side of Tweener is that it compile perfectly fine in Flex. Tween and easing classes don’t compile with Flex… A down side of Tweener is that it adds an additional 8k to your file (as opposed to 2k for Tween classes for a total of 10k).  Ok so now we are ready to go.

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

The “Tweener.addTween” part is how you add a Tween, that’s kinda obvious. “rectangle” is the name of the object you want to do a Tween on one of its property (or more). “x:300″ is the final x position that rectangle will be at. “time:3″ is the time it will take to get there and “transition:’linear’” is the easing to use. You see this is already easier to use and to read than the Tween classes. One major change is that you input the starting position of the property. I think this is a good thing since like 90% of the time I have been doing Tween, I want the Tween to start from the current position of the property and you can just set the property before doing the Tween anyway.

The next example was about doing multiple Tweens on the same object but on different properties here is how we did it with the Tween classes:

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 myTweenAlpha:Tween = new Tween(rectangle, "width", Strong.easeOut, rectangle.width, rectangle.width + 300, 3, true);
var myTweenAlpha:Tween = new Tween(rectangle, "rotation", Strong.easeOut, 0, 90, 3, true);

Here is how you would do that with Tweener:

Tweener.addTween(rectangle, {x:300,alpha:1, width:rectangle.width + 300, rotation:90, time:3, transition:"linear"});

So in one line I did what it used to take me 4 and it easy pretty easy to understand.

Another thing that is really nice with Tweener is that it as a delay property. If you want your Tween to start in 1 second you do it in this way:

Tweener.addTween(rectangle, {alpha:1, time:3, delay:1, transition:"linear"});

This is practical when you want to do Tweens in sequence (one after the other). With the Tween classes you would do it in this way:

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);
}

With Tweener:

Tweener.addTween(bloc, {alpha:1, time:3, transition:"linear"});
Tweener.addTween(bloc, {x:300, time:3, delay:3, transition:"linear"});

As you can see you use way less code using Tweener and it tends to keep all your code for an animation together which will be easier to understand when you come back. Also I have seen some benchmark and Tweener seems to be performing better than the Tween classes. So all in all I guess I am just going to ditch the Tween classes and start using Tweener from now on.

, , ,

  1. #1 by michiel - April 18th, 2008 at 16:16

    How to i trigger if a Tweener motion is complete…

    container.addEventListener(TweenEvent.MOTION_FINISH, disableBlur);

    is not working here..

  2. #2 by dgelineau - April 19th, 2008 at 11:03

    Tweener as a parameter called onComplete that you can use this way:

    [as]
    Tweener.addTween(rectangle, {alpha:1, time: 1, onComplete:functionToExecute});
    function functionToExecute():void{
    //this function will be called when the tween is done
    }
    [/as]

  3. #3 by mr.hichem - April 20th, 2008 at 08:18

    check out those 2 new classes :
    extendible Tweener class :

    http://halfrobot.wordpress.com/2008/04/15/basetweener-class/

    ChainedTweener class :
    http://halfrobot.wordpress.com/2008/04/20/chainedtweener-class/

  4. #4 by Jimmy - May 18th, 2008 at 08:45

    Hello, how to define the Movieclip in the document Class?

    Tweener.addTween(top_mc, {x:726, y:30, time:0.8, transition:”easeInOutCirc”, delay:0.1});

    Thanks!

  5. #5 by namrata - August 11th, 2009 at 01:09

    Hi!
    I find your tutorial really helpful in creating motiontweens using Action Script. How can you control the time taken for a motion tween? and how can you make motion tweens on irregular paths using action script?
    Appreciate the help.
    Thanks.

  6. #6 by Howard - August 26th, 2009 at 01:15

    I want to drag a movieclip and have a delayed tween from the point where I moused down to whereever I drag the movieclip/mouse. Any help would be slammmmming!

    Cheers!

  7. #7 by roms - November 18th, 2009 at 06:30

    Hallo,
    Does anyone know how to tween with z ?
    thank you !

  8. #8 by vikas - April 3rd, 2010 at 04:03

    hello,,what is tweener?

  9. #9 by Samke - October 22nd, 2010 at 19:59

    @Howard
    did you fint a way how to do this?

  10. #10 by nana - June 9th, 2011 at 05:34

    thx that was so helpful :)

(will not be published)
Subscribe to comments feed