GreenSock

TweenLite (AS2) - A Lightweight (3k) and FAST Tweening Engine

Posted in Tweening by jack on the October 18th, 2007

Version 6.32, Updated 7/4/2008

Compatibility: Flash Player 6 and later (ActionScript 2.0) (click here for the AS3 version)
File Size added to published SWF: About 3Kb

_visible - To set a MovieClip's "_visible" property at the end of a tween, just use this special property, like TweenLite.to(my_mc, 2, {_x:300, _visible:false});
Synced tweens - TweenLite uses an internal timer that ensures that your tweens are synced, even if you instantiate thousands on a single frame
Frame tweening - Now you can tween to any frame in a MovieClip, like TweenLite.to(my_mc, 2, {frame:125});
renderOnStart - If you're using TweenLite.from() with a delay and want to prevent the tween from rendering until it actually begins, set this special property to true. By default, it's false which causes TweenLite.from() to render its values immediately, even before the delay has expired.
TweenLite.defaultEase - If you prefer to set the default ease that TweenLite uses (which is Regular.easeOut) to something else, feel free. For example, TweenLite.defaultEase = mx.transitions.easing.Elastic.easeOut;
"tint" (not "mcColor") - Since AS3 allows you to tint objects other than MovieClips (i.e. Sprites), "mcColor" didn't make much sense anymore, so it's been renamed "tint". So to tween the color/tint of my_mc to red, you'd do: TweenLite.to(my_mc, 2, {tint:0xFF0000});

Tweening. We all do it. Most of us have learned to avoid Adobe's Tween class in favor of a more powerful, less code-heavy engine (Tweener, Fuse, MC Tween, etc.). Each has its own strengths & weaknesses. A few years back, I created TweenLite because I needed a very compact tweening engine that was fast and efficient (I couldn't afford the file size bloat that came with the other tweening engines). It quickly became integral to my work flow. I figured others might be able to benefit from it, so I released it publicly. Over the past few years, I received a lot of positive feedback.

Since then, I've added new capabilities while trying to keep file size way down (3K). TweenFilterLite extends TweenLite and adds the ability to tween filters including ColorMatrixFilter effects like saturation, contrast, brightness, hue, and even colorization but it only adds about 3k to the file size. Same syntax as TweenLite. There are AS2 and AS3 versions of both of the classes ready for download.
There's also a new TweenMax class that adds even more features to TweenFilterLite including bezier tweening, pause/resume, and much more.

I know what you're thinking - "if it's so 'lightweight', it's probably missing a lot of features which makes me nervous about using it as my main tweening engine." It is true that it doesn't have the same feature set as the other tweening engines, but I can honestly say that after using it on almost every project I've worked on over the last few years (many award-winning flash apps for fortune-500 companies), it has never let me down. I never found myself needing some other functionality. You can tween any property (including a MovieClip's volume and color), use any easing function, build in delays, callback functions, pass arguments to that callback function, and even tween arrays all with one line of code. If you need more features, you can always step up to TweenFilterLite or TweenMax.

I haven't been able to find a faster tween engine either. The syntax is simple and the class doesn't rely on complicated prototype alterations that can cause problems with certain compilers. TweenLite is simple, very fast, and more lightweight than any other popular tweening engine. See an interactive speed comparison of various tweening engines here.

Other links: AS3 Version | Speed Comparison | TweenFilterLite | TweenMax | Forums

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 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
Tween arrays of numeric values with a single call
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.

TweenLite.to(target:Object, duration:Number, variables:Object);

