GreenSock Tweening Platform v11 Beta (Introducing TimelineLite/Max)

Update: v11 released!

See the official announcement to read up and download the code.

Description

On the heels of releasing the huge v10 update that introduced the plugin architecture, I’ve been hard at work on an even bigger release that delivers quite a few exiting improvements to the GreenSock Tweening Platform. Version 11 represents some significant changes to the guts of the code, so before officially releasing it, I wanted to post it in “Beta” form to give everyone a chance to not only test the code but also share their thoughts and suggestions. I’m also thrilled to announce that Grant Skinner (author of gTween) will be collaborating with me on upcoming versions (see separate announcement).

By far the biggest news in terms of functionality is the addition of the “TimelineLite” and “TimelineMax” classes. They make building and managing sequences/groups of tweens simple and [dare I say...] fun. They originated from TweenGroup, blossoming into something much more powerful, flexible, and intuitive. Think of the timeline classes much like MovieClip timelines in the Flash IDE where you position individual tweens over the course of time. It may be easier to just see some code:

import com.greensock.*;

//create the timeline
var myTimeline:TimelineMax = new TimelineMax();

//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}));

//add a tween at exactly 2-seconds into the timeline
myTimeline.insert(new TweenMax(mc, 1, {x:50}), 2);

//stop the timeline
myTimeline.stop();

//play the timeline
myTimeline.play();

//reverse it anytime...
myTimeline.reverse();

//alter the timeScale so it plays at half-speed
myTimeline.timeScale = 0.5;

//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");

//add a tween to the beginning of the timeline, pushing all the other existing tweens back in time to make room
myTimeline.prepend(new TweenLite(mc, 1, {tint:0xFF0000}));

//nest another TimelineLite inside your timeline...
var nestedTimeline:TimelineLite = new TimelineLite();
nestedTimeline.append(new TweenLite(mc2, 1, {x:200}));
myTimeline.append(nestedTimeline);

insertMultiple() provides some very powerful sequencing tools, allowing you to add an Array of tweens/timelines and align them as TweenAlign.SEQUENCE or TweenAlign.START or TweenAlign.NORMAL, 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, {y:"120"}),
						   new TweenLite(mc3, 1, {y:"140"})],
						   0,
						   TweenAlign.START,
						   0.2);

You can use the constructor’s “vars” object to do virtually all the setup too, like this sequence:

var myTimeline:TimelineLite = new TimelineLite({tweens:[new TweenLite(mc1, 1, {y:"100"}), TweenMax.to(mc2, 1, {tint:0xFF0000}), new TweenLite(mc3, 1, {y:"120"})], align:TweenAlign.SEQUENCE, onComplete:myFunction});

If that confuses you, don’t worry. Just use the 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.

TimelineLite has all the essentials and TimelineMax extends it, adding features (just like TweenMax does with TweenLite).



TimelineLite/Max features:

  • add labels, play(), stop(), gotoAndPlay(), gotoAndStop(), restart(), and even reverse()!
  • nest timelines within timelines as deeply as you want. When you pause or change the timeScale of a timeline, it affects all of its descendents.
  • populate the timeline and build sequences easily using append(), prepend(), insert(), and insertMultiple() methods.
  • speed up or slow down the entire timeline with its timeScale property. You can even tween this property to gradually speed up or slow down the timeline.
  • reverse() smoothly anytime.
  • set the exact position of the playhead using the “currentTime” or “currentProgress” property. For example, to skip to the halfway point, set myTimeline.currentProgress = 0.5 or to skip to exactly 10-seconds into a timeline, do myTimeline.currentTime = 10.
  • tween the “currentTime” or “currentProgress” 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 forward/backward through the whole timeline.
  • add onComplete, onStart, or onUpdate callbacks using the constructor’s “vars” object (just like in TweenLite/Max).
  • use the insertMultiple(), appendMultiple(), and prependMultiple() methods to create complex sequences including various alignment modes and staggering capabilities.
  • base the timing on frames instead of seconds if you prefer. Please note, however, that the timeline’s timing mode dictates its childrens’ timing mode as well.
  • kill the tweens of a particular object in the timeline with killTweensOf() or get the tweens of an object with getTweensOf() or get all the tweens/timelines in the timeline with getChildren()
  • If you need even more features like AS3 event listeners, repeat, repeatDelay, yoyo, addCallback(), removeCallback(), getActive() tweenTo(), currentLabel, getLabelAfter(), getLabelBefore(), and more, use TimelineMax which extends TimelineLite.

