GreenSock

TweenLite (AS3) - A Lightweight (3K) and FAST Tweening Engine

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

Version 6.21, Updated 4/27/2008

Compatibility: Flash Player 9 and later (ActionScript 3.0) (click here for the AS2 version)
File Size added to published SWF: About 3Kb

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 = fl.motion.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: AS2 Version | Speed Comparison | TweenFilterLite | TweenMax

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 1 when this script is called, and you specify this parameter to be 0.5, it'll transition from 1 to 0.5.
  - 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 (**Optional**):
  - 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, fl.motion.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.
  - 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.
  - 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)
  - 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)
  - 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);

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.

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% (0.5) 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:0.5, 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% (0.5), the x coordinate 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 fl.motion.easing.Back;
TweenLite.to(clip_mc, 5, {alpha:0.5, 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 fl.motion.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. myButton.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
2. myButton.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
3. var scaleTween:TweenLite;
4. TweenLite.from(myButton, 2, {alpha:0, overwrite:false});
5. function onMouseOver($e:MouseEvent):void {
6. TweenLite.removeTween(scaleTween);
7. scaleTween = TweenLite.to(myButton, 0.5, {scaleX:1.2, scaleY:1.2, overwrite:false});
8. }
9. function onMouseOut($e:MouseEvent):void {
10. TweenLite.removeTween(scaleTween);
11. scaleTween = TweenLite.to(myButton, 0.5, {scaleX:1, scaleY:1, overwrite:false});
12. }
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, {scaleX:120, y:200, x:1}) is the same as TweenLite.to(clip_mc, 1, {x:1, y:200, scaleX: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. 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.)

71 Responses to 'TweenLite (AS3) - A Lightweight (3K) and FAST Tweening Engine'

Subscribe to comments with RSS

Orchid1 said,

on July 17th, 2007 at 5:02 pm

hey Amigo
I am trying out your TweenLite class and I understand the concept behind the methods .to and .from
however I cannot figure out the delay method.
heres my code:

import gs.TweenLite

TweenLite.delayCall(1, setUpBackground());
TweenLite.delayCall(10, picture());
I tried a million ways to do it but all gave me errors
would you be able to tell me why?
would you be so kind as to explain why?
I look forward to donating to your funds but I would like to know how to use it first. I’m going to try out the rest of the features, I think what you have created is great and deseves praise. Thanks for the deal.

Orchid1
jack said,

on July 17th, 2007 at 5:23 pm

Orchid1, there are actually 3 things that are causing the problem:

1) You were calling delayCall() instead of delayedCall()

2) When you reference a function, don’t put the parenthesis after it “()” otherwise you’re instructing Flash to actually CALL that function instead of passing a reference to it :-)

So your code should be:

import gs.TweenLite;

TweenLite.delayedCall(1, setUpBackground);
TweenLite.delayedCall(10, picture);

3) There was a bug in the AS3 version of TweenLite that caused the delayedCall() to throw an error at runtime (sorry!). That’s fixed as of version 3.7.
ian h said,

on July 24th, 2007 at 6:39 pm

Hi,

This class is great, I have been using it extensively throughout my newest project. One thing I would like to do, which has given me problems, is something like:

TweenLite.to(fader, 2, {alpha: 0});
TweenLite.to(fader, 2, {alpha:1, delay: 2});

Just a fade out, and then back in. Is this the correct implementation, because it seems to do nothing.

Anyways, thanks again,
ian
jack said,

on July 24th, 2007 at 7:52 pm

ian, keep in mind that by default, TweenLite will overwrite tweens of the same object (to avoid conflicts) unless you specify overwrite:false. So your second tween was overwriting your first one. It should be more like:

TweenLite.to(fader, 2, {alpha:0});
TweenLite.to(fader, 2, {delay:2, alpha:1, overwrite:false});

Good luck ian!
Doug said,

on August 1st, 2007 at 12:34 pm

This class is fantastic. Much better than Tweener and better documentation too.
felix said,

on August 7th, 2007 at 1:56 pm

