Probably the most exciting addition to GTween beta 5 is GTweenTimeline. This new class lets you easily build a virtual timeline of tweens, actions and labels, then control the whole thing as though it’s a single tween. You can even nest timelines inside each other, just like on the Flash timeline. Even better, it only adds about 1kb on top of GTween if you choose to use it.
GTweenTimeline extends GTween, which means you have the same interface, and can actually use a timeline instance as a normal tween, with a single target. You can repeat, reflect, reverse, pause, play, and jump to any point in your timeline, just like with any tween. Things get cool when you start sequencing other tweens, and tying in actions.
It gets even cooler when you pair it with the ability to synchronize frame based timeline animations with time based programmatic tweens. Suddenly you can integrate complex hand drawn effects into your code driven sequenced animation.
Here’s a look at some of the methods on GTweenTimeline:
// create a timeline, using an empty constructor because it isn't going to // tween a target directly, and you can calculate the duration dynamically: var timeline:GTweenTimeline = new GTweenTimeline(); // create a 2 second tween, and add it to the timeline to play at 0 seconds: var circleTween:GTween = new GTween(circle, 2, {x: 200}); timeline.addTween(0, circleTween); // create a 3 second tween, and add it to the timeline to start at 1.8 seconds. timeline.addTween(1.8, new GTween(square, 3, {y: 300}) ); // add a callback at 2.2 seconds. This will execute the callback function with the specified parameters // whenever the playback head crosses it (even in reverse). This is just like adding code to a frame // on a timeline. timeline.addCallback(2.2, myCallbackFunction, [param1, param2]); // add a label at 1.8 seconds. This way you can jump to that point by name with gotoAndPlay or gotoAndStop. timeline.addLabel(1.8, "squareStart"); timeline.gotoAndPlay("squareStart"); // calculate the timeline's duration from it's contents (tweens and callbacks). // This way you don't have to remember to update it separately if you move things around. timeline.calculateDuration(); |
Here’s a demo of it in action. All of the motion is done with tweening. The page numbers are shown with callbacks. Note that you can scrub the timeline, or even jump to any position instantly with the slider.
You can check out additional demos of GTweenTimeline and GTween beta 5 at it’s home page at gskinner.com/libraries/gtween/.
GTweenTimeline replaces (and hopefully simplifies / improves on) all of the sequencing features in GTween beta 4 (with the exception of nextTween), including addChild and progress points.
Nice, but Ryan Taylor already released something very similar to that a few years back:
http://www.boostworthy.com/blog/?p=170
He even coined it a “virtual timeline”…
CS – cool, I hadn’t seen that before.
The idea of a virtual timeline is fairly self-evident once you start trying to put together complex transitions (as is the name). It’s a familiar metaphor, it’s simple to implement, and it’s powerful to use.
I’m not claiming to have built anything that hasn’t been thought of before, but perhaps my take on it will appeal to some people. If not, that’s cool, I built it mostly for myself and my team. If so, great, I’m glad when my work benefits others.
I like Ryan’s idea of linking a forwards and reverse action together. I’ll have to take a closer look at what he did to see if there are other good ideas in there.
This is an awesome addition to GTween. Going to have to spend some time with it! Side note: I think you should come and speak at WebDU this year 😉
Hi Grant,
Is there a way to play the timeline to a specific point over a specific duration. For instance, if a timeline has a duration of 10 and its position is currently 9, can you say something like playTo(3, 1) which would play smoothly to 3 over 1 second? Would I just another gTween for this and just make my target the gTweenTimeline? Then tween the .position property?
Hey, just wanted to let you know that after trying it all day, this new package is really great!
Everything works the way you could expect.
A little thing though : you put “void” as the return type of GTweenTimeline constructor, which prevent the code hinting of Flex to show the class parameters 🙂
Thank you very much for your hard work!
Love the concept Grant,
When callbacks are being triggered – then I would sometimes need to know if it is being triggered when being played in reverse or not.
Sometimes you probably could set the state if it is being played in reverse or not – but it would be nice to have that inside the timeline-class.
thanks for great effort
Great stuff … I used TweenMax before, but with the GTweenTimeline, I’ll switch over to GTWeen …
Thumbs Up for your Efforts …
cheers
Is it possible to add audio to the virtual timeline?? with play back?
Hi Guys,
I want to create a xml-Tweenlist.
It contains all MCs which should be tweent with gTween. What do you think about this strukture therefor?
myMC
10
0.5
0.5
0.8
true
Circular.easeIn
0myTween
Love it!
Hi Grant,
Great work although I’m experiencing some unexpected results using the timeline.
On a timeline I have a series of gTweens that simply fade sprites in and out.
If I pause the timeline and jump forwards using setPosition not all the gTweens are updated!
I have a small example i can send you?
regards
//Poden
Again, Grant,
Great work, it makes it easier for me.
One small detail though: my gTimeline was running twice for some reason I couldn’t figure out; I had to add an event listener for COMPLETE so I can end it. I improved my 3d animation using it and it seems to run smoother (http://www.solidpitch.com/).
Thank you,
Dragos