TweenLite & TweenMax Improvements:

  • TweenLite now has stop(), play(), reverse(), resume(), and restart() methods which it has in common with all TweenCore classes (TweenMax, TimelineLite, and TimelineMax)!
  • useFrames” is now officially supported. So to make a tween or timeline base its timing on frames instead of time, simply pass “useFrames:true” through the vars object. For example, to tween mc’s x coordinate to 100 over the course of 30 frames, do TweenLite.to(mc, 30, {x:100, useFrames:true});
  • Improved speed. See http://blog.greensock.com/tweening-speed-test/
  • Full ASDoc documentation
  • Associate any data with a particular tween using the new “data” special property.
  • Added fromTo() and allFromTo() to TweenMax which allow you to define the starting and ending values in a tween (or group of tweens).
  • allTo() and allFrom() were moved to TweenMax and the stagger, onCompleteAll, and onCompleteParams are now function parameters instead of special properties in the vars object.
  • invalidate() any TweenLite/Max or TimelineLite/Max to force a re-initialization. This can be very useful if you want to reuse/restart a tween/timeline without having it revert to its starting values.
  • TweenLite has a “currentTime” property now, so it’s easy to find out exactly how far along a TweenLite is and/or make it skip to a certain point.
  • Added callbacks and event dispatching for onRepeat and onReverseComplete events.
  • New “motionBlur” plugin that applies a realistic directional blur based on the velocity and angle of a DisplayObject’s x/y movement. See an interactive demo in the updated Plugin Explorer (scroll to the bottom of the list). MotionBlurPlugin is a membership benefit of Club GreenSock for all “Really Green”, “Shockingly Green”, and corporate members.
  • New “dynamicProps” plugin that allows you to associate a function with a property so that every time the tween is updated, it calls that function to get the end value for the associated property. You could, for example, tween an object’s x/y coordinates to wherever the mouse is. See an interactive demo in the updated Plugin Explorer (scroll to the bottom of the list). DynamicPropsPlugin is a membership benefit of Club GreenSock, replacing ColorTransformPlugin which is now available to non club members.
  • New “transformMatrix” plugin that allows you to tween a DisplayObject’s/MovieClip’s transform.matrix properties. Either use the normal a, b, c, d, tx, and ty properties OR convenient x, y, scaleX, scaleY, skewX, skewY, and rotation values. Yes, that’s right – you can easily skew a DisplayObject/MovieClip now!
  • The AS3 flavor of TweenMax now has internal algorithms that can execute certain easing calculations 35-80% faster (overall speed boost is closer to 3-15%)! You just need to activate the eligible easing classes (options include Linear, Quad, Cubic, Quart, Quint, and Strong). Example: FastEase.activate([Strong, Linear, Quad]).

Note that now every tween is associated with a timeline using its “timeline” property. By default, TweenLite creates a “rootTimeline” for all time-based tweens and “rootFramesTimeline” for frames-based tweens. Think of a tween’s/timeline’s “timeline” property like a DisplayObject’s “parent” property. You don’t need to manage this at all, but be aware that a tween’s timing mode (seconds or frames) is always determined by its timeline’s timing mode. So if you add a time-based TweenLite instance to a frames-based TimelineLite, it will become frames-based.