bravo! this is load of functionality to squeeze into 2k!

I love the fact that it overwrites previous tweens on the same object by default. This means if you apply many tweens to the same object (for example a button color tween on rollover/rollout), you don’t start leaking memory due to piling up tween objects (which I think may happen using Tweener?)
dave said,

on August 10th, 2007 at 6:48 am

The class works great!
How can the params of the ‘ease:Elastic.easeOut’ be changed so the ‘bouce is either less or more of a bounce?

e.g. TweenLite.to(myMovie2, 1, {y:300, delay:4, ease:Elastic.easeOut, overwrite:false});

As above to make the easeOut less of a bounce?

regards,

Dave
jack said,

on August 10th, 2007 at 9:22 am

Dave, good news: the new release of TweenLite indeed supports passing extra parameters to your easing equation. You just need to use the special easeParams property, like:

TweenLite.to(my_mc, 2, {_x:200, ease:Elastic.easeOut, easeParams:[1.5, 2.45]});
Tim said,

on August 12th, 2007 at 3:40 am

Great Class!
After trying all the AS3 Tweening classes, I think I found my favorite:)
Tweener doesn´t do Filters, so thats a no go for me.
One question though…. Are there really only these few easing methods?
I have gotten used to the Robert Penner equations, which allow a little more finetuning. Is there a possiblity to add these (maybe as an optional Package, because of file size)?
It seems that the fl.transitions doen´t all work either..
for example:
TweenLite.to(logo,0.4,{scaleX:1,scaleY:1,alpha:1,ease:Strong.easeInOut,delay:0.8,overwrite:false});
Gives me an error….

In the post above you discribe making your own custom easing function, anyway to make a package with all the penner equations?

Don´t get me wrong, I really love TweenerLite, I´m just used to having a little more choice on the easing types
jack said,

on August 12th, 2007 at 4:04 pm

Tim, you absolutely can use ANY easing function you want including the ones that ship with Flash (fl.motion.easing and fl.transitions.easing packages) or Robert Penner’s or custom ones you write. I’m pretty sure that the reason you got an error when trying to use Strong.easeInOut is because you forgot to import the proper class which I believe is fl.transitions.easing.*. I didn’t include all of the various easing equations inside the class because it would eat up too much space unnecessarily.

So your code should look something like:
import fl.transitions.easing.*;
TweenLite.to(logo,0.4,{scaleX:1,scaleY:1,alpha:1,ease:Strong.easeInOut,delay:0.8,overwrite:false});
Tim said,

on August 13th, 2007 at 12:23 am

HI Jack,
thanks for your speedy reply!
Yeah, I feel stupid now, I just forgot to import them:) I figured it out, 30min after posting.. Works like a charm, I´ll try to use some of the penner equations next. I think your concept of a totally lightweight tweening class is great. I really only need one or two of the easings, then I´m happy.. Just a small questiion, tough… where should I write my custom easing equations? Sorry, I´m a total newbie when it comes to as3 or even oop actionscript..
Thanks again for your wonderful class:)

tim
jack said,

on August 13th, 2007 at 12:54 am

Tim, technically it doesn’t really matter where you put your custom easing functions. It would probably make most sense to put them where you use them, like if you have a BouncingBall class that uses a custom easing equation, put your custom function inside your BouncingBall class file. Or if you have equations that you reference from multiple places, create your own class/package just for those (kinda like Adobe did with the fl.motion.easing package)
John Battagline said,

on August 13th, 2007 at 12:48 pm

I’m pretty new to flash, but I tried out TweenLite…and I love it already. It’s exactly what I’m looking for: powerful, lightweight, and miraculously easy to use.

Just wanted to say thanks.
Make said,

on August 14th, 2007 at 6:45 pm

it´s a incredible job! :) thank u! it´s much clearer than the Tween class of AS3… :)

Make
Mike said,

on August 22nd, 2007 at 1:41 pm

Jack, I was wondering if it is possible include additional properties like Blur, etc?

This looks soo cool by the way, thanks for developing such an amazing resourrce!
jack said,

