TweenLite (AS2) – A Lightweight, FAST Tweening Engine
 |
Download AS3 | Download AS2 |  |
- Version: 10.09, Updated 2/10/2009
- Compatibility: Flash Player 6 and later (ActionScript 2) (click here for the AS3 version)
- File Size added to SWF: About 3kb (base), or 5kb with default plugins
Join Club GreenSock to get bonus plugins, updates, and more
v11 Beta available - There are some very exciting things happening with the upcoming version 11 of the platform, including new sequencing tools (TimelineLite/Max) and a useFrames feature. I'd love to get your feedback and suggestions before officially launching it. Get details and download the code here.
RECENT VERSION HIGHLIGHTS
This is a big update. Please watch the "what's new in v10?" video and get more details on the official announcement page.
- Plugin architecture - Most special properties (like "tint", "blurFilter", "frame", "bezier", etc.) are separated into optional "plugins" that can be activated (or not). This makes it possible to add only the features you need, minimizing file size and maximizing performance. Author your own plugins to handle whatever special properties you want too! This adds a whole new level of flexibility. And don't worry - all the necessary plugins necessary for backwards compatibility are activated inside the class by default.
- TweenFilterLite retired - With the new plugin architecture, you can activate the filter plugins in TweenLite or TweenMax, so TweenFilterLite is obsolete.
- New "frameLabel" feature - Tween to a frame label on the timeline of any MovieClip
- New "remove", "index", and "addFilter" properties for filter tweens - Allows you to remove a filter when the tween completes, define a particular index number in the target MovieClip's filters Array, and/or force TweenLite/Max to create a new filter even if there's a filter of the same kind already applied to a MovieClip.
- New "transformAroundCenter" feature - scale, rotate, or move a MovieClip using its center as the origin regardless of where the actual registration point is. (membership benefit of Club GreenSock)
- New "transformAroundPoint" feature - scale, rotate, or move a MovieClip using any point as the origin regardless of where the object's registration point is. (membership benefit of Club GreenSock)
- New "colorTransform" feature - Adds simple tweening of a MovieClip's "exposure", "brightness", or "tintAmount" as well as advanced colorTransform properties like redMultiplier, redOffset, greenMultiplier, etc.
- Changed "shortRotation" syntax - Previously, shortRotation could only affect the "rotation" property of an object, not 3D rotations like rotationX, rotationY, and rotationZ. Now [after activating the shortRotation plugin] you can pass an object with any number of properties that should be affected, like TweenLite.to(mc, 2, {shortRotation:{rotationX:-170, rotationY:100}}).
- Speed improvements - Up to 40% faster under heavy loads!
DESCRIPTION
TweenLite is an extremely lightweight, FAST, and flexible tweening engine that serves as the core of the GreenSock tweening platform. There are plenty of other tweening engines out there to choose from, so here's why you might want to consider TweenLite:
- SPEED - I'm not aware of any popular tweening engine with a similar feature set that's as fast as TweenLite. See the speed comparisons yourself.
- Feature set - In addition to tweening ANY numeric property of ANY object, TweenLite can tween filters, hex colors, volume, tint, saturation, contrast, frames, and even do bezier tweening, plus LOTS more. TweenMax extends TweenLite and adds even more capabilities like pause/resume, rounding, AS3 event listeners, timeScale, and more. Overwrite management is an important consideration for a tweening engine as well which is another area where the GreenSock tweening platform shines. You have options for AUTO overwriting or you can manually define how each tween will handle overlapping tweens of the same object.
- Expandability - With its new plugin architecture, you can activate as many (or as few) features as your project requires. Or write your own plugin if you need a feature that's unavailable. Minimize bloat, and maximize performance.
- Management features - TweenGroup makes it surprisingly simple to create complex sequences and groups of TweenLite/Max tweens that you can pause(), resume(), restart(), or reverse(). You can even tween a TweenGroup's "progress" property to fastforward or rewind the entire group/sequence.
- Ease of use - Designers and Developers alike rave about how intuitive the GreenSock tweening platform is.
- Updates - Frequent updates and feature additions make the GreenSock tweening platform reliable and robust.
- AS2 and AS3 - Most other engines are only developed for AS2 or AS3 but not both.
Other links: AS3 Version | Speed Comparison | TweenMax | Forums | TweenGroup | CustomEase
BASIC PROPERTY TWEENING INTERACTIVE DEMO
PLUGIN EXPLORER
USAGE
Every call to TweenLite.to() or TweenLite.from() returns a TweenLite instance which you can optionally keep track of in order to have more control. Here are a few examples of how to create instances:
-
import gs.*;
-
TweenLite.to(mc, 1, {x:200});
-
var myTween:TweenLite = TweenLite.to(mc, 1, {x:200});
-
var myTween:TweenLite = new TweenLite(mc, 1, {x:200});
INSTANCE METHODS
- Description: Constructor. Properties are tweened from whatever they are at the time the tween begins to whatever you define in the variables parameter. (unless you use "runBackwards:true" which is the same as using TweenLite.from())
- Parameters:
- target: Target object whose properties we're tweening. This can be ANY object, not just DisplayObjects/MovieClips
- duration: Duration (in seconds) of the tween
- vars: 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. To tween the _xscale and _yscale to 50, you'd do TweenLite.to(mc, 1, {_xscale:50, _yscale:50}); There are also some "special properties" that you can include in your vars object which perform special tasks, as described below:
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, gs.easing.Elastic.easeOut. The Default is a regular easeOut. To build a custom ease, check out the GreenSock CustomEase Builder tool.
- 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.
- 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 - Defines the scope of the onStart call
- 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
- onUpdateScope : Object - Defines the scope of the onUpdate call
- 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
- onCompleteScope : Object - Defines the scope of the onComplete call
- renderOnStart : Boolean - If you're using TweenLite.from() (or runBackwards:true) 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.
- runBackwards : Boolean - Flips the start and end values in a tween. The from() method automatically sets this value to true.
- overwrite : int - Controls how other tweens of the same object are handled when this tween is created. You can set a default value to be used with ALL tweens in your SWF using the OverwriteManager's init() method, or control them individually with this overwrite property. Here are the options:
- 0 (NONE): No tweens are overwritten. This is the fastest mode, but you need to be careful not to create any tweens with overlapping properties, otherwise they'll conflict with each other.
- 1 (ALL): (this is the default unless OverwriteManager.init() has been called) All tweens of the same object are completely overwritten immediately when the tween is created.
TweenLite.to(mc, 1, {_x:100, _y:200});
TweenLite.to(mc, 1, {_x:300, delay:2, overwrite:1}); //immediately overwrites the previous tween - 2 (AUTO): (used by default if OverwriteManager.init() has been called) Searches for and overwrites only individual overlapping properties in tweens that are active when the tween begins.
TweenLite.to(mc, 1, {_x:100, _y:200});
TweenLite.to(mc, 1, {_x:300, overwrite:2}); //only overwrites the "_x" property in the previous tween - 3 (CONCURRENT): Overwrites all tweens of the same object that are active when the tween begins.
TweenLite.to(mc, 1, {_x:100, _y:200});
TweenLite.to(mc, 1, {_x:300, delay:2, overwrite:3}); //does NOT overwrite the previous tween because the first tween will have finished by the time this one begins.
- Description: forces the tween to complete immediately.
STATIC METHODS
- Description: Creates a new TweenLite instance
Actionscript:
-
var myTween:TweenLite = new TweenLite(mc, 1, {_x:300});
-
TweenLite.to(mc, 1, {_x:300}); //works exactly the same as the previous line
-
- Parameters: Same as Constructor (see above)
- 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)
- 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:
- delay: Number of seconds before the function should be called.
- onComplete: The function to call (do not add parenthesis "()" after the name!)
- onCompleteParams: [optional] An Array of parameters to pass the onComplete function when it's called.
- onCompleteScope: [optional] Defines the scope of the function call (only useful in AS2).
- Description: Provides an easy way to kill all tweens of a particular Object. You can optionally force it to immediately complete (which will also call the onComplete function if you defined one)
- Parameters:
- target: All tweens of this Object will be killed.
- 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).
- Description: Kills all delayed calls to a particular function (ones that were created using the TweenLite.delayedCall() method).
- Parameters:
- function: All delayed calls to this function will be killed.
- Description: Kills a single tween instance.
- Parameters:
- tween: The TweenLite instance that you'd like to kill.
EXAMPLES
-
import gs.TweenLite;
-
-
TweenLite.to(clip_mc, 1.5, {_alpha:0.5, _x:120, volume:0});
-
import gs.*;
-
import gs.easing.*;
-
-
TweenLite.to(clip_mc, 5, {_alpha:0.5, _x:120, ease:Back.easeOut, delay:2, onComplete:onFinishTween, onCompleteParams:[5, clip_mc]});
-
function onFinishTween(parameter1:Number, parameter2:MovieClip):void {
-
trace("The tween has finished! parameters: " + parameter1 + ", and " + parameter2);
-
}
-
import gs.*;
-
import gs.easing.*;
-
-
TweenLite.from(clip_mc, 2, {_y:"-100", ease:Elastic.easeOut});
FAQ
- Is the new version of TweenLite/Max backwards compatible?
The short answer is "yes", but I'd strongly encourage you to check out the "what's new in v10?" video on the official announcement page for details. - How do I activate extra plugins?
Check out the Plugin Explorer above. Not only does it provide interactive examples of each plugin, but it also writes the activation code for you and shows how many kb the plugins will cost. - 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 every time you import it. Flash is smart enough to embed it once and all the other import statements just act as a "pointer" to the embedded Class. - Why do my tweens keep getting overwritten? How can I prevent that?
By default, when you create a tween, TweenLite looks for all existing tweens of the same object and kills them immediately. However, you can add advanced management of overwriting (including AUTO overwriting of only overlapping properties) using the OverwriteManager class. Or pass "overwrite:false" in your tween's vars object to ignore overwriting completely (be careful). - Can I set up a sequence of tweens so that they occur one after the other?
Of course! That's precisely what TweenGroup is for. But if file size is a huge concern, you could just use the delay property (make sure you set the "overwrite" special property to 0, 2, or 3). 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:Actionscript:-
import gs.TweenLite;
-
TweenLite.to(clip_mc, 2, {tint:0xFF0000});
-
TweenLite.to(clip_mc, 1, {_y:300, delay:2, overwrite:0});
-
- 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 TweenMax split into 2 classes instead of building all the functionality into one class?
- File size. The majority of tweening doesn't require the extra features in TweenMax like pause()/resume(), reverse(), setDestination(), timeScale, etc. so TweenLite is perfectly sufficient. TweenLite prioritizes small file size whereas TweenMax prioritizes a rich feature set.
- Speed. TweenLite is slightly faster than TweenMax because it requires less code, although you'd probably never notice any difference unless you're tweening multiple thousands of instances. See the speed test.
- Do I have to purchase a license to use this code? Can I use it for commercial purposes?
You may use the code at no charge in commercial or non-commercial web sites, games, components, applications, and other software as long as end users are not charged a fee of any kind to use your product or gain access to it. If your client pays you a one-time fee to create the site/product, that's perfectly fine and qualifies under the "no charge" license. If end users are charged a usage/access/license fee, please simply sign up for a corporate Club GreenSock membership which comes with a special commercial license granting you permission to do so. See http://blog.greensock.com/club/ for details. Club GreenSock members get some bonus plugins/classes, update notifications, and more. Your donations keep this project going. Please see the licensing page for details on licensing.
Need Help?
Feel free to post your question on the forums. You'll increase your chances of getting a prompt answer if you provide a brief explanation and include a simplified FLA file (and any class files) that clearly demonstrates the problem.
Copyright 2009, GreenSock, Inc.
"NO CHARGE" NON-EXCLUSIVE SOFTWARE LICENSE AGREEMENT
-----------------------------------------------------------------------------
PLAIN ENGLISH SUMMARY:
- You may use the code at no charge in commercial or non-commercial web sites, games, components, applications, and other software as long as end users are not charged a fee of any kind to use your product or gain access to it. If your client pays you a one-time fee to create the site/product, that's perfectly fine and qualifies under the "no charge" license. If end users are charged a usage/access/license fee, please sign up for a corporate Club GreenSock membership which comes with a special commercial license granting you permission to do so. See http://blog.greensock.com/club/ for details.
- Use at your own risk. I offer no warranties.
- Please respect the copyright.
-----------------------------------------------------------------------------
LEGALESE:
This is a legal agreement between you (either an individual or a single entity) and GreenSock, Inc. ("GREENSOCK") for the proprietary GreenSock ActionScript code known as TweenLite, TweenMax, TweenGroup, OverwriteManager, and other code that is freely available for download at http://blog.greensock.com or http://www.greensock.com (this code and documentation, as well as any updates which may at GREENSOCK's sole discretion be provided to you from time to time, are referred to in this Agreement as "PROGRAM") By downloading, copying, or otherwise using the PROGRAM, you agree to the terms and conditions of this Agreement. If you do not agree to the terms and conditions of this Agreement, please do not download or use the PROGRAM.
I. LICENSE
A. Subject to the terms and conditions of this Agreement, GREENSOCK hereby grants you a non-exclusive, worldwide, non-transferable right to use the PROGRAM in web sites, games, applications, components and other software for which the end user is NOT charged any fees. If you would like to use the code in a commercially licensed software product for which end users are charged a fee (either for usage or access), simply sign up for a corporate Club GreenSock membership at http://blog.greensock.com/club/.
II. LIMITATION OF LICENSE AND RESTRICTIONS
A. You agree that you will not disclose, sell, rent, or license the PROGRAM's source code or any derivative works thereof to any third party without the prior written consent of GREENSOCK. Derivative works are defined as modifications that add substantive functionality to the PROGRAM and do not include bug fixes or other minor modifications required to operate the PROGRAM as originally intended. Distribution of the source code as part of your Work Product is acceptable so long as the recipients agree to the terms of this Agreement. You agree not to modify or delete GreenSock's existing copyright notice located in the source code.
B. You may use, duplicate, and distribute the compiled object code as embedded in a Work Product created by you, either for your own use or for distribution to a third party so long as end users of the Work Product are not charged a fee for usage. Please see http://blog.greensock.com/licensing/ for descriptions of Work Products that qualify for the "No Charge" license.
III. CONSIDERATION
A. The license rights granted to you under this Agreement are at no charge, but only in the following circumstances: If, either on your own behalf or on behalf of a third party, you incorporate the Software into a web site, software application, program or any component thereof (collectively, "Work Product"), which in the case of a web site, must be accessible to internet users without payment of a fee of any kind by a user, and in the case of a software application, program or component, neither you nor anyone to whom you distribute the Work Product charges a user a fee of any kind to use such Work Product or application, program or component into which such Work Product is embedded. The foregoing shall apply regardless of whether you are paid to create such Work Product.
B. In the event your intended use of the Software does not meet the criteria for the "no charge" license rights set forth in the immediately preceding paragraph, then you are not licensed to use the PROGRAM under this Agreement and must license the PROGRAM under GreenSock’s separate fee-based Software License Agreement which is granted to corporate Club GreenSock members (see http://blog.greensock.com/club/ for details).
IV. TITLE AND OWNERSHIP
A. The PROGRAM is licensed, not sold, and is protected by copyright laws and international treaty provisions. You acknowledge that no title to the intellectual property in the PROGRAM is transferred to you. You further acknowledge that title and full ownership rights to the PROGRAM, including all intellectual property rights therein, will remain the exclusive property of GreenSock and you will not acquire any rights to the PROGRAM except as expressly set forth in this Agreement. You agree that any copies of the PROGRAM you make will contain the same proprietary notices which appear on and in the PROGRAM.
V. DISCLAIMER OF WARRANTY AND LIMITATION OF LIABILITY
A. THE PROGRAM IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. GREENSOCK DOES NOT WARRANT THAT THE FUNCTIONS CONTAINED IN THE PROGRAM WILL MEET YOUR REQUIREMENTS OR THAT OPERATION WILL BE UNINTERRUPTED OR ERROR FREE. GREENSOCK shall not be liable for special, indirect, incidental, or consequential damages with respect to any claim on account of or arising from this Agreement or use of the PROGRAM, even if GREENSOCK has been or is hereafter advised of the possibility of such damages. Because some states do not allow certain exclusions or limitations on implied warranties or of liability for consequential or incidental damages, the above exclusions may not apply to you. In no event, however, will GREENSOCK be liable to you, under any theory of recovery, in an amount in excess of the license fee paid by you under this Agreement. Notwithstanding anything else in this agreement, you agree to indemnify GREENSOCK, its assignees, and licensees, and hold each of them harmless from and against any and all claims, demands, losses, damages, liabilities, costs, and expenses, including legal fees.
B. GREENSOCK may, at its sole discretion, provide support services related to the PROGRAM, but has no obligation to do so.
VI. TERMINATION
GreenSock may terminate this Agreement at any time if you fail to comply with the terms and conditions of this Agreement.
VII. MISCELLANEOUS
A. This Agreement shall be construed in accordance with the laws of the State of Illinois. Should you for any reason bring a claim, demand, or other action against GREENSOCK, its agents or employees, arising out of this Agreement or the PROGRAM licensed herein, you agree to bring said claim only in the Illinois Court of Claims.
B. THIS AGREEMENT REPRESENTS THE COMPLETE AND EXCLUSIVE STATEMENT OF THE AGREEMENT BETWEEN GREENSOCK AND YOU AND SUPERSEDES ALL PRIOR AGREEMENTS, PROPOSALS, REPRESENTATIONS AND OTHER COMMUNICATIONS, VERBAL OR WRITTEN, BETWEEN THEM WITH RESPECT TO USE OF THE PROGRAM. THIS AGREEMENT MAY BE MODIFIED ONLY WITH THE MUTUAL WRITTEN APPROVAL OF AUTHORIZED REPRESENTATIVES OF THE PARTIES.
C. The terms and conditions of this Agreement shall prevail notwithstanding any different, conflicting, or additional terms or conditions which may appear in any purchase order or other document submitted by you. You agree that such additional or inconsistent terms are deemed rejected by GREENSOCK.
D. GREENSOCK and you agree that any xerographically or electronically reproduced copy of this Agreement shall have the same legal force and effect as any copy bearing original signatures of the parties.
| I'd like to donate & get bonus classes, update notifications, SVN access, and more. |
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?
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.
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!
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
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});
}
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.
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.
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!
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);
}
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);
}
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!!!
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!
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
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.
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…
on September 12th, 2007 at 11:02 am
snowboardfoo, see a speed comparison for yourself at http://blog.greensock.com/tweening-speed-test/ – I think you’ll see that TweenLite is fastest, especially when you start to push it hard and throw a lot of tweens at it.
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!
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?
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.
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.
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.
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.
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
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!
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.
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.
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.
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);
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.
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
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.
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)});
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.
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).
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!
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?
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]);
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!
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?
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.
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. :)
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/
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!
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.
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?
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.
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?
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.
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 !
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.
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!
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.
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
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();
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. :/
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
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!
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.
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)});
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.
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 : -)