FAQ

  1. Are the new versions of TweenLite and TweenMax backwards-compatible?
    Mostly, yes. However, there are a few changes to keep in mind:

    • Base package changed from “gs” to “com.greensock” in order to comply with industry standards. Sorry for any inconvenience this causes you.
    • No plugins are activated by default in TweenLite in order to minimize file size. Previously 7 plugins were activated by default (autoAlpha, visible, tint, frame, removeTint, volume, and endArray). It’s VERY easy to activate whichever plugins you need, though. The Plugin Explorer will even write the code for you. Here is the activation code that you need to run once in your SWF for backward compatibility with plugins:
      import com.greensock.plugins.*;
      TweenPlugin.activate([VolumePlugin, RemoveTintPlugin, FramePlugin, TintPlugin, AutoAlphaPlugin, EndArrayPlugin, VisiblePlugin]);
    • “loop” property in TweenMax has been changed to the more intuitive “repeat”. “yoyo” can now be used in conjunction with “repeat” where it is a Boolean indicating how the repeat should behave.
    • reverse() no longer acts as a toggle between forwards/backwards orientation in TweenMax. Instead, it ALWAYS forces the tween to go backwards.
    • Changing the “reversed” property no longer automatically resumes/unpauses a TweenMax instance.
    • The “renderOnStart” special property has been removed in favor of the new “immediateRender” (Boolean) special property which allows you to control whether or not the tween renders immediately when it is instantiated.
    • TweenLite.removeTween() and TweenMax.removeTween() have been removed in favor of a common kill() method. So what used to be TweenLite.removeTween(myTween) is now simply myTween.kill().
    • TweenMax’s “progress” property is now “currentProgress”
    • Replaced TweenMax’s pause() method with stop() (for consistency)
    • The AUTO overwrite mode now kills a tween if there are no more properties left tweening.
    • OverwriteManager’s ALL mode has been renamed ALL_IMMEDIATE, but it uses the same constant value (1) and produces the same results.
  2. TweenLite is about 1.9k fatter. What’s up with that?
    Yes, as most of you know, I’m extremely protective of file size so I didn’t take that 1.9k lightly. However, I felt strongly that the flexibility and speed improvements along with all the extra features, particularly stop(), play(), reverse(), resume(), and restart() in TweenLite and the useFrames feature justified the added weight. The base TweenLite class is now around 4.7k. If you need a SUPER small tweening class and don’t mind giving up features, check out the new TweenNano which is only 1.6k in AS3. But I’d strongly recommend sticking with TweenLite. It provides a ton of flexibility, power, and speed for its size.
  3. Is the API locked down for this new version? Might things change?
    The API is not locked down completely, but it is very solid. This Beta code is a work-in-progress and I’d love to hear what you think, particularly about the API for the timeline classes, like append(), insert(), prepend(), insertMultiple(), etc. It seemed pretty intuitive to me, but it would be great to hear what everyone else thinks. Love it? Hate it? How would you tweak it? For the record, I didn’t use something like “addTween()” because you can add timelines too.
  4. Is TweenGroup being deprecated?
    Yes, that’s my plan. Since TimelineLite and TimelineMax provide similar functionality plus a whole lot more flexibility and power (using less kb), it seemed logical. If you used TweenGroup.allTo() and TweenGroup.allFrom(), don’t worry – they’ve been added back to TweenMax. If you think TweenGroup needs to stay around, let me know. But before advocating that, I’d strongly encourage you to try TimelineLite/Max because I think you’ll find them more intuitive and capable.

Need help?

Feel free to post your question on the forums. Keep in mind that 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.

Donate
Author: Jack Doyle
Copyright 2009, GreenSock (This work is subject to the terms here.)

Comments (58) RSS

Posted by Greg on March 19, 2009

Argh! got the news when I was about to go to bed.. well I guess I’m gonna stay up a bit more hehe
What a great news, and thanks a lot for the doc, much easier now to work with your classes!
dynamicProps sounds really cool too!
Thanks again for all your work!

Posted by grabek on March 19, 2009

Wow, this is seriously becoming an entirely different platform. Soon it will be “I’m a TweenMax programmer and I also know a bit of actionscript” :)

it’s awesome!

Posted by thibaud on March 19, 2009

absolutely terrific news.
that update sounds like a very smart and much welcome answer to our daily tween scripting needs.

Posted by Andrew on March 19, 2009

Another sweet update, Microsoft should learn from you guys and put this into Silverlight and WPF. Or you could release one ;)

Posted by sitron on March 19, 2009

i think the pseudo timeline concept is very intuitive and a real enhancement.
until now i always kind of missed the easy sequencing of Fuse. But this is much better.

1 thing that i would love to have is the ability to define tween instances and use them whenever i need them. (without having to pause() them at first).
ie:
private var myTween:TweenLite = new TweenLite({…});
and then somewhere in my code: myTween.target = x; myTween.play();

Thanks a lot for your hard work!

Posted by Juga Paazmaya on March 19, 2009

Asdoc compatible comments, much appreciated!

Posted by Clemente G on March 19, 2009

WOW, just got the news when I woke up today. Sounds like a great initiative to combine the two. I personally never used gTween, but I hear alot of great things about it and Grant Skinner is an amazing Flash Developer, so this I have little doubt in it failing. I already threw up a blog post to help circulate the news.

It seems the Timeline Family seems to be the new TweenGroup but also way to dynamically create your timeline. Wonder if you decompile a SWF using this will it show the TimeLine code or would it look like actual Timeline animation.