on August 22nd, 2007 at 1:52 pm

Mike, yes, absolutely you can tween filter effects like blurs, drop shadows, and a whole lot more with TweenLite’s “big brother” TweenFilterLite. It extends TweenLite, so the file size hit is incredibly small for the power it packs. You probably just didn’t notice the link to it on the TweenLite page. Check it out at http://www.tweenfilterlite.com. It’s available in AS2 and AS3 flavors.
snowboardfoo said,

on August 30th, 2007 at 7:19 pm

Awesome, awesome, awesome.

I have been developing my own animation library for years and switching it over to AS3 is a pain for sure.

You’ve done a really great job so far, keep up the good work!
Kristofer said,

on August 30th, 2007 at 7:51 pm

This is exactly what I was looking for. YOU ARE THE MAN!
Thank you for all your work.
Rick Jones said,

on September 17th, 2007 at 2:17 pm

Excellent job fixing Macradobe’s tween problem. I kept banging my head thinking that I was doing something wrong when using Adobe’s Tween class, due to the tweens hanging on me. Found out that it is a current bug. You can read this blog here to see others who are experiencing this issue: http://alvinzhang.info/?p=4

Oh and btw sent you some cash for your hard work. Really do appreciate it.
Pablo mercado said,

on September 20th, 2007 at 10:57 am

Thank you!! You made my life easier.
Ken Carpenter said,

on October 21st, 2007 at 8:37 pm

Hi Jack,

Just playing around with TweenLite and loving it so far. My mind if overflowing with ideas!

I tried to add both a “from” and a “to” tween to your second example with the text as shown below. I wanted to drop the words in the same way, but have them tween “to” a random color at the same time: You can drop this into your Sample_2.fla. Here is the code again:

//Drop the words into place
for (i = 1; i <= 7; i++) {
mc = this[”word”+i+”_mc”];
// var color:int = (Math.random() * 0xFFFFFF) + 0xFF000000;
var color:int = 0xFF;
TweenLite.from(mc, 2, {y:mc.y - 140, autoAlpha:0, ease:Elastic.easeOut, delay:i * 0.35});
TweenLite.to(mc, 2, {tint:color, overwrite:false, delay:i * 0.35});
}
Niklas said,

on October 22nd, 2007 at 4:37 am

Hi there!
I’ve become interested in your class when I saw the latest test between the diffrent engines. One question though:
How many different tweens are beeing supported? Does it support all these ones in the link below?
http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html
jack said,

on October 22nd, 2007 at 8:23 am

Yes, Niklas, TweenLite supports almost any easing equation you can throw at it as long as it’s in the standard format like the Penner easing equations and all the ones that ship with Flash (Linear, Elastic, Expo, Strong, Regular, Bounce, etc. - and each have easeIn, easeOut, and easeInOut). One of the ways TweenLite stays lightweight is that it doesn’t put all of those equations inside the class and bloat the SWF with ones you won’t use - you simply pass a reference to whichever equation you want to use into TweenLite as the ease property (see above documentation) and that’s it. See the interactive sample for example code.
jack said,

on October 22nd, 2007 at 9:17 am

Ken, You can do a TweenLite.to() and a TweenLite.from() on the same object BUT here’s the reason your tweens looked like they didn’t work (they actually did - just not the way you expected):

When you tween the tint (what used to be mcColor), it must factor in the alpha value because the ColorTransform affects it. For example, if you set a MovieClip’s alpha to 0.5 and then use a ColorTransform to make it 0xFF0000, the alpha will end up being 1 unless you factor in the alphaMultiplier. TweenLite tries to accommodate this by looking to see if the same TweenLite instance is also tweening alpha. If it is, it uses that alpha value in the alphaMultiplier, otherwise it uses the MovieClip’s current alpha. In your case, when the TweenLite.to() started to run, the alpha was zero, and since there was no alpha being tweened in that same instance, it used that “current” value so your MovieClips had an alpha of zero the whole time. It would be possible to add code to TweenLite to look through all the other tweens of an object to see if there are any other instances affecting the alpha, but I’ve resisted doing so because it would increase the Kb and slow things down slightly, not to mention there’s an easy workaround:

