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(); |
// 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.
Continue reading →