Anyway, keep it up Jack, I’ll definetely test this out nd give you my feedback.

http://blog.kreativeking.com/2009/03/tweenlite-family-and-gtween-are-getting-married/

Posted by ant on March 19, 2009

I could kiss you right now on your big Flash lips.

Posted by Rich Rodecker on March 19, 2009

I’m convinced you don’t sleep!

Posted by Giraldo on March 19, 2009

Can’t wait for the release. Enjoy both tween libraries, nice to see some team work. Currently using v10 in my new framework, LiquidGear, and works like a charm.

Silverlight? What is silverlight? JK, Does anyone really use it other than microsoft?

Posted by Clemente G on March 19, 2009

Jack so far so good, one thing tho, why doesn’t TimeLineLITE have the ability to addEventListener, I think it would be really useful in it as I have to bring in the Max version just for that feature. I think it’d be really useful in Lite as well.

Posted by jack on March 19, 2009

Clemente, callbacks are definitely faster than event dispatching and they cost less in terms of file size, therefore I chose not to include event dispatching in TimelineLite. It’s also consistent with TweenLite vs. TweenMax. If you want ‘em, though TimelineMax delivers and it only costs an extra 1 kb thus far (although more features will likely be added over time, making the gap in file size wider).

Posted by Peter_D on March 20, 2009

AS2 version is very pleased :)

Posted by Rossie on March 22, 2009

Thank you for your work, this new release is awesome! Your classes has changed my programming life, they are so good, and you keep developing them futher.. I’m very grateful!

Posted by Greg on March 23, 2009

Hey again, just to let you know that after working with your new classes a bit, I really like them, it’s simpler than before, and the timeline thing is a great addition, it makes things much easier to manage, also the fact that we don’t need tweengroup anymore is pretty cool.

Thanks a lot!

Posted by Eder Lima on March 24, 2009

Awesome!! That upgrade is a fantastic alternative and final solution to perfectly sequence tweens.
Thks for your great work :)

Posted by adam alexander on March 28, 2009

love it. keep everything as-is. :P

Posted by John on March 28, 2009

You’re bloody marvellous. There, I said it.

Posted by Matty B on March 28, 2009

This is great — I typically make separate functions for my in and out tweens but this simplifies the process greatly.

Posted by Mark Hawley on March 30, 2009

I like everything but the insertMultiple() and constructor-based ways to load up tweens in a timeline. If you’re trying to lock down the API, I think you should aim for the minimal, complete interface, and neither of those methods are really required.

(I also wouldn’t look forward to maintaining code with tons of those lying around.)

Posted by Robin van Emden on March 30, 2009

The timeline classes are a great addition! Already can’t live without them… Thanks a lot!

Posted by Michael H on March 30, 2009

First off, these new classes look awesome!

I don’t know if this has been asked already, but does TimelineLite and TimelineMax automatically use the OverwriteManager? For example, if i wanted to do something like this:

var myTimeline:TimelineLite = new TimelineLite();
myTimeline.insert(new TweenLite(mc, 3, {x:300}));
myTimeline.insert(new TweenLite(mc, 1, {scaleX: 0.5, scaleY:0.5}), 1);

Thanks again.

Posted by jack on March 30, 2009

Yes, OverwriteManager is indeed initted in AUTO mode inside TimelineLite/Max. Your TweenLite instances won’t overwrite each other immediately.

Posted by Andy on March 31, 2009

Woohoo… this is just like Fuse but even better.
Thanks a lot for this feature. ;)

Posted by Derek on April 11, 2009

I love the new Timeline class. It makes sequencing so much easier and simple to set up.
Thanks.

Posted by Itai on April 11, 2009

Hey – great stuff! I’ve been a fan for a long time, but this time you’ve taken it to a new level!

one question — if I use the insertMultiple function, is there a reason NOT to use syntax like this?

myTimeline.insertMultiple([ TweenLite.from(_mc1, .6, {alpha:0}),TweenLite.to(_mc2, .3, {alpha:1})]);

I was just wondering since it’s so convenient to use the .from and .to static functions….

Posted by jack on April 11, 2009