To get around it, all you need to do is make sure you tween the alpha in the same TweenLite as the tint, like so:

TweenLite.from(mc, 2, {y:mc.y - 140, autoAlpha:0, ease:Elastic.easeOut, delay:i * 0.35});
TweenLite.to(mc, 2, {tint:color, autoAlpha:100, overwrite:false, delay:i * 0.35});
dzedward said,

on October 24th, 2007 at 2:18 pm

I’ve found the built in Tween class in AS3 to be inconsistent, I switched to your class, and have yet to have a problem. Excellent work I must say.
Brendan said,

on October 26th, 2007 at 12:01 pm

Love this code! But really need an onUpdate hook (as seen in Tweener) any chance we may get this?

Thanks for the awesome code!!
jack said,

on October 26th, 2007 at 12:26 pm

Brendan, check out TweenMax at http://www.TweenMax.com. I think it’s got exactly what you’re asking for plus a lot more.
Brendan said,

on October 26th, 2007 at 12:32 pm

Jack, I totally agree with your reasoning here and have implemented my own ENTER_FRAME event listener and it works great.

The code i’m using:

onStart:function(){container.addEventListener(Event.ENTER_FRAME, render)}, onComplete:function(){container.removeEventListener(Event.ENTER_FRAME, render)}

would you recommend using onStartParams/onCompleteParams to do this instead of the way i’m currently doing it?

Thanks for the help and the speedy reply!
jack said,

on October 26th, 2007 at 12:40 pm

Brendan, that looks like a great solution! Thanks for sharing.
Simon Tullstedt said,

on October 31st, 2007 at 4:18 am

This thing is totally beautiful =D Will save a lot of work for me, thanx!
Kisi said,

on November 6th, 2007 at 5:35 pm

Powerful tweening engine! Thanks for sharing!
trevor jordet said,

on November 6th, 2007 at 10:44 pm

If you colorize a black movie clip it wont work. I was bangin my head against the wall for an hour trying to get this to work (AS3)

finally realised that if i changed the mc color to a lighter color, it works…
jack said,

on November 6th, 2007 at 11:11 pm

Trevor, you can also set the brightness to a higher value which will affect the way the colorization happens.
Steve said,

on November 19th, 2007 at 4:24 am

Hi Jack,

This thing is absolutely mind blowing!!

I’m trying to use TweenLite to make a masked movieClip that contains many thumbnails to scroll left/right (scrolling gallery).

Is there a way for me to set the codes to tween the movieClip 50 pixels to the left or right instead of moving it to a specific X value on the stage??

In other words, I want to make it so that each time a user click on either the PREV or NEXT button, the movieClip will tween 50 pixels to the left or to the right.

Thanks a million for sharing it!!
jack said,

on November 19th, 2007 at 8:47 am

Steve, all you need to do is put quotes around your values to make them relative. So to move your MovieClip 50 pixels to the left, you’d do:
TweenLite.to(my_mc, 2, {x:”-50″});
Ignazio said,

on November 22nd, 2007 at 6:33 am

Hi,
I’m also trying this very good class.
How can I do a relative movement using a variable as value?

TweenLite.to(my_mc, 2, {x:”+offset″});
doesn’t work.
jack said,

on November 22nd, 2007 at 9:06 am

Ignazio, you can use a variable for relative offsets by coercing it into a String, like:
TweenLite.to(my_mc, 2, {x:String(offset)});
Wondering said,

on November 27th, 2007 at 3:43 am

Hi jack, a little question.

Is there any way to set up a sequence of Tweens, and set it up so when the sequence of tweens is finished, it calls another function?

Lets say I have a Sprite full of movieclips which all individually motion-tween into place. when i move to a next section of the website, i have tweens set up that make all of the movieclips fly back out of the screen.

however, i want it so only once every Tween has finished, then the function will be called to load in the next section of the website.

the only thing i can think of is having all my Tweens onComplete each call some function, which counts a number, and when the number hits a certain amount, it calls my load function.

