Advertisement
Animation

TimelineLite Ultimate Starter Guide: TimelineMax Special Features

by

In this series finale I'm excited to introduce you to the features that make TimelineMax so special. I'm also going to touch on some special tricks you can do with TimelineLite so that you can apply wild ease effects to the total play back speed of a timeline that includes hundreds of tweens and nested timelines. You have to see it to believe it.


TimelineMax in Action

The swf below contains a single TimelineMax with a repeat value of 1 and yoyo of true. The totalTime and totalProgress values reflect the amount of time it takes for the entire sequence to run twice. TimelineMax's addCallback() method is used to call a function that handles swapping the depths of the blob and the bush so that the blob can jump behind the bush. This swapping happens instantly when the blob finishes his upward movement regardless of whether or not the timeline is playing backwards or forwards.

You can find all the files used to create the SWF above in the source files for this tutorial.


Watch the Screencast

Don’t like ads? Download the screencast, or subscribe to Activetuts+ screencasts via iTunes!


TimelineMax Special Properties

TimelineMax's most popular feature is that you can easily tell it how many times to repeat. There are a number of special properties that can be passed into the TimelineMax constructor's vars object that help you fine tune exactly how the repeat works:

  • repeat: How many times the timeline should repeat. Use -1 to repeat indefinitely.
  • repeatDelay: Amount of time that should transpire before the timeline repeats.
  • onRepeat: A function that will be called as soon as the timeline repeats.
  • yoyo: If set to true the timeline will repeat in reverse.
tl = new TimelineMax( {repeat: 2, repeatDelay: 1, onRepeat: doSomethingCool, yoyo: true } );

The code above will create a timeline that does the following:

  • From the start, play forwards.
  • One second after the animation completes, a function called doSomethingCool() will fire and the timeline will play backwards instantaneously.
  • One second after the animation plays backwards, a function called doSomethingCool() will fire and the timeline will play forwards instantaneously.

Duration, Time and Progress

Once a timeline is told to repeat it is helpful to be able to access a number of properties that take into consideration the duration of all the iterations and delays:

  • totalDuration: Duration of the timeline in seconds (or frames for frames-based timelines) including any repeats or repeatDelays.
  • totalTime: Most recently rendered time (or frame for frames-based tweens/timelines) according to its totalDuration.
  • totalProgress: 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.

It's worthwhile to note that TimelineLite does have totalDuration and totalTime properties but since TimelineLite doesn't repeat, they offer the most value when used with TimelineMax.

Calling a Function From TimelineMax

TimelineMax makes it easy to call functions from any point in time. You may be familiar with the process of adding an onComplete() callback to an individual tween in a timeline, but addCallback() offers two advantages:

  • addCallback() functions will be fired when the timeline is playing forwards AND in reverse.
  • addCallback() doesn't need to be locked to a particular tween ending

addCallback() Method signature:

public function addCallback(callback:Function, timeOrLabel:Array, params:* = null):TweenLite
tl = new TimelineMax();
tl.append( TweenLite.to( mc, 5, {x:500} ) );

tl.addCallback ( doSomethingCool, tl.duration-1, ["Steve"]) );

function doSomethingCool(someValue:String):void{
    trace("Hi " + someValue);
}

The code above will cause the phrase "Hi Steve" to appear in the output panel one second before the previous tween ends.

Calling a Function From TimelineLite

TimelineLite offers similar functionality by way of appending or inserting a TweenLite.delayedCall() method but the code is a bit more verbose.

someTimelineLite.append( TweenLite.to( mc, 5, {x:500} ) );
someTimelineLite.append( TweenLite.delayedCall( 0, doSomethingCool, ["Steve"] ), -1 );

Tweening the Playback of a Timeline

One of the best kept secrets of the GreenSock Tweening Platform is that you can tween a TweenLite, TweenMax, TimelineLite and TimelineMax. In the video I focus on tweening the playback of the "timeline brothers". The benefit of tweening a tween or timeline is that you can adjust the speed at which it plays back and also apply easing.

Tween the timeScale of a TimelineLite/Max

This method is great for getting an animation to slowly come to stop at any point in time or resume playing with a nice ease-in. Notice the nice ease that is applied when entering or leaving a paused state.

Combine TimelineMax's tweenTo() With an Ease

This method works well for applying an ease to the playback speed of an entire timeline or just a segment. Notice the radical change in playback of the timeline when the Circ In Out and Bounce Out buttons are pressed.

Hopefully the SWF above will entice you find out more by watching the video and downloading the source files.


Conclusion

There are more things that TimelineMax can do but I chose to focus on the most commonly used features. I gave you a look at TimelineMax's currentLabel property and getLabelAfter() method in Part 4: Working with Labels. As always I recommend reading and bookmarking the TimelineMax documentation to be sure you are getting the most out the tools you choose to use. I still learn something new every time I poke around in there.

It has been an amazing experience for me to share with you nearly three hours of TimelineLite/Max training. I am confident that if you take the time to watch through each video and experiment with the source files you will have an incredibly strong foundation to start building upon. The potential for what you can achieve with TimelineLite/Max is virtually limitless. I truly hope you are as excited as I am about what can be done with these amazing tools.

For those of you who want to continue your TimelineLite/Max education I am sure you will find the following tutorials very useful:

I have to give special thanks to Jack Doyle of GreenSock for creating these amazing tools and also offering his support throughout the creation of these videos. Never in my life have I come across a business or product creator that goes to the lengths that Jack does to keep his customers and legions of enthusiasts so darn happy.

Thanks so much for watching this series and providing feedback. If you would like to contact me with any questions related to TimelineLite/Max please comment below or send an email. You can find my email address at the end of the video.

-Carl

Related Posts