Itai, it’s perfectly acceptable to use the to() and from() methods, but there’s one thing to be very careful about with from() – by default, it renders immediately. So for example, if you’re setting up a sequence and use a from(mc, 1, {x:100}) 5-seconds into the sequence, mc.x will immediately be 100 which can throw off the starting values of subsequent tweens. You can set forceImmediateRender:false in the vars to avoid that, though. The default behavior is actually a feature – most people really appreciate it, but you need to be aware of the potential side effects and workarounds.

Posted by Ramiro Araujo on April 27, 2009

I really like the timeline approach. Like sitron said, Its one of the things I missed from FuseKit, and makes sequence animations more intuitive. Still, I would like to be able to control specify some kind of negative delay in the appending, something like: append this tween to the current timeline animation, but append it at -1 second, so it will start 1 second before the last animation ends.

Posted by jack on April 27, 2009

Ramiro, Thanks for the feedback, Ramiro. Were you saying that it wasn’t working for you? You should be able to use a negative delay if you want. Like:

myTimeline.append(new TweenLite(mc, 5, {x:0, delay:-1}));

Another (probably more intuitive) option would be something like this:

myTimeline.insert(new TweenLite(mc, 5, {x:0}), myTimeline.duration – 1);

Posted by Sis on April 27, 2009

Thanks for this, is super awesome.

I am a newbie flash person and even newer to Tweenlite… hopefully not too obvious of a question… with this new version how exactly do you make the timeline repeat?? Can you show me a sample of the code? Many thanks!

Posted by jack on April 27, 2009

Sis, to repeat a TimelineMax instance, simply set the “repeat” property to however many times you want it to repeat. Like:

myTimeline.repeat = 2;

(you can pass it in via the constructor’s vars object instead if you prefer)

If you want to repeat a TimelineLite, you could use an onComplete to call a function that calls myTimeline.restart(), but that would cause it to repeat infinitely. Using TimelineMax is definitely the simplest way, and it even allows you to define a repeatDelay too. Set yoyo to true in order to have the timeline go forwards, backwards, forwards, etc. when repeating.

Posted by shaman4d on April 30, 2009

Transformation around registration point its really cool!

And Motion Blur very impressive.

Wait for release!

Posted by Chad on April 30, 2009

I’ve been waiting for something like this to come out here. It makes this so much more useful. One addition I would like to see is the ability to tween multiple objects rather than just one, such as:
timeline.insert(new TweenLite([box1,box2], 1, {x:”130″, scaleX:0.5, scaleY:0.5, ease:Elastic.easeOut}), 0);

That would lighten up code a lot when multiple objects are needed.

Posted by Jayme on April 30, 2009

Your classes Are awsome and save me soo much time in writing my own. That motion blur is wicked!! nice job

Posted by Pan on April 30, 2009

AWESOME, this is really the best of the best!!!! THANKS!!

Posted by Michael on May 15, 2009

In terms of feedback for one of the items you listed,
I think that filesize should be the priority of TweenLite

perhaps you could write a static function legacy() which would activate it to a normal state.

Backwards-compatibility can’t become an issue which changes the focus of TweenLite, especially in such a trivial case

Posted by cyian on May 28, 2009

all hail to this stuff… can’t wait to use it :)

Posted by Alpha Remex on June 11, 2009

My goodness! You’re a friggin’ genius!

Posted by dmennenoh on June 23, 2009

>>Just use the append(), insert(), and prepend() methods

This is a great addition to an excellent package. I’m just wondering though, why not stick with array syntax – like push(), splice() and unshift(). Just seems to me that sticking with familiar syntax is better…

Posted by jack on June 23, 2009

Good question, dmennenoh. The problem with push(), splice(), and unshift() is that they’re generally not as intuitive for non-programmers (like designers) and in order to follow through on the theme, I’d probably need to also add pop(), shift(), etc. which didn’t seem necessary especially when I’m trying to keep file size low. Plus, splice() wouldn’t make much sense because it implies a linear sequence paradigm which is great for Arrays where each index follows the other, but in timelines you can have many tweens that occupy exactly the same spot in time (all having the same start time). In other words, what if I want to splice() a tween at the exact same spot as another one? splice() implies that it would push whatever is there currently back to make room, but that wouldn’t be desirable.

Posted by adampasz on June 30, 2009

Just trying it out. Seems fantastic!

It seems like there should be a way to automatically set a timeline to loop, (without using onComplete).

Posted by jack on July 1, 2009

Yep, adampasz, you can automatically set a timeline to loop using the repeat property like this:
var timeline:TimelineMax = new TimelineMax({repeat:-1});