however, is there a more elegant way of doing this, or is that just about it?
jack said,

on November 27th, 2007 at 8:53 am

“Wondering”, sure, you certainly can set up a sequence of tweens and then call a function when they’re all done. The answer is simpler than you may think. Just use delays and then use the onComplete of the LAST tween in the sequence to trigger the function. Like so:

TweenLite.to(mc1, 2, {x:100});
TweenLite.to(mc1, 1, {y:100, delay:2, overwrite:false});
TweenLite.to(mc1, 3, {x:300, delay:3, overwrite:false, onComplete:onFinish});

function onFinish():void {
trace(”The sequence has finished!”);
}

Or you could use the TweenLite.delayedCall() to call a function after a set amount of time (when you know the tweens will be finished).
Aaron said,

on December 3rd, 2007 at 3:33 pm

Just wondering about bezier tweens. I cant seem to find any information about how to do it or even if they are supported. but everything else seems great and i use tween lite for pretty much everything i do now.

thanks
Pete said,

on December 5th, 2007 at 11:26 am

I’m suspicious as to why this is so sweetly put together! ;) Great work, thanks for sharing.
jack said,

on December 5th, 2007 at 3:08 pm

Aaron, TweenLite doesn’t support bezier tweens at this point. One of the primary goals of the class is to keep it extremely lightweight, so I have to protect the file size diligently. But I just released TweenMax which does include that feature (and many more). check it out at http://www.TweenMax.com.
sean said,

on December 14th, 2007 at 5:25 pm

I’m new to tweenlite and have yet to play with it (I will when I get some time), but was wondering if with tweenlite you still need to worry about garbage collection like you do with built-in AS3 tween class or if you put something in to handle this.
Thanks
jack said,

on December 14th, 2007 at 5:49 pm

Sean, there’s no need to worry about garbage collection. It’s all built into the class. Just tween away to your heart’s content. Check out the speed test I whipped together and crank up the number of tweens - you should see that it scales very well and doesn’t bog down after a while (which you’d expect if there were garbage collection issues).
kneural said,

on December 18th, 2007 at 12:36 pm

hi,

how do i go about using Penner’s equations use with TweenLite?
Matthew Wallace said,

on December 18th, 2007 at 1:28 pm

Dude,

Thanks so much for this code. I use it on all my projects. I was one that used the Fuse Kit all the time but started doing all my projects in AS3 and this saves the day and works way better.

thanks
jack said,

on December 19th, 2007 at 1:04 am

kneural, Penner’s equations will work great in AS2 (download them at http://robertpenner.com/easing/) where you’d just import them and plug one into the ease property like:

import com.robertpenner.easing.*;
TweenLite.to(my_mc, 3, {_x:100, _y:200, ease:Elastic.easeOut});

For AS3, most (if not all) are now bundled with Flash CS3. Some are in the fl.motion.easing package and others are in the fl.transitions.easing package. So the above example in AS3 would look like:

import fl.motion.easing.*;
TweenLite.to(my_mc, 3, {x:100, y:200, ease:Elastic.easeOut});

(See my interactive sample SWF above and select different easing equations to see the code you’d need to write)
kneural said,

on December 21st, 2007 at 12:15 am

got it!, thank you so much jack! TweenLite is amazing and makes things so much easier. esp with. TweenLite.from and the “” relative values. saves me so much more time and brain power when writing code. Its light-weightness is just what i need!

Your the best!
Pierce said,

on January 5th, 2008 at 4:05 pm

Jack,

Thanks for the great work; it’s been a life- and project-saver.
Scott Gibson said,

on January 15th, 2008 at 4:18 pm

Just wanted to say that you have made my life so much easier - thanks so much for working so hard on it. Now if you can just apply this simplistic logic to textfield creation and formatting… or maybe a component library…
kennethkawamoto said,

on January 16th, 2008 at 8:19 am

Jack,

Thank you for fixing the #1010 error quickly. With the version 5.87 Flash IDE does not complain any longer.

And thanks for sharing the great Classes!
Jeroen said,

on January 21st, 2008 at 6:07 pm

Jack,

I came across your class while searching around for fixes for the standard Tween class’s! It was a big relief to implement your class! Everything was going so much faster! I really like it and I certainly will use it in other projects too!

I’ve used it for a school-project. This is my first Flash-based website actually. Most of the site is self-study. I’m not a Flash pro (yet) :D I like the project, but I want to move on to bigger/better things!

Annyways, you can take a look when clicking my name, it’s not perfect, but I’m quite happy with it, knowing it was only three months ago that I used Flash for the first time!

Thanks for you great work! I’ve given it further to some friends from school, they were really exited! :)