Description: Tweens the target's properties from whatever they are at the time you call the method to whatever you define in the variables parameter.
Parameters:
1. target: Target MovieClip (or any object) whose properties we're tweening
2. duration: Duration (in seconds) of the tween
3. variables: An object containing the end values of all the properties you'd like to have tweened (or if you're using the TweenLite.from() method, these variables would define the BEGINNING values). Putting quotes around values will make the tween relative to the current value. For example, _x:"-20" will tween _x to whatever it currently is minus 20 whereas _x:-20 will tween _x to exactly -20. Here are some examples of properties you might include:
  - _alpha: The alpha (opacity level) that the target object should finish at (or begin at if you're using TweenLite.from()). For example, if the target._alpha is 100 when this script is called, and you specify this parameter to be 50, it'll transition from 100 to 50.
  - _x: To change a MovieClip's x position, just set this to the value you'd like the MovieClip to end up at (or begin at if you're using TweenLite.from()).
  Special Properties:
  - delay : Number - The number of seconds you'd like to delay before the tween begins. This is very useful when sequencing tweens
  - ease : Function - You can specify a function to use for the easing with this variable. For example, mx.transitions.easing.Elastic.easeOut. The Default is Regular.easeOut.
  - easeParams : Array - An array of extra parameter values to feed the easing equation. This can be useful when you use an equation like Elastic and want to control extra parameters like the amplitude and period. Most easing equations, however, don't require extra parameters so you won't need to pass in any easeParams.
  - autoAlpha : Number - Same as changing the "alpha" property but with the additional feature of toggling the "visible" property to false if the alpha ends at 0. It will also toggle visible to true before the tween starts if the value of autoAlpha is greater than zero.
  - _visible : Boolean - To set a MovieClip's "_visible" property at the end of the tween, use this special property.
  - volume : Number - To change a MovieClip's volume, just set this to the value you'd like the MovieClip to end up at (or begin at if you're using TweenLite.from()).
  - tint : Number - To change a MovieClip's color, set this to the hex value of the color you'd like the MovieClip to end up at(or begin at if you're using TweenLite.from()). An example hex value would be 0xFF0000. If you'd like to remove the color from a MovieClip, just pass null as the value of tint. Before version 5.8, tint was called mcColor (which is now deprecated and will likely be removed at a later date although it still works)
  - frame : Number - Use this to tween a MovieClip to a particular frame.
  - onStart : Function - If you'd like to call a function as soon as the tween begins, pass in a reference to it here. This can be useful when there's a delay and you want something to happen just as the tween begins.
  - onStartParams : Array - An array of parameters to pass the onStart function.
  - onStartScope : Object - Use this to define the scope of the onStart function.
  - onUpdate : Function - If you'd like to call a function every time the property values are updated (on every frame during the time the tween is active), pass a reference to it here.
  - onUpdateParams : Array - An array of parameters to pass the onUpdate function (this is optional)
  - onUpdateScope : Object - Use this to define the scope of the onUpdate function.
  - onComplete : Function - If you'd like to call a function when the tween has finished, use this.
  - onCompleteParams : Array - An array of parameters to pass the onComplete function (this is optional)
  - onCompleteScope : Object - Use this to define the scope of the onComplete function.
  - renderOnStart : Boolean - If you're using TweenLite.from() with a delay and want to prevent the tween from rendering until it actually begins, set this special property to true. By default, it's false which causes TweenLite.from() to render its values immediately, even before the delay has expired.
  - overwrite : Boolean - If you do NOT want the tween to automatically overwrite any other tweens that are affecting the same target, make sure this value is false.

TweenLite.from(target:Object, duration:Number, variables:Object);

Description: Exactly the same as TweenLite.to(), but instead of tweening the properties from where they're at currently to whatever you define, this tweens them the opposite way - from where you define TO where ever they are now (when the method is called). This is handy for when things are set up on the stage where the should end up and you just want to animate them into place.
Parameters: Same as TweenLite.to(). (see above)

TweenLite.delayedCall(delay:Number, onComplete:Function, onCompleteParams:Array, scope:Object);

Description: Provides an easy way to call any function after a specified number of seconds. Any number of parameters can be passed to that function when it's called too.
Parameters:
1. delay: Number of seconds before the function should be called.
2. onComplete: The function to call
3. onCompleteParams [optional] An array of parameters to pass the onComplete function when it's called.
4. scope [optional] Defines the scope of the function.

TweenLite.killTweensOf(target:Object, complete:Boolean);

Description: Provides an easy way to kill all tweens of a particular Object/MovieClip. You can optionally force it to immediately complete (which will also call the onComplete function if you defined one)
Parameters:
1. target: Any/All tweens of this Object/MovieClip will be killed.
2. complete: If true, the tweens for this object will immediately complete (go to the ending values and call the onComplete function if you defined one).

TweenLite.killDelayedCallsTo(function:Function);

Description: Provides an easy way to kill all delayed calls to a particular function (ones that were instantiated using the TweenLite.delayedCall() method).
Parameters:
1. function: Any/All delayed calls to this function will be killed.

TweenLite.removeTween(tween:TweenLite):Void

Description: Kills a single tween instance.
Parameters:
1. tween: The TweenLite instance that you'd like to kill.

As a simple example, you could tween the _alpha to 50% and move the _x position of a MovieClip named "clip_mc" to 120 and fade the volume to 0 over the course of 1.5 seconds like so:

import gs.TweenLite;
TweenLite.to(clip_mc, 1.5, {_alpha:50, _x:120, volume:0});

If you want to get more advanced and tween the clip_mc MovieClip over 5 seconds, changing the _alpha to 50, the _x to 120 using the "Back.easeOut" easing function, delay starting the whole tween by 2 seconds, and then call a function named "onFinishTween" when it has completed and pass in a few parameters to that function (a value of 5 and a reference to the clip_mc), you'd do so like:

import gs.TweenLite;
import mx.transitions.easing.Back;
TweenLite.to(clip_mc, 5, {_alpha:50, _x:120, ease:Back.easeOut, delay:2, onComplete:onFinishTween, onCompleteParams:[5, clip_mc]});
function onFinishTween(parameter1_num:Number, parameter2_mc:MovieClip):Void {
trace("The tween has finished! parameters: " + parameter1_num + ", and " + parameter2_mc);
}

If you have a MovieClip on the stage that is already in its end position and you just want to animate it into place over 5 seconds (drop it into place by changing its _y property to 100 pixels higher on the screen and dropping it from there), you could:

import gs.TweenLite;
import mx.transitions.easing.Elastic;
TweenLite.from(clip_mc, 5, {_y:"-100", ease:Elastic.easeOut});

How do I install the class? Do I have to import it on every frame?
Just make sure the "gs" folder from the download is in the same folder as your FLA file. Keep the class files in the "gs" folder (don't remove them). That's it. And, yes, just like any Class, you need to import TweenLite at the top of any frame that contains code referencing it. This does NOT add extra Kb to your file size very time you import it. Flash is smart enough to embed it once and all the other import statments just act as a "pointer" to the embedded Class.
Why doesn't the tweening engine selectively overwrite ONLY tweens that are affecting the same property? How can I achieve this effect?
As you can tell from the speed tests, performance is a primary concern. Searching through potentially hundreds or thousands of tweens for overlapping tween properties can get expensive in terms of performance. Therefore, the TweenLite family opted for a much faster approach: all or nothing. But don't worry - in almost every case, you can achieve the result you're after with a little bit of extra code. Trust me, it's worth the increased speed and efficiency you'll get.

You can selectively kill tweens by keeping track of the TweenLite instance that’s returned by the to() or from() methods, and calling removeTween() on them. For example, if you want to have a button scale up when you roll over it, and scale back down when you roll off (those tweens should overwrite each other) but you don't want them to overwrite a from() call that fades the button in over the course of 2 seconds, you could do:
1. TweenLite.from(myButton, 2, {_alpha:0, overwrite:false});
2. var scaleTween:TweenLite;
3. myButton.onRollOver = function():Void {
4. TweenLite.removeTween(scaleTween);
5. scaleTween = TweenLite.to(myButton, 0.5, {_xscale:120, _yscale:120, overwrite:false});
6. }
7. myButton.onRollOut = function():Void {
8. TweenLite.removeTween(scaleTween);
9. scaleTween = TweenLite.to(myButton, 0.5, {_xscale:100, _yscale:100, overwrite:false});
10. }
Remember, other tweens of the same object will always be overwritten by default. You must set overwrite:false to avoid that behavior. The above example is essentially allowing you to selectively handle overwriting yourself instead of relying on the tweening engine to do the "all or nothing" technique.
Can I set up a sequence of tweens so that they occur one after the other?
Of course! Just use the delay property and make sure you set the overwrite property to false (otherwise tweens of the same object will always overwrite each other to avoid conflicts). Here's an example where we colorize a MovieClip red over the course of 2 seconds, and then move it to a _y coordinate of 300 over the course of 1 second:
1. import gs.TweenLite;
2. TweenLite.to(clip_mc, 2, {tint:0xFF0000});
3. TweenLite.to(clip_mc, 1, {_y:300, delay:2, overwrite:false});
Do the properties have to be in a specific order?
Nope. The only thing that matters is that the first parameter is the object you're tweening, the second parameter is the time (in seconds), and the third parameter contains all the properties you want to tween (in any order). So TweenLite.to(clip_mc, 1, {_xscale:120, _y:200, _x:1}) is the same as TweenLite.to(clip_mc, 1, {_x:1, _y:200, _xscale:120});
Why are TweenLite and TweenFilterLite split into 2 classes instead of building all the functionality into one class?
1. File size. Only a portion of projects out there require tweening of filters. Almost every project I work on uses TweenLite, but only a few require tweening filters (TweenFilterLite). TweenLite is 3k whereas TweenFilterLite is 6k. Again, one of the stated purposes of TweenLite is to minimize file size & code bloat. If someone only wants to use TweenFilterLite, fine. But I think many people appreciate being able to use the most lightweight option for their needs and shave off the 3k when possible.
2. Speed. Tweening filters is a more complex task. There are additional if/else statements and calculations in the rendering loop inside TweenFilterLite which could potentially slow things down a bit, even for non-filter tweens (I doubt anyone would notice a difference unless they’re running hundreds or thousands of simultaneous tweens, but I’m a big fan of keeping things as efficient & fast as possible)
Do I have to purchase a license to use this code? Can I use it for commercial purposes?
TweenLite is free. You're welcome to use it for commercial purposes - I only ask that you donate what you think the class is worth in your project(s), and consider joining Club GreenSock which gives you some bonus classes, updates, and more. If you want to use one (or more) of my classes in your commerical software product which would entail distributing the class files, please get my permission first by e-mailing me at jack -at- greensock.com.

Feel free to e-mail me a question. Or post your question on the new forums. I'd highly recommend joining Club GreenSock to get prioritized access to my time in answering your question, and so that you receive updates and lots more. When you e-mail your question, please include a simplified FLA file (and any class files) that clearly demonstrates the problem and provide a brief explanation.

Author: Jack Doyle, (e-mail: jack -at- greensock.com)
Copyright 2008, GreenSock (This work is subject to the terms here.)

68 Responses to 'TweenLite (AS2) - A Lightweight (3k) and FAST Tweening Engine'

Subscribe to comments with RSS

Steve said,

on February 6th, 2007 at 4:05 pm

Looks Great.

But questions…

How does it compare to Fuse? I can see if it is lightweight, that it would be useful. But since it is lightweight, is it seamless also? I ask because Fuse totally replaces the Ugly Tween class for me.

Whats your thoughts on this?
jack said,

on February 6th, 2007 at 4:53 pm

Great question Steve. Let me first state that I’m not a Fuse expert. From what I understand, Fuse is built to be much more heavyweight and therefore has several features not found in TweenLite. For example, I believe Fuse allows you to pause and resume tweens, it has an update callback, and the common easing equations are built-in.

I’ve been doing professional ActionScript/Flash development for many years for some very large clients and quite frankly, I have yet to run into a situation that requires the additional features Fuse offers. I’ve run into plenty of projects, however, that have strict file size requirements that make Fuse a non-option. To me, all that extra code just bloats my files and makes things more complex. TweenLite always gets the job done quickly and with minimal code. I realize I’m biased, but in my opinion, TweenLite is easier to work with once you get used to it. Actually, I built a more feature-rich tweening engine myself a while back that was somewhat similar to Fuse, but after distilling it down to TweenLite, I never went back.

No offense to the Fuse folks out there - I’m sure there are some really great features that make TweenLite look almost useless by comparison, but in my personal experience, TweenLite does all the important stuff efficiently and with minimal bloat & complexity. I use it in almost every project I work on these days.

I’d recommend that you try using it in a few of your projects and see for yourself. I think you’ll like it and you’ll find that it does everything you need.
Steve said,

on February 7th, 2007 at 10:00 am

Don’t get me wrong, I love the concept already of a *light weight* tweening class.

However, I can speak for myself that I have found Fuse to be VERY useful, especially for filter tweening in flash 8, etc.

But I am also noticing some features in your TweenLite here, specifically the simple ability to pass in parameters to the callback function of your tween. Not to mention Fuse added about 20kb. Which isnt nessecarily huge, but its enough to care about.

I will definitely give this a whirl and post a review on my blog, I look forward to it!
kramer said,

on April 12th, 2007 at 2:17 pm

Thank you jack! I just started using this for some simple tweening. Its much more elegant than the tween class and much smaller than fuse (although i do miss the this_mc.slideTo stuff).

One thing that i noticed is i don’t use the included robert penner easing. I have just been importing the original easing from flash (import mx.transitions.easing.*).

I could definitely see using this is some flash banners since they have such low filesize requirements.
matthew said,

on April 17th, 2007 at 12:50 pm

Greetings. Thanks so much for sharing this! I’m a designer who’s been using flash for years, and have really needed to learn more of the developer side of things- But I’ve been losing my mind trying to grasp fuse… This is perfect. Thanks so much.

I have a quick question, as I said I’m new to the coding side of flash- how would I stack tweens? So that the second one started after the first one finished?

TweenLite.to(stage_mc, 1, {_x:10, _y:158, _xscale:100});
TweenLite.to(stage_mc, 1, {_x:10, _y:10, _yscale:100});

I’ll keep messing with it in the meantime, but for now, they obviously just run together.

Thanks so much!

-Matt
jack said,

on April 17th, 2007 at 2:48 pm

Matthew, it’s actually incredibly simple to do what you’re asking - use the onComplete argument to specify a function that you’d like to call when the tween is finished, like so:

TweenLite.to(stage_mc, 1, {_x:10, _y:158, _xscale:100, onComplete:nextTween});
function nextTween():Void {
TweenLite.to(stage_mc, 1, {_x:10, _y:10, _yscale:100});
}
paddy said,

on June 13th, 2007 at 8:37 am

good work! Do you think it would be useful to have an ‘onChange’ function? I often find myself using this with the Tween class…. paddy ;)
rob james said,

on June 19th, 2007 at 1:26 am

Hi Jack,

These are awesome but how I do I get it to work with sounds:-

import gs.Tweenlite;

this.createEmptyMovieClip(soundholder1 this.getNextHighestDepth());
sound1 = new Sound(soundholder1);
sound1 .attachSound(”hypnosphere.wav”+i);
sound1.setVolume(0);
sound1.start(0,999);

that sets up my sound object and if I alter the volume it does play.

TweenLite.to(sound1, 5,{volume:50});

I thought would fade it in but it does nothing :(

Any ideas ?

Rob.
jack said,

on June 19th, 2007 at 8:24 am

Rob, it’s actually quite simple to do what you’re asking. Your code wasn’t working because there’s not a “volume” property of the sound1 instance you created. There’s only a “setVolume()” function, so that won’t work. BUT, TweenLite easily controls the volume of any MovieClip’s sound. So you’d just need to target the MovieClip like this:

import gs.Tweenlite;

this.createEmptyMovieClip(”soundholder1″ this.getNextHighestDepth());
sound1 = new Sound(soundholder1);
sound1.attachSound(”hypnosphere.wav”+i);
sound1.setVolume(0);
sound1.start(0,999);
TweenLite.to(soundholder1, 5, {volume:50});

Happy tweening.
Fabiano said,

on July 27th, 2007 at 8:49 pm

Hi Jack,
Your script is great, really fantastic !!!
Thanks, good work.
Fabiano
dave said,

on July 31st, 2007 at 4:52 pm

Great library! Ran into problems with Fuse in that it writes a _listeners property to objects being tweened and that was messing up my custom components. TweenLite doesn’t write any additional properties to the object being tweened aside from the tween properties right?

Well so far everything’s been going very smoothly with TweenLite and just love how small the footprint is. Only one thing, maybe you could add a description for the ‘delay’ property under the usage special properties section. Initially, I didn’t read down to the examples or faq so I was using something like TweenLite.delayedCall(time, Delegate.create(TweenLite, TweenLite.to), args); Yea…doh! Anyways it’s become my tween library of choice now. Thanks and great job!
Stephan said,

on August 7th, 2007 at 10:35 am

I am having problems calling methods within a class using onComplete or delayedCall. I can call the same method from inside the class and from the root. But if I do the same thing with tweenlite the actions in the method do not execute. (for some strange reason the trace actions work but a simple gotoStop command will not)

public function swapColor(currentID:Number):Void
TweenLite.to(product_mc, .25,{_alpha:0, overwrite:false, onComplete:setProductColor})
}

public function setProductColor():Void
{
product_mc.gotoAndStop(”state_1″);
trace(_label);
}
jack said,

on August 7th, 2007 at 11:00 am

Stephan, Delegate is your friend. I’m almost positive you’re just running into a scope issue (very common in AS2). Your code should look more like:

import mx.utils.Delegate;
public function swapColor(currentID:Number):Void {
TweenLite.to(product_mc, .25,{_alpha:0, overwrite:false, onComplete:Delegate.create(this, setProductColor)})
}

public function setProductColor():Void {
product_mc.gotoAndStop(”state_1″);
trace(_label);
}
Stephan said,

on August 7th, 2007 at 4:15 pm

That worked perfectly. I was able to remove fuse from my project and reduced my file size by 40KB!!!
Gabe Neila said,

on August 27th, 2007 at 10:54 am

As per your site says, I heard about your Tweenlite and I put it to good use.
I am on the JCPenney team on this company, and I am in charge of creating the Web Banners for JCP you see all around. Keeping them under 30k is quite a challenge sometimes. Your tweenlite has helped a lot better than the regular Tween Class. Thank you!
re_sync said,

on August 29th, 2007 at 10:16 am

This is absolutely beautiful…

A nice simple class that does exactly what I need, and it takes a pretty decent beating too; it’s remarkably well optimized.

Question? can I tween any object, or am I restricted to the typical movie clip properties?

I’m wondering if this can be used with papervision3D
jack said,

on August 29th, 2007 at 10:26 am

Absolutely you can use TweenLite with PaperVision3D. You’re not limited to tweening MovieClip properties - you can tween ANY numeric property of ANY object. You can even tween Arrays of numbers.
snowboardfoo said,

on September 5th, 2007 at 12:50 pm

Hey Jack.

How do you think TweenLite compares to the Zigo engine, which people have called the “benchmark” for animation packages?

In particular, do you think the smoothness measures up?

Thanks…
jack said,

on September 12th, 2007 at 11:02 am

snowboardfoo, I did run some benchmarks a while back and there wasn’t a single tweening engine that was faster than TweenLite. I tried VERY hard to eek every bit of performance out of the code that I possibly could. When I did the tests, TweenLite was 20-50% faster than many of them. A few others were close, but none surpassed TweenLite’s speed.

Try it for yourself - I think you’ll see that TweenLite is a compact little speed demon :-)

Jack
snowboardfoo said,

on September 14th, 2007 at 7:22 pm

Hey Jack,

I’ve been using the engine for a week or so now, and I also tried out a number of the other popular engines and did some of my own smoothness/speed tests, and I have to say that you seem to be right!

Your engine seems to perform just as well as many of the very large and well-known engines, indeed sometimes faster, and TweenLite is MUCH smaller! (thus the lite i suppose).. I also found that yours does not create as many add-ons and listeners, keeping things lightweight and allowing the flash plugin to really fly through these animations.

In addition, I found that TweenLite’s syntax is very easy and quick, and is easier to use… especially with onComplete- cuing events and functions at the end of tweens and sending paramaters to handler functions is a snap.

All in all, this is really nice work you’ve done here, I would recommend it over any other engine out there that I have seen.

Nice work!
markval said,

on September 18th, 2007 at 3:16 pm

I’m having issues with _alpha and Flash6.

Everytime I use any transformation to a movieClip ( _x , _xscale , _alpha ), _alpha will be tween aswell to 0
jack said,

on September 18th, 2007 at 3:34 pm

Great catch markval! There was an issue with the new autoAlpha feature in v4.8 that Flash 6 didn’t like (Flash 6 doesn’t interpret isNaN() properly). I’ve worked around the issue and posted an update.
Mark said,

on September 21st, 2007 at 2:27 pm

hi.
thanks for that library. one question:
is there any need to kill Tweens? when i do a lot of tweenlite.to’s is the _all array going to mess up after a while?
jack said,

on September 21st, 2007 at 2:38 pm

Mark, no, you do NOT need to worry about killing tweens. The class is built to remove the tweens as they complete, so the _all array will stay nice and clean. The only reason you might want to use killTweensOf() is if you must stop an item from tweening when it’s in the middle of a tween. Also note that by default, when you try to tween an object that’s already tweening, the original (old) tween will get overwritten unless you specify overwrite:false. This is another way things are kept nice and clean by default. Just make your TweenLite.to() call and forget about it - no need to worry about garbage collection, etc.
Andrew said,

on October 21st, 2007 at 12:36 pm

Congrats on the release Jack, what a great performance increase.

Get in touch if you ever want to throw some ideas around.
Tilman said,

on October 23rd, 2007 at 8:17 am

Is there something like a special property “frame”? I would like to set up the animation with the Flash IDE and then move the playback head back and forth to play it. Unfortunately you cannot just set “_currentframe = frame” but use gotoAndStop().

I used to do it with the built-in Tween component by tweening a variable “frame” and setting onMotionChanged to “gotoAndStop(frame)”. But TweenLite does not have an onMotionChanged-equivalent.

Is there a way to do this?
jack said,

on October 23rd, 2007 at 8:39 am

Tilman, as of version 6, TweenLite now handles frame tweens! Enjoy.
purepear said,

on October 24th, 2007 at 10:33 am

Great work!
There is one thing that is real pain in the ass for me. The onComplete function (guess onStart too) does not get the current scope. I’m using the as3 and version and i miss

function aaaa(){
var b:String = ‘adadadaddad’
TweenLite.to(this, 1, {alpha:0, onComplete: function():void{
trace(b)
}})
}

which i was able to do with Tweener
I know i can pass ‘this’ in onCompleteParams but i think that if you make the current scope as default scope in the onComplete function it will be great. If one wants to use another scope he can add it to the onCompleteParams and use it instead.
jack said,

on October 25th, 2007 at 9:10 am

purepear, the reason I don’t scope things the way you’re asking is because in AS3, a function’s original scope is maintained and function calls would work more the way people typically expect. I want the functionality between the AS2 and AS3 versions to be as identical as possible, so I didn’t want to get AS2 folks hooked on just using “this” to refer to the tween’s target and then move to AS3 and have it function differently.

There are 2 very easy workarounds in AS2, one of which you already mentioned. Either pass a reference to the object in the onCompleteParams and use that, or use Delegate.create() to control the function call’s scope. If you need the functionality you describe, it should be pretty easy to implement. Just search for the apply() calls and instead of passing “null” as the scope, pass _endTarget.
dain said,

on October 29th, 2007 at 3:07 pm

wow, your class is a godsent present for flash lite tweening, it makes a HUGE difference over others, the animation is now actually an animation, not a slideshow on a phone!

had to hunt around for good easing functions tho, here are Penner`s in readily usable form:
http://snippets.dzone.com/posts/show/4005
Serban said,

on November 13th, 2007 at 8:53 am

Hi Jack! Tremendous work, tweening is now a walk in the park due to your efforts! Well done!

Many thanks!
Max said,

on November 17th, 2007 at 1:22 am

Thanks for providing such a great resource to the flash community. This a great tool and I’m looking forward to using it. I especially appreciate your example swf that generates the code underneath it. Couldn’t be any easier, can’t say the same for the other tweening classes out there. Also like the ability to compare different tween classes in action.

Keep up the great work and thanks again.
Goblin said,

on November 28th, 2007 at 8:57 am

TweenLite.to(repetitiveJob, 1, { tweenExecutionComplexity:0 }); :-)

Seriously Jack, this is some awesome stuff!
Thanks and thanks again.
ChrisX said,

on December 11th, 2007 at 2:23 am

Ok this tween engine is really great and has the great advantage of being small as hell. But im nw to flash scripting and i was wondering if someone here could help me with a question i have.

If i want to build an animation loop how would i go about it.

So

TweenLite.to(mc, 1, {_x:10, _y:158, _xscale:100});
TweenLite.to(mc, 2, {_x:0, _y:,0 _yscale:0});

i want it to play through in series and then return to start and play through in otherwords a loop.

Obviously the tween would be more complex than this but could you guys help me out on this one.

Keep up the great work.
jack said,

on December 11th, 2007 at 10:20 am

ChrisX, you can set up a loop by using the onComplete property, like:

function startLoop($mc:MovieClip):Void {
TweenLite.to($mc, 1, {_x:10, _y:158, _xscale:100, onComplete:endLoop, onCompleteParams:[$mc]});
}

function endLoop($mc:MovieClip):Void {
TweenLite.to($mc, 2, {_x:0, _y:,0 _yscale:0, onComplete:startLoop, onCompleteParams:[$mc]});
}

startLoop(mc);
juegas said,

on December 12th, 2007 at 5:12 pm

Hey Jack,

Dig the engine alot, One quick question about bezier curve control. What is the syntax foor tweening an mc on a curve? is this possible with tweenlite?
If so can you show me the syntax in as2 / as3.

Thanks for the great work.
jack said,

on December 13th, 2007 at 5:16 pm

Juegas, sorry, but in order to keep file size to a minimum and performance to a maximum, TweenLite doesn’t support bezier tweens at this point. But the newly released TweenMax does! Check it out at http://www.TweenMax.com
Ivan said,

on December 24th, 2007 at 4:44 pm

Hi jack , this is one great class , however I have one question…
If I want to tween the movieclip to a relative value which is previously
calculated in a variable:
var calcHeight:Number=scrollablePerc * _cropArea;
How can I accomplish that? Because if I put that variable inside quotes it doesn’t work.
Thanks.
jack said,

on December 26th, 2007 at 12:27 pm

Ivan, you can define relative values using variables and then just cast them as Strings when you pass them in, like:

var myRelativeValue = 540;
TweenLite.to(my_mc, 3, {_x:String(myRelativeValue)});
Luis said,

on December 30th, 2007 at 10:25 am

Hi Jack,
JUST LOVE TweenLite & TweenFilterLite , the ease of use, and the integration with arrays and functions just love it. With your great Tweening Engine I am now learning AS3 to the fullest, and getting rid of AS2. Thank you.

I was previously using Exend Tween Engine with AS2 (extendstudio.com), which had a nice feature of being able to Reverse a set of tweens. (mc.reverse())
Can you let me know if it’s possible to do so with TweenLite,
Will send you some links of the cool website i’ll will create with TweenLite.
Thanks.
jack said,

on December 31st, 2007 at 12:03 pm

In order to keep file size down, there is not currently a way to automatically reverse (or yoyo) in TweenLite. I may add that feature to TweenMax, an upcoming heavier-weight extension of TweenLite. Stand by for that…

In the mean time, you can always use onComplete to call a function that manually reverses the TweenLite (by simply doing another TweenLite and reversing the values).
Sam H said,

on January 6th, 2008 at 2:35 am

FANTASTIC work Jack.

This is the first time I’ve used external classes, and I’ve found your TweenLite and XML Parser classes to be super useful, fast, and easy to use.

This is a work in progress, but I thought I’d share what I’m doing with your code: http://www.samuelhoang.com/

Can’t thank you enough!
gilles said,

on January 9th, 2008 at 12:18 pm

Hi Jack,

me again, I’m trying to use the delayedCall function but always have an error message saying ” ‘)’ or “,” expected”, though I don’t think I misstyped the call:

TweenLite.delayedCall(delay:aNumber, onComplete:myFunction, onCompleteParams:[theParam]);

is there a specific syntax? could you give an example?
jack said,

on January 9th, 2008 at 12:34 pm

gilles, You’re just using the wrong syntax.

*WRONG*:
TweenLite.delayedCall(delay:1, onComplete:myFunction, onCompleteParams:["var1", 2]);

*RIGHT*:
TweenLite.delayedCall(1, myFunction, ["var1", 2]);
Nicholas said,

on January 21st, 2008 at 8:17 pm

Hi Jack,
Awesome work - I have officially made that switch from FuseKit to TweenLite, purely for that delicious, delicious filesize! (and AS3 support).

What would be awesome is a function for the following:
TweenLite.isTweening(Object:Object, Params:Object=null):Boolean
To check whether a particular object (or particular parameters of a particular object) is currently tweening or not.

Keep up the good work! Much appreciated!
Sam Wise said,

on January 30th, 2008 at 10:29 am

TweenLite is outstanding. How can I tween the perspective of a movieclip, i.e., tween all four corners simultaneously and independently?
jack said,

on January 30th, 2008 at 11:59 am

Sam, interesting that you ask that. I’m feverishly working on a new class that will do exactly that. You’ll be able to VERY easily tween the corners independently. Another class I’m working on will make it simple to flip/tilt/rotate/move a MovieClip/Sprite in 3D. My focus was making it extremely easy and ensuring that it works great with TweenLite, so you’ll be able to tween a MovieClip flipping 180 degrees on any axis, complete with perspective in TWO lines of code (one to make it 3D, and the other to tween the rotationY or rotationX or rotationZ property). It’s not quite ready yet. I’ll let you know when it is. If anyone else is interested, shoot me an e-mail and I’ll put you on the notification list.
Mike said,

on January 30th, 2008 at 6:39 pm

I have made the move to TweenLite, it is working flawlessly (when I don’t typo TweenLite.to and put Tweenlite.to), and it is going to meet my needs with flying colors while TREMENDOUSLY decreasing my development time!

I like it so much I already don’t remember what I ever did without it!

Thanks Jack!

I’m going to request a bit of PayPal love for you from my employer. :)
BG said,

on February 5th, 2008 at 12:13 pm

I just downloaded TweenFilterLite and friend, and while I have yet to really put it through its paces, I’m in love with it so far! Once I remember the syntax without sneaking a peak at the class definitions, I anticipate development time plummeting! You are awesome and these classes are awesome! \m/
Danny said,

on February 7th, 2008 at 1:04 pm

Can you give an example of how to use autoAlpha? I can’t seem to get it to work.

Thanks!
jack said,

on February 7th, 2008 at 4:52 pm

Sure, Danny. To have my_mc fade to 0 and then flip _visible to false, I’d do:

TweenLite.to(my_mc, 2, {autoAlpha:0});

If you’ve got a clip that’s already got an _alpha of 0 and its visibility is false and you want to fade it in to an _alpha of 100, just do:

TweenLite.to(my_mc, 2, {autoAlpha:100});

So basically, you use autoAlpha in place of _alpha.
Urban Angel said,

on February 15th, 2008 at 7:00 pm

Hi,
it looks great

But what about an ease “InOut” ?
I don’t see that in your test.
Can i do that too?
jack said,

on February 16th, 2008 at 1:23 am

Oh, sure. You can definitely use “InOut” tweening equations with TweenLite. One of the benefits of TweenLite is that you can use ANY standard easing equation and it doesn’t embed a certain set (which would chew up a bunch of file size anyway). You just plug yours in. So, to do a Regular easeInOut, you could:

import mx.transitions.easing.Regular;
import gs.TweenLite;

TweenLite.to(my_mc, 2, {_x:100, ease:Regular.easeInOut});

To get other equations, just search your Flash help files for “easing”. They’re almost all in the built-in mx.transitions.easing package for AS2.
Jonas said,

on February 18th, 2008 at 4:58 pm

What a great tween class indeed.

But, is there a way to control the volume of imported (not embedded) sound?
jack said,

on February 21st, 2008 at 3:19 am

Yes, Jonas, as of version 5.9, you can tween the volume of sounds that aren’t embedded in MovieClips.
bloba said,

on February 22nd, 2008 at 6:29 am

this is a great class,
with all functions you ever need.

its the perfect combination of all the other stuff around here

respect .bloba !
Tony said,

on February 23rd, 2008 at 4:02 pm

Jack, thank you for such a great tool!

I am testing tweaning various properties, but ran into a snag. How do I tween to the following:

var mycolorchange:ColorTransform = new ColorTransform(1, 1, 1, 1, 255, 255, 255, 0);
image_mc.transform.colorTransform = mycolorchange;

When I tween a movieclip with an image via the timeline using the above settings it creates a nice “solarized” dissolve to white.
Todd Perkins said,

on February 26th, 2008 at 1:19 pm

This is absolutely amazing! To think, I’ve been using the built in Tween class this whole time like a sucker! Thank you!
jack said,

on March 2nd, 2008 at 3:13 am

Tony, you can definitely create the effect you’re looking for using the ColorTransformProxy utility class I created for use in conjunction with TweenLite for tweening all the various ColorTransform-related properties, including redOffset, greenOffset, blueOffset, redMultiplier, greenMultiplier, blueMultiplier, tint, and even tintPercent and brightness!. Sign up for Club GreenSock and you’ll get that class as a bonus (as well as a TrasnformMatrixProxy class). See http://blog.greensock.com/club/ for details.
John said,

on March 11th, 2008 at 12:51 am

This class works amazingly.

I am wondering your advice for using this script to continuously scroll/loop a single image such as clouds. 1 photo continuously scrolling in the background?

John
jack said,

on March 11th, 2008 at 9:39 am

John, it’s pretty easy to loop a tween - you can just use the onComplete callback to call a function that starts your tween over again, like:

function doMyTween():Void {
my_mc._x = 0;
TweenLite.to(my_mc, 10, {_x:600, onComplete:doMyTween});
}
doMyTween();
szataniol said,

on March 17th, 2008 at 10:19 am

Is there any possibility to check if the object is tweening at the moment? I don’t see any stuff like that.. Imo you should consider adding this function, it’s really handy. :/
jack said,

on March 17th, 2008 at 11:35 am

szataniol, in order to keep file size down, TweenLite doesn’t have an “isTweening” feature, but TweenMax does! Check out http://www.TweenMax.com
Willem-Paul said,

on March 20th, 2008 at 10:33 am

Awesome little devil this library. Very nice you included the source as well. Just made a donation, keep up the good work!
Tim Soret said,

on April 2nd, 2008 at 9:16 am

Hi Jack.
I use your tween class in every project (I should pay royalties :P), and it works perfectly in most cases. But this time, I’m stuck with a simple, little, but annoying problem :

I need to tween various properties of hundred of movieclips with random values. As usual, it works perfectly, but I can’t use a variable as a relative value. Let me show you the AS2 code excerpt :

// Here are my random values
spark_size = Math.round(Math.random()*50)+50;
spark_alpha = Math.round(Math.random()*50)+30;
spark_rotation = Math.round(Math.random()*360);
spark_move = Math.round(Math.random()*10);

// Here is the tween, using these variables
TweenLite.to(string_spark,0.2,{_x:”spark_move”, _alpha:spark_alpha, _rotation:spark_rotation, _xscale:spark_size, _yscale:spark_size, overwrite:false});
}

As you can see, i just want to wiggle my sparks using random relative values, using the spark_move variable. But the quotation marks don’t enable me to use a variable, only integers.

If you have any idea that can solve this issue…
Many thanks.
jack said,

on April 2nd, 2008 at 9:40 am

Tim, all you need to do to treat your variables as strings is wrap them in “String()”, like this:

TweenLite.to(string_spark,0.2,{_x:String(spark_move)});
Tim Soret said,

on April 2nd, 2008 at 9:53 am

Perfect. And only 24 min after the question.
I’ll make a donation tonight, you really deserve it.
jakubt said,

on April 21st, 2008 at 11:22 am

thanks a lot for this nice small script! I just had to cut client`s banner 10K down - done in ten minutes including googling for your site : -)

The Pages

The Search

The Categories

The Associates

The Meta

TweenLite (AS2) - A Lightweight (3k) and FAST Tweening Engine

68 Responses to 'TweenLite (AS2) - A Lightweight (3k) and FAST Tweening Engine'

Leave a Reply