Posted by flora on July 14, 2009

ohhh!! really u r Genius!!! and crazy !!!! not human!!!!!!

Posted by Burvs on July 20, 2009

Jack – you’re a star! Been playing with it for a little while and it’s really ace.

The only thing that leaps out at me, is the lack of an appendMultiple.

Perhaps I’m overlooking something, but it would be handy to be able to easily append a bunch of tweens in the same way that insertMutiple works.

Posted by jack on July 20, 2009

Burvs, yeah, to get exactly the same result as an appendMultiple(), you can just use the timeline’s duration as the insertion point in insertMultiple(). Like myTimeline.insertMultiple([tween1, tween2], myTimeline.duration); I could add an appendMultiple() but I was trying to keep the API tight, and since insertMultiple() is so powerful with the staggering and aligning capabilities, it seemed to make sense to have it as a central method for inserting multiple tweens/timelines.

Posted by Burvs on July 21, 2009

Here’s another question….

What is the best way of inserting something into a timeline that isn’t actually a tween at all, but just a way of firing another function?

For instance, I’ve been doing the following:
myTimeline.insert(TweenLite.to(null, 1, {onStart:doMyStuff}), 2);

… which works, except it doesn’t work if the duration value is set to 0. Not that that matters as I can just leave the duration with any value and then it works, but is there a recommended way of doing this?

Posted by jack on July 21, 2009

Burvs, that’s exactly what addCallback() is for in TimelineMax. Like myTimeline.addCallback(doMyStuff, 2). You could accomplish something similar in TimelineLite by adding a tween that uses an onComplete, a duration of zero, and immediateRender set to false, like myTimeline.insert( new TweenLite(doMyStuff, 0, {onComplete:doMyStuff, immediateRender:false}), 2);

Posted by felix on July 23, 2009

Sweet! Love the new ‘useFrames’ option. I often wondered why my new AS3 animations are sometimes choppy versus my old AS2 tweens that retained smoothness. I’ve realized this is because the new tweens were time based over frame based. This can cause choppy animations (frames dropped) when the CPU is taking a hit. The disadvantage of frame based tweens is that they can take longer than expected depending on movie frame rate. In most cases this is not a big deal.

Cheers Jack!

Posted by Rod on July 27, 2009

Love this, couldn’t have come at a better time.

One question – is there a simple way of treating TimelineMax as an array – I need to be able to get the length of it somehow, like myTimeline.length, with the expected result being an array of the Tweens I have appended/inserted.

Is this or something like it possible?

Thanks heaps.

Posted by jack on July 27, 2009

Rod, you could get the length like this:

myTimeline.getChildren(false, true, true).length;

Basically, getChildren() returns an Array of all the tweens and/or nested timelines in the timeline, and you can optionally have it return all the more deeply nested tweens/timelines inside of its child timelines as well. It’s actually more flexible than simply having a “length” property because it lets you determine how deeply to dig and what types of children you’re looking for.

Posted by Haelix on August 23, 2009

I’m not sure if this is a bug or maybe I’m just not doing something right. I’ve got a TimelineLite set up fed with data and each TweenLite appended to the timeline has an onComplete function which simply iterates a “tick” variable which is output on the screen. However, when I reverse the Timeline… it doesn’t seem to call the onComplete function as its tracking back trough the tweens in reverse.

Thanks!
Haelix

Posted by jack on August 23, 2009

Yep, Haelix, that’s actually expected behavior. An onComplete should only fire at exactly the time a tween completes in its forward direction. It sounds like you want a callback at specific times on your timeline which you can accomplish with addCallback() in TimelineMax. Those will fire when the virtual playhead travels past it in either direction.

Posted by Haelix on August 24, 2009

I should’ve guessed there was an onReverseComplete… but yes, using the addCallback() was exactly what I needed. Thanks!

Posted by Last on September 3, 2009

Wow Is all I can say.Will the new ASDoc documentation be downloadable or also be able to be intergrated with the Help system in FLash?

Posted by Manolis on September 11, 2009

What about garbage collection.
When I append new Tweens to the timeline do they get garbage collected after they finish tweening?

Posted by jack on September 11, 2009

