Using TweenLite in Preloaders

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:

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

, ,

  1. #1 by Jack - December 21st, 2007 at 21:12

    Of course I’m biased, but there are a whole lot more benefits to using TweenLite instead of the built-in Tweening class than the syntax, like:

    - SPEED. TweenLite is much faster (check out http://blog.greensock.com/tweening-speed-test for comparisons)
    - onComplete, onStart, onUpdate callbacks (plus the ability to pass any number of variables to them)
    - autoAlpha (toggles visibility of an object off when the alpha hits zero)
    - Tween multiple properties with a single call
    - Delay any tween by a set amount (good for sequencing)
    - Tween arrays of numeric values with a single call
    - Tween the tint of any MovieClip/Sprite VERY easily
    - Tween the volume of any MovieClip
    - Unique “from()” call that allows you to use the current properties as the end values
    - Use relative values
    - TweenLite automatically overwrites tweens of the same object by default in order to avoid conflicts (this behavior can easily be turned off too)
    - Useful delayedCall() allows you to call any function after a set amount of time and even pass any number of arguments
    - Has a big brother, “TweenFilterLite” that extends TweenLite and adds the ability to tween filters and advanced effects like saturation, hue, contrast, brightness, colorization, etc.

    Thanks again for the post! Keep up the good work.

  2. #2 by dgelineau - December 22nd, 2007 at 21:25

    Thank you for your comment.

    I was going to write again about TweenLite because I finally ended up using Tweener in my preloader even if I didn’t want to. The thing is I wanted to do 2 Tweens, one on the y property and one on the alpha. The second Tween could start while the first Tween was still active. What happened in those case was that the first Tween would stop and not finish…

    You say in your comment that TweenLite will automatically overwrite tweens on the same objects, well that’s a good thing most of the time, and in this case I could have turned it off so it wouldn’t stop my first Tween. But wouldn’t it be better if TweenLite would overwrite Tweens of the same object only if the impact the same property; that would be even better in my opinion.

  3. #3 by Jack - December 25th, 2007 at 10:55

    Sure, that’s a very valid point about only overwriting tweens of the same property. The reason TweenLite doesn’t ONLY overwrite tweens of exactly the same property is because of the performance hit that would cause. Many, *MANY* hours have been spent tweaking performance in TweenLite to ensure that it’s as fast as possible which can be very important in situations where you have a lot of Tweens happening simultaneously. I’m also pretty sure that if TweenLite only overwrote tweens of the same property by default, some developers would be complaining about that and requesting the current functionality because they’d need to call a killTweensOf() before their new tween every time if they wanted to stop tweens of all properties (which is often the case). It’s tough to please everyone.

    All you would have needed to do in your preloader was pass “overwrite:false” into your second Tween and it would avoid overwriting the first tween. Maybe it wasn’t clear enough in the documentation. It’s definitely an often-used feature.

    Anyway, I’m glad Tweener ended up working well for you. If speed and minimal file size aren’t critical for you, it’s a fantastic tweening engine. Tons of features. And Zeh (one of its creators) is a very nice guy. I like his open and humble attitude about tweening engines.

    Good luck to you!

(will not be published)
Subscribe to comments feed