Jeroen.
Justin said,

on January 22nd, 2008 at 1:53 pm

Bless your heart Jack.

I think this might offer everything I need. I especially like being able to add a delay before starting tweens, and it’s also great to see that this offers built in garbage collection so I don’t have to push my tweens to an array and then clear out the array every time.
Matthew said,

on January 29th, 2008 at 9:39 pm

Jack, this is absolutely fantastic, just did some tests of my own, TweenLite as3 is even getting along really well with Papervision3D.

Would you ever consider implementing bezier functionality? Or adding an extended class that supports it? It’s the only reason we would have to need tweener over TweenLite now.
jack said,

on January 30th, 2008 at 11:23 am

Yep, Matthew, wish granted. Bezier tweening is now available in TweenMax :-)
http://www.TweenMax.com
David said,

on February 11th, 2008 at 9:05 pm

I’m glad I found this tweening engine on google, I am new to actionscript and this makes things easy for me, thanks for all your hard work. I wanted to ask about tweening many items in a row. I have 6 movieclips that I tween one right after the other. After the tween completes, am I supposed to remove the tween from memory somehow to make upcoming events run smooth? Like my_mc = null; or something?
jack said,

on February 11th, 2008 at 11:51 pm

Nope, David, you don’t need to worry about memory management or “garbage collection” tasks with TweenLite. It handles it all for you. Once a tween has finished (actually, within about 2 seconds), it’ll delete itself. Tween with reckless abandon. Go crazy.
ashim said,

on February 20th, 2008 at 11:25 pm

Jack, this is absolutely brilliant. I even feel like going over old project to shift from my earlier engine. Wish I could convince clients to pay me for it.
I was wondering however, how hard it would be to extends this to allow pause and resume of Tweens. Haven’t started looking through your code yet as I’m really busy and more than a little scared to try. But maybe there was a reason you haven’t built this in.
Cheers, and thank you very much.
jack said,

on February 21st, 2008 at 1:30 am

Well, Ashim, I’ve got good news and bad news for you…

First the bad news: Since one of my top priorities is keeping file size down and speed up, I don’t plan to add pause/resume functionality to TweenLite. A lot of agencies and developers have standardized on TweenLite because it is very lightweight and nimble, so I feel an obligation to diligently guard the file size. Many other tweening engines have suffered from “feature bloat” over time and I’m trying to avoid that.

Now for the good news: TweenMax is exactly what you need. It’s available now at http://www.TweenMax.com

Same syntax, same core. Just a bunch of extra features like bezier tweening, pause/resume, isTweening(myObject), sequencing, and getTweensOf(myObject).
Ive said,

on February 26th, 2008 at 12:40 pm

Great Job! I like TweenLite full hearted and it helps me a lot in craeting a AS3 game! It tooks me 10 mins to read and understand before I make my object moves!!

Thanks for this great engine!! Keep the good work!
Daniel said,

on March 4th, 2008 at 10:22 am

is it possible to only put 50% on the tint so that the whole object doesnt change colour?
thanks
jack said,

on March 13th, 2008 at 5:35 pm

Daniel, TweenLite doesn’t tint to percents, but there are a few options you have:

1) Use TweenFilterLite to colorize it (using the ColorMatrixFilter). See the interactive sample at http://www.tweenfilterlite.com for more info. This can be a really cool effect, and it does allow for various percents (amount).