Good question, Manolis. You shouldn’t have to worry about garbage collection at all. I’ve put a lot of effort into protecting things from gc when necessary, and releasing them likewise (when a timeline/tween completes for example). Tweens and nested timelines aren’t eligible for garbage collection until their parent timeline is. But again, this all happens behind the scenes and you don’t have to worry about it. Just take normal precautions like you would with any other AS3 object, like if you’ve got a non-local variable pointing to an instance, make sure you null it if you want it to become eligible for gc.

Posted by Luke on October 22, 2009

Sounds awesome, I can’t wait to check some of these out!

Posted by daraul on January 13, 2010

this is awesome.. almost exactly what i was looking for.

To download the code, you must agree to the following license:

"NO CHARGE" NON-EXCLUSIVE SOFTWARE LICENSE AGREEMENT
-----------------------------------------------------------------------------
PLAIN ENGLISH SUMMARY:

  1. You may use the code at no charge in commercial or non-commercial apps, web sites, games, components, and other software as long as end users are not charged a fee of any kind to use your product or gain access to any part of 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 "Business Green" Club GreenSock membership which comes with a comprehensive commercial license. See http://www.greensock.com/club/ for details.
  2. Use at your own risk. No warranties are offered.
  3. 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 code known as TweenLite, TweenMax, TweenNano, TimelineLite, TimelineMax, and other copyrighted code that is available for download at 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 apps, web sites, games, components and other software applications ("Developed Works") for which the end user is NOT charged any fees. If you would like to use the code in a commercially licensed Developed Work for which end users are charged a fee (either for usage or access), simply sign up for the appropriate "Business Green" Club GreenSock membership at http://www.greensock.com/club/.

II. LIMITATION OF LICENSE AND RESTRICTIONS
A. You agree that you will not 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. Distribution of the PROGRAM as part of your Developed Work is acceptable so long as it is used exclusively as a part of your Developed Work. You agree not to modify or delete GREENSOCK'S existing copyright notices located in the source code.

B. You may use, duplicate, and distribute the compiled object code as embedded in Developed Works created by you, either for your own use or for distribution to a third party so long as end users of the Developed Work are not charged a fee for usage of or access to any portion of the Developed Work. Please see http://www.greensock.com/licensing/ for descriptions of Developed Works that qualify for the "No Charge" license.

C. You may make modifications to the source code exclusively for your own use in order to perform bug fixes or other minor edits required to operate the PROGRAM as originally intended.

III. CONSIDERATION
A. The license rights granted to you under this Agreement are at no charge, but only in the following circumstances: If on your own behalf or on behalf of a third party you incorporate the PROGRAM into a web site, app, game, program or any component thereof (collectively, "Developed Work"), which in the case of a web site, must be accessible to internet users without payment of a fee of any kind, and in the case of a software application, game, program or component, neither you nor anyone to whom you distribute the Developed Work charges a user a fee of any kind to use such Developed Work or application, game, program or component into which such Developed Work is embedded. The foregoing shall apply regardless of whether you are paid to create such Developed Work.

B. In the event your intended use of the PROGRAM 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 "Business Green" Club GreenSock members (see http://www.greensock.com/club/ for details).

C. You may make modifications to the source code exclusively for your own use in order to perform bug fixes or other minor edits required to operate the PROGRAM as originally intended.

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. You agree that GREENSOCK may identify you as a licensee unless you make a written request otherwise. GREENSOCK hereby grants to you the right to disclose that your product, game, software application, component, or other Developed Work makes use of GREENSOCK code (for example, "Powered by TweenLite").

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 $250. 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, losses, damages, and expenses, including legal fees arising out of or resulting from any negligent act or omission by you.

B. GREENSOCK may, at its sole discretion, provide support services related to the PROGRAM, but has no obligation to do so.

VI. TERMINATION
If you at any time fail to abide by the terms of this Agreement, GREENSOCK shall have the right to immediately terminate the license granted herein and pursue any other legal or equitable remedies available.

VII. MISCELLANEOUS
A. This Agreement shall be construed in accordance with the laws of the State of Illinois. In the event of any dispute between you and GREENSOCK with respect to this Agreement, we both agree that if we cannot resolve the dispute in good faith discussion, either of us may submit the dispute for resolution to arbitration with the American Arbitration Association before a single arbitrator using the AAA Rules for Commercial Arbitration. The arbitrator's decision is final and can be enforced in any court with jurisdiction over such matters.

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.

Copyright 2006-2013, GreenSock, Inc. Updated 2012-08-28

I'd like to learn how to get bonus plugins, update notifications, SVN access, and more.
To continue, you must agree to the following license: