Package | com.greensock |
Class | public class TimelineMax |
Inheritance | TimelineMax TimelineLite SimpleTimeline TweenCore |
Implements | flash.events.IEventDispatcher |
currentProgress
property. For example, to skip to
the halfway point, set myTimeline.currentProgress = 0.5
.currentTime
, totalTime
, currentProgress
, or totalProgress
property to fastforward/rewind the timeline. You could
even attach a slider to one of these properties to give the user the ability to drag
forwards/backwards through the whole timeline.vars
object.timeScale
property. You can even tween
this property to gradually speed up or slow down the timeline.currentLabel
or find labels at various positions in the timeline
using getLabelAfter() and getLabelBefore()
import com.greensock.TweenLite;
import com.greensock.TweenMax;
import com.greensock.TimelineMax;
//create the timeline and add an onComplete call to myFunction when the timeline completes
var myTimeline:TimelineMax = new TimelineMax({onComplete:myFunction});
//add a tween
myTimeline.append(new TweenLite(mc, 1, {x:200, y:100}));
//add another tween at the end of the timeline (makes sequencing easy)
myTimeline.append(new TweenLite(mc, 0.5, {alpha:0}));
//repeat the entire timeline twice
myTimeline.repeat = 2;
//delay the repeat by 0.5 seconds each time.
myTimeline.repeatDelay = 0.5;
//pause the timeline (stop() works too)
myTimeline.pause();
//reverse it anytime...
myTimeline.reverse();
//Add a "spin" label 3-seconds into the timeline.
myTimeline.addLabel("spin", 3);
//insert a rotation tween at the "spin" label (you could also define the insert point as the time instead of a label)
myTimeline.insert(new TweenLite(mc, 2, {rotation:"360"}), "spin");
//go to the "spin" label and play the timeline from there...
myTimeline.gotoAndPlay("spin");
//call myCallbackwhen the "virtual playhead" travels past the 1.5-second point.
myTimeline.addCallback(myCallback, 1.5);
//add a tween to the beginning of the timeline, pushing all the other existing tweens back in time
myTimeline.prepend(new TweenMax(mc, 1, {tint:0xFF0000}));
//nest another TimelineMax inside your timeline...
var nestedTimeline:TimelineMax = new TimelineMax();
nestedTimeline.append(new TweenLite(mc2, 1, {x:200}));
myTimeline.append(nestedTimeline);
insertMultiple()
and appendMultiple()
provide some very powerful sequencing tools as well,
allowing you to add an Array of tweens/timelines and optionally align them with SEQUENCE
or START
modes, and even stagger them if you want. For example, to insert 3 tweens into the timeline, aligning their start times but
staggering them by 0.2 seconds,
myTimeline.insertMultiple([new TweenLite(mc, 1, {y:"100"}),
new TweenLite(mc2, 1, {x:120}),
new TweenLite(mc3, 1, {alpha:0.5})],
0,
TweenAlign.START,
0.2);
vars
object to do all the setup too, like:
var myTimeline:TimelineMax = new TimelineMax({tweens:[new TweenLite(mc1, 1, {y:"100"}), TweenMax.to(mc2, 1, {tint:0xFF0000})], align:TweenAlign.SEQUENCE, onComplete:myFunction, repeat:2, repeatDelay:1});
append()
, insert()
, and prepend()
methods to build your
sequence. But power users will likely appreciate the quick, compact way they can set up sequences now. AUTO
, but you can set it to whatever you want with OverwriteManager.init()
(see http://blog.greensock.com/overwritemanager/)Property | Defined by | ||
---|---|---|---|
autoRemoveChildren : Boolean If a timeline's autoRemoveChildren is true, its children will be removed and made eligible for garbage collection as soon as they complete.
| SimpleTimeline | ||
currentLabel : String [read-only] The closest label that is at or before the current time.
| TimelineMax | ||
currentProgress : Number
Value between 0 and 1 indicating the progress of the timeline according to its duration
where 0 is at the beginning, 0.5 is halfway finished, and 1 is finished.
| TimelineLite | ||
currentTime : Number [write-only]
| TimelineMax | ||
data : * Place to store any data you want.
| TweenCore | ||
delay : Number
Length of time in seconds (or frames for frames-based tweens/timelines) before the tween should begin.
| TweenCore | ||
duration : Number
Duration of the timeline in seconds (or frames for frames-based timelines) not including any repeats
or repeatDelays.
| TimelineLite | ||
paused : Boolean Indicates the paused state of the tween/timeline.
| TweenCore | ||
repeat : int Number of times that the timeline should repeat; -1 repeats indefinitely.
| TimelineMax | ||
repeatDelay : Number Amount of time in seconds (or frames for frames-based timelines) between repeats
| TimelineMax | ||
reversed : Boolean Indicates the reversed state of the tween/timeline.
| TweenCore | ||
startTime : Number Start time in seconds (or frames for frames-based tweens/timelines), according to its position on its parent timeline
| TweenCore | ||
timeline : SimpleTimeline
The parent timeline on which the tween/timeline is placed.
| TweenCore | ||
timeScale : Number Multiplier describing the speed of the timeline where 1 is normal speed, 0.5 is half-speed, 2 is double speed, etc.
| TimelineLite | ||
totalDuration : Number [read-only]
Duration of the timeline in seconds (or frames for frames-based timelines) including any repeats
or repeatDelays.
| TimelineMax | ||
totalProgress : Number
Value between 0 and 1 indicating the overall progress of the timeline according to its
totalDuration
where 0 is at the beginning, 0.5 is halfway finished, and 1 is finished. | TimelineMax | ||
totalTime : Number
Most recently rendered time (or frame for frames-based tweens/timelines) according to its
totalDuration . | TweenCore | ||
useFrames : Boolean
Indicates whether or not the timeline's timing mode is frames-based as opposed to time-based.
| TimelineLite | ||
vars : Object Stores variables (things like alpha, y or whatever we're tweening as well as special properties like "onComplete").
| TweenCore | ||
yoyo : Boolean
Works in conjunction with the repeat property, determining the behavior of each cycle; when
yoyo is true,
the timeline will go back and forth, appearing to reverse every other cycle (this has no affect on the reversed property though). | TimelineMax |
Method | Defined by | ||
---|---|---|---|
TimelineMax(vars:Object = null)
Constructor.
| TimelineMax | ||
addCallback(callback:Function, timeOrLabel:Array, params:* = null):TweenLite
If you want a function to be called at a particular time or label, use addCallback.
| TimelineMax | ||
addLabel(label:String, time:Number):void
Adds a label to the timeline, making it easy to mark important positions/times.
| TimelineLite | ||
Inserts a TweenLite, TweenMax, TimelineLite, or TimelineMax instance at the end of the timeline,
optionally offsetting its insertion point by a certain amount (to make it overlap with the end of
the timeline or leave a gap before its insertion point).
| TimelineLite | ||
appendMultiple(tweens:Array, offset:Number = 0, align:String = "normal", stagger:Number = 0):void
Appends multiple tweens/timelines at the end of the timeline at once, optionally offsetting the insertion point by a certain amount,
aligning them (as a sequence for example), and/or staggering their relative timing.
| TimelineLite | ||
clear(tweens:Array = null):void
Empties the timeline of all child tweens/timelines, or you can optionally pass an Array containing specific
tweens/timelines to remove.
| TimelineLite | ||
complete(skipRender:Boolean = false, suppressEvents:Boolean = false):void
Forces the timeline to completion.
| TimelineMax | ||
getActive(nested:Boolean = true, tweens:Boolean = true, timelines:Boolean = false):Array
Returns the tweens/timelines that are currently active in the timeline.
| TimelineMax | ||
getChildren(nested:Boolean = true, tweens:Boolean = true, timelines:Boolean = true, ignoreBeforeTime:Number = -9999999999):Array
Provides an easy way to get all of the tweens and/or timelines nested in this timeline (as an Array).
| TimelineLite | ||
getLabelAfter(time:Number):String
Returns the next label (if any) that occurs AFTER the time parameter.
| TimelineMax | ||
getLabelBefore(time:Number):String
Returns the previous label (if any) that occurs BEFORE the time parameter.
| TimelineMax | ||
getLabelTime(label:String):Number
Returns the time associated with a particular label.
| TimelineLite | ||
getTweensOf(target:Object, nested:Boolean = true):Array
Returns the tweens of a particular object that are inside this timeline.
| TimelineLite | ||
goto(timeOrLabel:*, suppressEvents:Boolean = true):void
Skips to a particular time, frame, or label without changing the paused state of the timeline
| TimelineLite | ||
gotoAndPlay(timeOrLabel:*, suppressEvents:Boolean = true):void
Skips to a particular time, frame, or label and plays the timeline forwards from there (unpausing it)
| TimelineLite | ||
gotoAndStop(timeOrLabel:*, suppressEvents:Boolean = true):void
Skips to a particular time, frame, or label and stops the timeline (pausing it)
| TimelineLite | ||
Inserts a TweenLite, TweenMax, TimelineLite, or TimelineMax instance into the timeline at a specific time, frame, or label.
| TimelineLite | ||
insertMultiple(tweens:Array, timeOrLabel:String = "0", align:Number = normal, stagger:* = 0):void
Inserts multiple tweens/timelines into the timeline at once, optionally aligning them (as a sequence for example)
and/or staggering the timing.
| TimelineLite | ||
invalidate():void
Clears any initialization data (like starting values in tweens) which can be useful if, for example,
you want to restart it without reverting to any previously recorded starting values.
| TimelineMax | ||
kill():void
Kills the tween/timeline, stopping it immediately.
| TweenCore | ||
killTweensOf(target:Object, nested:Boolean = true):Boolean
Kills tweens of a particular object.
| TimelineLite | ||
pause():void
Pauses the tween/timeline
| TweenCore | ||
play():void
Starts playing forward from the current position.
| TweenCore | ||
Inserts a TweenLite, TweenMax, TimelineLite, or TimelineMax instance at the beginning of the timeline,
pushing all existing tweens back in time to make room for the newly inserted one.
| TimelineLite | ||
prependMultiple(tweens:Array, align:String = "normal", stagger:Number = 0, adjustLabels:Boolean = false):void
Prepends multiple tweens/timelines to the beginning of the timeline at once, moving all existing children back to make
room, and optionally aligning the new children (as a sequence for example) and/or staggering the timing.
| TimelineLite | ||
Removes a TweenLite, TweenMax, TimelineLite, or TimelineMax instance from the timeline.
| TimelineLite | ||
removeCallback(callback:Function, timeOrLabel:* = null):Boolean
Removes a callback from a particular time or label.
| TimelineMax | ||
restart(includeDelay:Boolean = false, suppressEvents:Boolean = true):void
Restarts and begins playing forward.
| TweenCore | ||
resume():void
Starts playing from the current position without altering direction (forward or reversed).
| TweenCore | ||
reverse(forceResume:Boolean = true):void
Reverses smoothly, adjusting the startTime to avoid any skipping.
| TweenCore | ||
shiftChildren(amount:Number, adjustLabels:Boolean = false, ignoreBeforeTime:Number = 0):void
Shifts the startTime of the timeline's children by a certain amount and optionally adjusts labels too.
| TimelineLite | ||
stop():void
Pauses the timeline (same as pause() - added stop() for consistency with Flash's MovieClip.stop() functionality)
| TimelineLite | ||
Creates a linear tween that essentially scrubs the playhead to a particular time or label and then stops.
| TimelineMax |
currentLabel | property |
currentLabel:String
[read-only]The closest label that is at or before the current time.
Implementation public function get currentLabel():String
currentTime | property |
currentTime:Number
[write-only]Implementation
public function set currentTime(value:Number):void
repeat | property |
repeat:int
[read-write]Number of times that the timeline should repeat; -1 repeats indefinitely.
Implementation public function get repeat():int
public function set repeat(value:int):void
repeatDelay | property |
repeatDelay:Number
[read-write]Amount of time in seconds (or frames for frames-based timelines) between repeats
Implementation public function get repeatDelay():Number
public function set repeatDelay(value:Number):void
totalDuration | property |
totalDuration:Number
[read-only]Duration of the timeline in seconds (or frames for frames-based timelines) including any repeats or repeatDelays. "duration", by contrast, does NOT include repeats and repeatDelays.
Implementation public function get totalDuration():Number
totalProgress | property |
totalProgress:Number
[read-write]
Value between 0 and 1 indicating the overall progress of the timeline according to its totalDuration
where 0 is at the beginning, 0.5 is halfway finished, and 1 is finished. currentProgress
,
by contrast, describes the progress according to the timeline's duration which does not
include repeats and repeatDelays. For example, if a TimelineMax instance is set
to repeat once, at the end of the first cycle totalProgress
would only be 0.5
whereas currentProgress
would be 1. If you tracked both properties over the course of the
tween, you'd see currentProgress
go from 0 to 1 twice (once for each cycle) in the same
time it takes the totalProgress
property to go from 0 to 1 once.
public function get totalProgress():Number
public function set totalProgress(value:Number):void
yoyo | property |
public var yoyo:Boolean
Works in conjunction with the repeat property, determining the behavior of each cycle; when yoyo
is true,
the timeline will go back and forth, appearing to reverse every other cycle (this has no affect on the reversed
property though).
So if repeat is 2 and yoyo
is false, it will look like: start - 1 - 2 - 3 - 1 - 2 - 3 - 1 - 2 - 3 - end.
But if repeat is 2 and yoyo
is true, it will look like: start - 1 - 2 - 3 - 3 - 2 - 1 - 1 - 2 - 3 - end.
TimelineMax | () | constructor |
public function TimelineMax(vars:Object = null)
Constructor.
SPECIAL PROPERTIES
The following special properties may be passed in via the constructor's vars parameter, like
new TimelineMax({paused:true, onComplete:myFunction, repeat:2, yoyo:true})
useFrames
is set to true, the timeline's timing mode will be based on frames.
Otherwise, it will be based on seconds/time. NOTE: a TimelineLite's timing mode is
always determined by its parent timeline. reversed
is set to
true initially, it will appear not to play because it is already at the beginning. To cause it to
play backwards from the end, set reversed to true and then set the currentProgress
property to 1 immediately
after creating the timeline.tweens
special property
to pass in an Array of TweenLite/TweenMax/TimelineLite/TimelineMax instances. You can use this in conjunction
with the align
and stagger
special properties to set up complex sequences with minimal code.
These values simply get passed to the insertMultiple()
method.tweens
special property when multiple tweens are
to be inserted immediately. The value simply gets passed to the
insertMultiple()
method. The default is TweenAlign.NORMAL
. Options are:
align
special property does not force all child tweens/timelines to maintain
relative positioning, so for example, if you use TweenAlign.SEQUENCE and then later change the duration
of one of the nested tweens, it does not force all subsequent timelines to change their position
on the timeline. The align
special property only affects the alignment of the tweens that are
initially placed into the timeline through the tweens
special property of the vars
object.tweens
special property when multiple tweens are
to be inserted immediately. It staggers the tweens by a set amount of time (in seconds) (or
in frames if useFrames
is true). For example, if the stagger value is 0.5 and the align
property is set to TweenAlign.START
, the second tween will start 0.5 seconds after the first one
starts, then 0.5 seconds later the third one will start, etc. If the align property is
TweenAlign.SEQUENCE
, there would be 0.5 seconds added between each tween. This value simply gets
passed to the insertMultiple()
method. Default is 0.currentProgress
won't necessarily
be zero when onStart is called. For example, if the timeline is created and then its currentProgress
property is immediately set to 0.5 or if its currentTime
property is set to something other than zero,
onStart will still get fired because it is the first time the timeline is getting rendered.)currentProgress
value to a lower value, etc.). It can, however, improve speed and memory
management. TweenLite's root timelines use autoRemoveChildren:true
.yoyo
is true, the timeline will go back and forth, appearing to reverse
every other cycle (this has no affect on the reversed
property though). So if repeat is
2 and yoyo is false, it will look like: start - 1 - 2 - 3 - 1 - 2 - 3 - 1 - 2 - 3 - end. But
if repeat is 2 and yoyo is true, it will look like: start - 1 - 2 - 3 - 3 - 2 - 1 - 1 - 2 - 3 - end. myTimeline.addEventListener(TweenEvent.START, myFunction);
myTimeline.addEventListener(TweenEvent.UPDATE, myFunction);
myTimeline.addEventListener(TweenEvent.COMPLETE, myFunction);
vars:Object (default = null ) — optionally pass in special properties like useFrames, onComplete, onCompleteParams, onUpdate, onUpdateParams, onStart, onStartParams, tweens, align, stagger, delay, autoRemoveChildren, onCompleteListener, onStartListener, onUpdateListener, repeat, repeatDelay, and/or yoyo.
|
addCallback | () | method |
public function addCallback(callback:Function, timeOrLabel:Array, params:* = null):TweenLite
If you want a function to be called at a particular time or label, use addCallback.
Parameterscallback:Function — the function to be called
|
|
timeOrLabel:Array — the time in seconds (or frames for frames-based timelines) or label at which the callback should be inserted. For example, myTimeline.addCallback(myFunction, 3) would call myFunction() 3-seconds into the timeline, and myTimeline.addCallback(myFunction, "myLabel") would call it at the "myLabel" label.
|
|
params:* (default = null ) — an Array of parameters to pass the callback
|
TweenLite —
TweenLite instance
|
complete | () | method |
public override function complete(skipRender:Boolean = false, suppressEvents:Boolean = false):void
Forces the timeline to completion.
ParametersskipRender:Boolean (default = false ) — to skip rendering the final state of the timeline, set skipRender to true.
|
|
suppressEvents:Boolean (default = false ) — If true, no events or callbacks will be triggered for this render (like onComplete, onUpdate, onReverseComplete, etc.)
|
getActive | () | method |
public function getActive(nested:Boolean = true, tweens:Boolean = true, timelines:Boolean = false):Array
Returns the tweens/timelines that are currently active in the timeline.
Parametersnested:Boolean (default = true ) — determines whether or not tweens and/or timelines that are inside nested timelines should be returned. If you only want the "top level" tweens/timelines, set this to false.
|
|
tweens:Boolean (default = true ) — determines whether or not tweens (TweenLite and TweenMax instances) should be included in the results
|
|
timelines:Boolean (default = false ) — determines whether or not timelines (TimelineLite and TimelineMax instances) should be included in the results
|
Array — an Array of active tweens/timelines
|
getLabelAfter | () | method |
public function getLabelAfter(time:Number):String
Returns the next label (if any) that occurs AFTER the time parameter. It makes no difference
if the timeline is reversed. A label that is positioned exactly at the same time as the time
parameter will be ignored.
time:Number — Time after which the label is searched for. If you do not pass a time in, the currentTime will be used.
|
String — Name of the label that is after the time passed to getLabelAfter()
|
getLabelBefore | () | method |
public function getLabelBefore(time:Number):String
Returns the previous label (if any) that occurs BEFORE the time parameter. It makes no difference
if the timeline is reversed. A label that is positioned exactly at the same time as the time
parameter will be ignored.
time:Number — Time before which the label is searched for. If you do not pass a time in, the currentTime will be used.
|
String — Name of the label that is before the time passed to getLabelBefore()
|
invalidate | () | method |
public override function invalidate():void
Clears any initialization data (like starting values in tweens) which can be useful if, for example,
you want to restart it without reverting to any previously recorded starting values. When you invalidate()
a tween/timeline, it will be re-initialized the next time it renders and its vars
object will be re-parsed.
The timing of the tween/timeline (duration, startTime, delay) will NOT be affected. Another example would be if you
have a TweenMax(mc, 1, {x:100, y:100})
that ran when mc.x and mc.y were initially at 0, but now mc.x
and mc.y are 200 and you want them tween to 100 again, you could simply invalidate()
the tween and
restart()
it. Without invalidating first, restarting it would cause the values jump back to 0 immediately
(where they started when the tween originally began). When you invalidate a timeline, it automatically invalidates
all of its children.
removeCallback | () | method |
public function removeCallback(callback:Function, timeOrLabel:* = null):Boolean
Removes a callback from a particular time or label. If timeOrLabel is null, all callbacks of that particular function are removed from the timeline.
Parameterscallback:Function — callback function to be removed
|
|
timeOrLabel:* (default = null ) — the time in seconds (or frames for frames-based timelines) or label from which the callback should be removed. For example, myTimeline.removeCallback(myFunction, 3) would remove the callback from 3-seconds into the timeline, and myTimeline.removeCallback(myFunction, "myLabel") would remove it from the "myLabel" label, and myTimeline.removeCallback(myFunction, null) would remove ALL callbacks of that function regardless of where they are on the timeline.
|
Boolean — true if any callbacks were successfully found and removed. false otherwise.
|
tweenTo | () | method |
public function tweenTo(timeOrLabel:*, vars:Object = null):TweenLite
Creates a linear tween that essentially scrubs the playhead to a particular time or label and then stops. For
example, to make the TimelineMax play to the "myLabel2" label, simply do:
myTimeline.tweenTo("myLabel2");
If you want advanced control over the tween, like adding an onComplete or changing the ease or adding a dely,
just pass in a vars object with the appropriate properties. For example, to tween to the 5-second point on the
timeline and then call a function named myFunction
and pass in a parameter that's references this
TimelineMax and use a Strong.easeOut ease, you'd do:
myTimeline.tweenTo(5, {onComplete:myFunction, onCompleteParams:[myTimeline], ease:Strong.easeOut});
Remember, this method simply creates a TweenLite instance that tweens the currentTime
property of your timeline.
So you can store a reference to that tween if you want, and you can kill() it anytime. Also note that tweenTo()
does NOT affect the timeline's reversed
property. So if your timeline is oriented normally
(not reversed) and you tween to a time/label that precedes the current time, it will appear to go backwards
but the reversed
property will not change to true
. Also note that tweenTo()
pauses the timeline immediately before tweening its currentTime
property, and it stays paused after the tween.
If you need to resume playback, you could always use an onComplete to call the resume()
method.
timeOrLabel:* — The destination time in seconds (or frame if the timeline is frames-based) or label to which the timeline should play. For example, myTimeline.tweenTo(5) would play from wherever the timeline is currently to the 5-second point whereas myTimeline.tweenTo("myLabel") would play to wherever "myLabel" is on the timeline.
|
|
vars:Object (default = null ) — An optional vars object that will be passed to the TweenLite instance. This allows you to define an onComplete, ease, delay, or any other TweenLite special property.
|
TweenLite —
TweenLite instance that handles tweening the timeline to the desired time/label.
|