ActionScript 3 TweenLite Basic Tutorial

If you have been following this blog for some time now you have witnessed my evolution in the use of tweening engines. I was first using the Tween classes from Adobe and made a tutorial about them. After that I found Tweener, which I liked a lot for it ease of use and its speed improvement so I modified my tutorial to explain Tweener. My new evolution in the field of tweening engine is TweenLite mostly because it is faster and lighter than Tweener. Since I did a tutorial on how to use the two previous tweening engines; it is only normal that I do one also for TweenLite.

Well the first thing you have to do is download the classes of TweenLite. After that you need to import the class in order to use it; here is the import statement:

1
2
import gs.TweenLite;
import fl.motion.easing.*;

TweenLite as the name states is really light; it weights only 2k which is better than Tweener(10k). As you can see in the previous code I also imported the Adobe easing function. If you want to use easing, you will have to do that also which will had an additional 1k to the package.

TweenLite syntax is really similar to Tweener which is good since that was an advantage of using Tweener. Here is a simple tween using TweenLite:

1
TweenLite.to (rectangle, 3, {x:300, ease:Linear.easeIn});

The difference from Tweener’s syntax is that the second parameter in TweenLite is duration(how much time in seconds will the tween last) in this case 3 seconds. So this line of code will make the displayObject rectangle move from its currents position to a new position where its x value will be 300 in 3 seconds.

The same way you did it with Tweener, you can also tween multiple properties with TweenLite, here is an example:

1
TweenLite.to(rectangle, 1, {x:300, alpha:1, scaleX:1.5, scaleY:1.5, delay:2});

So this the rectangle will go to the x position 300, its alpha will raise to 100%, it will grow to 1.5 its original scale, all that in one second after a 2 second delay.

As you can see TweenLite offers all the advantages that Tweener offers with 2 more being light weight and being faster. I hope this tutorial will help you.

,

  1. #1 by andol - December 5th, 2008 at 06:07

    good tutorial of tween

  2. #2 by @lasmovies - July 9th, 2009 at 23:21

    Nice website, thnxs for share this example. I like because is short and practice.

  3. #3 by namrata - August 11th, 2009 at 02:19

    Excellent tutorial.
    Can i make motion tweens on irregular paths using Tweenlite?

  4. #4 by zedia.net - August 12th, 2009 at 13:16

    @namrata
    Using TweenMax (TweenLite with more features) you can tween through bezier points, so irregular paths. It’s not as obvious as just tracing a path in Flash, but it is still pretty cool.

  5. #5 by Great! - February 26th, 2010 at 12:56

    Tried Tweenlite today! Great! :)

  6. #6 by boris - March 20th, 2010 at 15:43

    gracias por la recomendación (thanks for the tip :)

  7. #7 by David - July 30th, 2010 at 16:58

    Is it possible to somehow animate text line by line with some intervals?
    Similar to AfterEffects when animating text with Ramp Up

(will not be published)
Subscribe to comments feed