Archive for the ‘TweenLite’ Category

ActionScript 3 TweenLite Basic Tutorial

Sunday, March 2nd, 2008

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 enginges; 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:

Actionscript:
  1. import gs.TweenLite;
  2. 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:

Actionscript:
  1. TweenLite.to (rectangle, 3, {x:300, ease:Linea.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:

Actionscript:
  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.

TweenLite, Tweener, GOASAP | Fun with animation packages

Friday, January 18th, 2008

I have been speaking a lot about Tweener these days and for a good reason; it's a really good as3 animation library. I can't say I have been having trouble with it but I found evidence from different sources that it might not be the best animation package for what I want to do.

What I am doing is mostly websites and in those website I use ActionScript to make everything move; I rarely use the timeline. All of my tweens are at most 1 second long but most of the time they last about 0.5 second. I liked Tweener because it was way better than Adobe's Tween classes but I found from 2 different sources (TweenLite, GOASAP) that TweenLite is faster for small tweens than Tweener. You might know that already, but being fast is one of the most important attribute for me in a tweening engine. Not so much because I use too much animation at the same time but more because that when I start Tweens, I don't want them to eat all of the cpu, I want them too leave as much processing power for other stuff like timeline animations, video etc. These is all to say that I am changing all my code from Tweener to Tweenlite (that I had previously changed from Adobe Tween classes to Tweener) because I need the extra speed badly.

Something came up since I started this project. From the maker of the Fuse kit comes GOASAP. Which looks very promissing; it's  not an animation package per say, it's more like animation package building blocks. Since sometime there is a lot of overhead in animation engine for things that you will never use, Moses Supposes made us all animation library developers. The GOASAP code base is in AS3 and I can't wait to start using it. In the mean time I invite you all to go and start developing your own animation code;

Using TweenLite in Preloaders

Thursday, December 13th, 2007

In the current project that I am doing, I need to do some Tweens in the preloader, nothing really fancy, just the habitual fade in / fade out ou move in / move out. I didn’t want to use Tweener because my preloader was only weighting 7k and using Tweener would have more than doubled the size of my preloader.

I was thinking at first about using the default Tweens classes from Adobe, but I decided to check out TweenLite. I was pretty amazed of what it can do. First it weights only 2k, but doesn’t include any easing functions, so if you want those you have to import the same classes as the Tween classes. If you use easing it adds 1k to the weight so it’s not too bad. So in total it’s only 1k more than the Tween classes.

So why use TweenLite instead of the Tween classes? Well the major advantage is that it uses a syntax really similar to Tweener. Since I use Tweener in the main Flash movie, I think it’s better for people that are going to use my code after me, they won’t have two syntax to learn in order to understand my code. Also this syntax is easy to understand and I can write it without have to copy and paste previous code.

Here is an example of code using TweenLite:

Actionscript:
  1. import gs.TweenLite;
  2. TweenLite.to(mc, 1, {x:46, y:43});


Close
E-mail It