en en en nl en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en fr en nl en en fr en nl en en en en nl en en fr en nl en en en en en en en es nl en en en en nl en en en en nl en en en en nl en en en en nl en en en en nl en ca en en en en en en en en en en en en en en en en en en en kn en en en en en en en es en en en en en en en en en nl fr es en es kn en en en en en en en fr en en en en en en kn en en en en en en en fa en en en en fr en en en en en en en en en en kn en en en en en fa en en uk en en nl fr en en en en nl en en en kn en de fr en en en en en en en kn en en fr en en en en en en en ru en en kn en en en en en fa en en en en en
No Plugins - One of the great things about TweenLite is that you can activate plugins in order to add features (like autoAlpha, tint, blurFilter, etc.). TweenNano, however, doesn't work with plugins.
Incompatible with TimelineLite and TimelineMax - Complex sequencing and management of groups of tweens is much easier with TimelineLite and TimelineMax, but TweenNano instances cannot be inserted into TimelineLite or TimelineMax instances.
Limited overwrite modes - By default, TweenNano doesn't overwrite any tweens but you can pass overwrite:"all" in the vars parameter to have it kill all tweens of the same target immediately. TweenLite, however, offers much more robust overwrite management, recognizing advanced modes like "auto" (which only overwrites individual tweening properties that overlap), "concurrent", "allOnStart", and "preexisting". See TweenLite's documentation for details.
Fewer methods and properties TweenNano instances aren't meant to be altered on-the-fly, so they don't have methods like pause(), resume(), reverse(), seek(), restart(), etc. The essentials are covered, though, like to(), from(), delayedCall(), killTweensOf(), and kill().
The most common type of tween is a to() tween which allows you to define the destination values:
The above code will tween myObject.x from whatever it currently is to 100 and myObject.y property to 200 over the course of 2 seconds. Notice the x and y values are defined inside a generic object (between curly braces). Put as many properties there as you want.
The target can also be an array of objects. For example, the following tween will tween the alpha property to 0.5 and y property to 100 for obj1, obj2, and obj3:
TweenNano.to([obj1, obj2, obj3], 1, {alpha:0.5, y:100});
You can also use a from() tween if you want to define the starting values instead of the ending values so that the target tweens from the defined values to wherever they currently are.
Although the to() and from() static methods are popular because they're quick and can avoid some garbage collection hassles, you can also use the more object-oriented syntax like this:
var tween = new TweenNano(myObject, 2, {x:100, y:200});
Typically the vars parameter is used to define ending values for tweening properties of the target (or beginning values for from() tweens) like {x:100, y:200, alpha:0}, but the following optional special properties serve other purposes:
delay : Number - Amount of delay in seconds (or frames for frames-based tweens) before the tween should begin.
ease : Ease (or Function) - You can choose from various eases to control the rate of change during the animation, giving it a specific "feel". For example, ElasticOut.ease or StrongInOut.ease. TweenNano works with not only the easing equations in the com.greensock.easing package, but also standard easing equation that uses the typical 4 parameters (time, start, change, duration) like Adobe's fl.motion.easing eases. The default is QuadOut.ease. For linear animation, use the GreenSock Linear.ease ease.
onComplete : Function - A function that should be called when the tween has completed
onCompleteParams : Array - An Array of parameters to pass the onComplete function. For example, TweenNano.to(mc, 1, {x:100, onComplete:myFunction, onCompleteParams:[mc, "param2"]});
useFrames : Boolean - If useFrames is true, the tweens's timing will be based on frames instead of seconds. This causes both its duration and delay to be based on frames.
immediateRender : Boolean - Normally when you create a tween, it begins rendering on the very next frame (update cycle) unless you specify a delay. However, if you prefer to force the tween to render immediately when it is created, set immediateRender to true. Or to prevent a from() from rendering immediately, set immediateRender to false.
onUpdate : Function - A function that should be called every time the tween updates (on every frame while the tween is active)
onUpdateParams : Array - An Array of parameters to pass the onUpdate function. For example, TweenNano.to(mc, 1, {x:100, onUpdate:myFunction, onUpdateParams:[mc, "param2"]});
overwrite : String - Controls how (and if) other tweens of the same target are overwritten. By default, no tweens are overwritten, but if you'd like to immediately overwrite other tweens of the same target, use overwrite:"all"
The base TweenNano class adds about 2k to your Flash file.
Passing values as Strings and a preceding "+=" or "-=" will make the tween relative to the current value. For example, if you do TweenNano.to(mc, 2, {x:"-=20"}); it'll tween mc.x to the left 20 pixels. {x:"+=20"} would move it to the right.
You can change the TweenNano.defaultEase if you prefer something other than QuadOut.ease.
Kill all tweens of a particular object anytime with TweenNano.killTweensOf(myObject);
You can kill all delayedCalls to a particular function using TweenNano.killTweensOf(myFunction);
Use the TweenNano.from() method to animate things into place. For example, if you have things set up on the stage in the spot where they should end up, and you just want to animate them into place, you can pass in the beginning x and/or y and/or alpha (or whatever properties you want).
If you find this class useful, please consider joining Club GreenSock which not only helps to sustain ongoing development, but also gets you bonus plugins, classes and other benefits that are ONLY available to members. Learn more at http://www.greensock.com/club/
Copyright 2008-2013, GreenSock. All rights reserved. This work is subject to the terms in http://www.greensock.com/terms_of_use.html or for Club GreenSock members, the software agreement that was issued with the membership.
[static] Provides An easy way to change the default easing equation.
Target object whose properties this tween affects.
[static] The object that dispatches a "tick" event each time the engine updates, making it easy for you to add your own listener(s) to run custom logic after each update (great for game developers).
Stores variables (things like "alpha", "y" or whatever we're tweening, as well as special properties like "onComplete").
delayedCall(delay:Number, callback:Function, params:Array = null, useFrames:Boolean = false):TweenNano
[static] Provides a simple way to call a function after a set amount of time (or frames).
[static] Static method for creating a TweenNano instance that tweens backwards - you define the BEGINNING values and the current values are used as the destination values which is great for doing things like animating objects onto the screen because you can set them up initially the way you want them to look at the end of the tween and then animate in from elsewhere.
Kills the tween, stopping it immediately.
[static] Kills all the tweens of a particular object or the delayedCalls to a particular function.
[static] Static method for creating a TweenNano instance that animates to the specified destination values (from the current values).
public static var defaultEase:Object
Provides An easy way to change the default easing equation. Choose from any of the GreenSock eases in the com.greensock.easing package or any standard easing function like the ones in Adobe's fl.motion.easing package.
The default value is QuadOut.ease.
Target object whose properties this tween affects. This can be ANY object or even an array.
public static var ticker:Shape
The object that dispatches a "tick" event each time the engine updates, making it easy for you to add your own listener(s) to run custom logic after each update (great for game developers). Add as many listeners as you want. The basic syntax is the same for all versions (AS2, AS3, and Javascript):
Basic example (AS2, AS3, and Javascript):
//add listener TweenNano.ticker.addEventListener("tick", myFunction); function myFunction(event) { //executes on every tick after the core engine updates } //to remove the listener later... TweenNano.ticker.removeEventListener("tick", myFunction);
Due to differences in the core languages (and to maximize efficiency), the advanced syntax is slightly different for the AS3 version compared to AS2 and Javascript. The parameters beyond the first 2 in the addEventListener() method are outlined below:
addEventListener(type, callback, scope, useParam, priority)
type : String - type of listener, should always be "tick"
callback : Function - the function to call when the event occurs
scope : Object - binds the scope to a particular object (scope is basically what "this" refers to in your function). This can be very useful in Javascript and AS2 because scope isn't generally maintained.
useParam : Boolean - if true, an event object will be generated and fed to the callback each time the event occurs. The event is a generic object and has two properties: type (always "tick") and target which refers to the ticker instance. The default for useParam is false because it improves performance.
priority : Integer - influences the order in which the listeners are called. Listeners with lower priorities are called after ones with higher priorities.
Advanced example (Javascript and AS2):
//add listener that requests an event object parameter, binds scope to the current scope (this), and sets priority to 1 so that it is called before any other listeners that had a priority lower than 1... TweenNano.ticker.addEventListener("tick", myFunction, this, true, 1); function myFunction(event) { //executes on every tick after the core engine updates } //to remove the listener later... TweenNano.ticker.removeEventListener("tick", myFunction);
The AS3 version uses the standard EventDispatcher.addEventListener() syntax which basically allows you to define a priority and whether or not to use weak references (see Adobe's docs for details).
Advanced example [AS3 only]:
import flash.events.Event; //add listener with weak reference (standard syntax - notice the 5th parameter is true) TweenNano.ticker.addEventListener("tick", myFunction, false, 0, true); function myFunction(event:Event):void { //executes on every tick after the core engine updates } //to remove the listener later... TweenNano.ticker.removeEventListener("tick", myFunction);
Stores variables (things like "alpha", "y" or whatever we're tweening, as well as special properties like "onComplete").
public function TweenNano(target:Object, duration:Number, vars:Object)
target:Object — Target object (or array of objects) whose properties this tween affects
duration:Number — Duration in seconds (or frames if useFrames:true is set in the vars parameter)
vars:Object — An object defining the end value for each property that should be tweened as well as any special properties like onComplete, ease, etc. For example, to tween mc.x to 100 and mc.y to 200 and then call myFunction, do this: new TweenNano(mc, 1, {x:100, y:200, onComplete:myFunction}).
public static function delayedCall(delay:Number, callback:Function, params:Array = null, useFrames:Boolean = false):TweenNano
Provides a simple way to call a function after a set amount of time (or frames). You can optionally pass any number of parameters to the function too.
Javascript and AS2 note: - Due to the way Javascript and AS2 don't maintain scope (what "this" refers to, or the context) in function calls, it can be useful to define the scope specifically. Therefore, in the Javascript and AS2 versions the 4th parameter is scope, bumping useFrames back to the 5th parameter:
TweenNano.delayedCall(delay, callback, params, scope, useFrames) [Javascript and AS2 only]
//calls myFunction after 1 second and passes 2 parameters: TweenNano.delayedCall(1, myFunction, ["param1", 2]); function myFunction(param1, param2) { //do stuff }
delay:Number — Delay in seconds (or frames if useFrames is true) before the function should be called
callback:Function — Function to call
params:Array (default = null) — An Array of parameters to pass the function (optional).
useFrames:Boolean (default = false) — If the delay should be measured in frames instead of seconds, set useFrames to true (default is false)
TweenNano — TweenNano instance
public static function from(target:Object, duration:Number, vars:Object):TweenNano
Static method for creating a TweenNano instance that tweens backwards - you define the BEGINNING values and the current values are used as the destination values which is great for doing things like animating objects onto the screen because you can set them up initially the way you want them to look at the end of the tween and then animate in from elsewhere.
NOTE: By default, immediateRender is true in from() tweens, meaning that they immediately render their starting state regardless of any delay that is specified. You can override this behavior by passing immediateRender:false in the vars parameter so that it will wait to render until the tween actually begins. To illustrate the default behavior, the following code will immediately set the alpha of mc to 0 and then wait 2 seconds before tweening the alpha back to 1 over the course of 1.5 seconds:
TweenNano.from(mc, 1.5, {alpha:0, delay:2});
Since the target parameter can also be an array of objects, the following code will tween the alpha property of mc1, mc2, and mc3 from a value of 0 simultaneously:
TweenNano.from([mc1, mc2, mc3], 1.5, {alpha:0});
Even though 3 objects are animating, there is still only one tween created.
For simple sequencing, you can use the delay special property (like TweenNano.from(mc, 1, {alpha:0, delay:0.5})), but it is highly recommended that you consider using TimelineLite (or TimelineMax) for all but the simplest sequencing tasks. It has an identical from() method that allows you to append tweens one-after-the-other and then control the entire sequence as a whole. You can even have the tweens overlap as much as you want.
target:Object — Target object (or array of objects) whose properties this tween affects.
duration:Number — Duration in seconds (or frames if useFrames:true is set in the vars parameter)
vars:Object — An object defining the starting value for each property that should be tweened as well as any special properties like onComplete, ease, etc. For example, to tween mc.x from 100 and mc.y from 200 and then call myFunction, do this: TweenNano.from(mc, 1, {x:100, y:200, onComplete:myFunction});
TweenNano — TweenNano instance
public function kill(target:* = null):void
Kills the tween, stopping it immediately. You can optionally define a particular target to isolate (or an array of targets) which is only useful in tweens whose target is an array. For example, let's say we have a tween like this:
var tween = TweenNan.to([mc1, mc2, mc3], 2, {x:100});
Later, we could kill only the mc2 portion of the tween like this:
To kill the entire tween, simply omit the target parameter, like tween.kill()
target:* (default = null) — [optional] To kill only aspects of the animation related to a particular target (or targets), reference it here. It can be an array or a single object. For example, to kill only parts having to do with myObject, do kill(myObject) or to kill only parts having to do with myObject1 and myObject2, do kill([myObject1, myObject2]). If no target is defined, ALL targets will be affected.
public static function killTweensOf(target:Object):void
Kills all the tweens of a particular object or the delayedCalls to a particular function. If, for example, you want to kill all tweens of myObject, you'd do this:
To kill all the delayedCalls that were created like TweenNano.delayedCall(5, myFunction);, you can simply call TweenNano.killTweensOf(myFunction); because delayedCalls are simply tweens that have their target and onComplete set to the same function (as well as a delay of course).
killTweensOf() affects tweens that haven't begun yet too. If, for example, a tween of myObject has a delay of 5 seconds and TweenNano.killTweensOf(mc) is called 2 seconds after the tween was created, it will still be killed even though it hasn't started yet.
target:Object — Object whose tweens should be killed immediately
public static function to(target:Object, duration:Number, vars:Object):TweenNano
Static method for creating a TweenNano instance that animates to the specified destination values (from the current values). The following lines of code all produce identical results:
TweenNano.to(mc, 1, {x:100}); var myTween = new TweenNano(mc, 1, {x:100}); var myTween = TweenNano.to(mc, 1, {x:100});
Each line above will tween the "x" property of the mc object to a value of 100 over the coarse of 1 second. They each use a slightly different syntax, all of which are valid. If you don't need to store a reference of the tween, just use the static TweenNano.to( ) call.
Since the target parameter can also be an array of objects, the following code will tween the x property of mc1, mc2, and mc3 to a value of 100 simultaneously:
TweenNano.to([mc1, mc2, mc3], 1, {x:100});
Even though 3 objects are animating, there is still only one tween created.
For simple sequencing, you can use the delay special property (like TweenNano.to(mc, 1, {x:100, delay:0.5})), but it is highly recommended that you consider using TimelineLite (or TimelineMax) for all but the simplest sequencing tasks. It has an identical to() method that allows you to append tweens one-after-the-other and then control the entire sequence as a whole. You can even have the tweens overlap as much as you want.
target:Object — Target object (or array of objects) whose properties this tween affects.
duration:Number — Duration in seconds (or frames if useFrames:true is set in the vars parameter)
vars:Object — An object defining the end value for each property that should be tweened as well as any special properties like onComplete, ease, etc. For example, to tween mc.x to 100 and mc.y to 200 and then call myFunction, do this: TweenNano.to(mc, 1, {x:100, y:200, onComplete:myFunction});