2) Sign up for Club GreenSock and to get the bonus 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 at http://blog.greensock.com/club/
AmerSoft said,

on March 17th, 2008 at 12:39 am

Do you know what the loveliest thing is for me? (Beside its great features, free one)?
It is that you keep developing both AS2 & AS3 versions for both TweenLite , TweenFilterLite. This makes me depend on the same amazing twining class in both cases whether I want to develop a AS2 or AS3 project…

Thank you , you are live saver.
Antonio Lea said,

on March 18th, 2008 at 8:16 pm

This is extremely useful. I really appreciate for making this available to public.
felixz said,

on March 21st, 2008 at 4:09 am

when applying this code, nothing happens…
this.soundChannel=this.sound.play();
TweenLite.from(this.soundChannel,2.5,{volume:0});
jack said,

on March 21st, 2008 at 11:06 am

felixz, I’m not exactly sure what your “this.sound” refers to, but I tried this and it worked perfectly:

var snd = new Sound();
snd.load(new URLRequest(”myMusic.mp3″));
this.soundChannel = this.snd.play();
TweenLite.from(this.soundChannel, 5, {volume:0});

Keep in mind, though, that this was a local test and I didn’t add any code that would wait to start the tween until the sound loaded (if you try this over a web connection, there will be some lag time in the MP3 load, and if you start the tween right away it might finish before the sound even loaded)
anoxamoon said,

on March 26th, 2008 at 2:34 am

TWEENLITE is the best thing that happened to me this year!

I JUST LOVE it…. I can’t get enough of it. I am making effects that would’ve been rendered impossible using other tween engines!
MadTea said,

on March 28th, 2008 at 6:34 am

Heya!

Just wanted to pop by and thank you for making my life easier. Tweenlite has been with me for a bit over 4 months now, and I’ve loved every second of time spent with its smooth algorithmic self. It makes me wobbly, but in a good way. ;)

So keep up the good work, it is well appreciated!

Cheers
MadTea
Andrew Merskin said,

on March 28th, 2008 at 1:02 pm

Hey!

I had a quick question about killing tweens.

My problem is, I have TweenLite tweens in my ROLL_OVER, ROLL_OUT, and CLICK events. When I click on my object, it plays the tween inside of my CLICK handler, which has overwrite set to false. When I roll out of my object, the CLICK tween gets overwritten anyway.

I don’t have overwrite: false set on the ROLL_OVER, and ROLL_OUT tweens because I want them to overwrite each other when I roll over or roll out of the object, but I don’t want them overwriting my CLICK tween ever.

What can I do?

Thanks,
Andy
jack said,

on March 31st, 2008 at 5:08 pm

Yeah, Andrew, that’s a unique challenge. Not impossible to overcome, though. You can selectively remove tweens with the complete() or removeTween() methods. You’d just need to keep track of your TweenLite instances to know which ones to delete. For example, maybe you store the ROLL_OVER and ROLL_OUT tweens in a variable and then kill it when necessary, kinda like:

var rollTween:TweenLite;
function onRollOver($e:MouseEvent):void {
TweenLite.removeTween(rollTween);
rollTween = TweenLite.to(my_mc, 1, {scaleX:1.2, overwrite:false});
}
function onRollOut($e:MouseEvent):void {
TweenLite.removeTween(rollTween);
rollTween = TweenLite.to(my_mc, 1, {scaleX:1, overwrite:false});
}
function onClick($e:MouseEvent):void {
TweenLite.to(my_mc, 1, {scaleX:2});
}
happyMan said,

on April 30th, 2008 at 6:06 am

wow. i was just starting to look at the liveDocs on the tween class with a heavy heart when i found this and my day got brighter. If i use this as much as i think i will i’ll be donating for sure. you just saved me a half days head scratching at least. thanks muchly.

The Pages

The Search

The Categories

The Associates

The Meta

TweenLite (AS3) - A Lightweight (3K) and FAST Tweening Engine

71 Responses to 'TweenLite (AS3) - A Lightweight (3K) and FAST Tweening Engine'

Leave a Reply