TimelineLite Ultimate Starter Guide: Controlling Playback

In the previous session I went over how to create a basic TimelineLite. Today I will show you the methods and properties that you will use to control the playback of your TimelineLite. By combining these methods and properties you can extend the built in functionality of TimelineLite to create fast-forward and play/pause toggle controls. I’ll also show you how easy it is to set up a Slider component to use as a TimelineLite scrubber.

TimelineLite in Action

Let’s take a look at the final result we will be working towards:

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

Watch the Screencast

TimelineLite Playback Methods

The following methods give you precise control over the playback of your TimelineLite

• play() –Starts playing forward from the current position.
• pause() – Stops the timeline.
• reverse() – Makes the timeline go backwards. If you want to reverse the direction of the timeline only and not continue playback in the reversed direction you can pass in a forceResume parameter of false – i.e. reverse( false ).
• resume() – Starts playing from the current position without altering direction (forward or reversed).
• restart() – Plays the timeline from the beginning

Custom Playback Controls

By combining the built-in methods and properties its easy to create advanced functionality:

Fast-Forward – You can create a fast-forward control by increasing the timeScale property and forcing playback in a forward direction.

private function fastForwardHandler(e:MouseEvent):void
{
	tl.timeScale = 4;
	tl.play();
}		

Play/Pause Toggle – To toggle between the playing and paused states just negate the paused property. It is important to make sure timeScale and reversed properties are set to the normal values as they could be altered by the fast-forward and reverse buttons respectively.

private function playPauseHandler(e:MouseEvent):void
{
	resetTimeScale();
	tl.reversed = false;
	tl.paused = !tl.paused;
}		

Slider Component Scrubber – The Slider component makes it fairly easy to scrub through the timeline by altering the currentProgress of the timeline. The Slider is set to output values between 0 and 100. In the code this value gets converted to a number between 0 and 1.

import fl.controls.Slider;
import fl.events.SliderEvent;

slider.addEventListener(SliderEvent.THUMB_DRAG, sliderChange);

private function sliderChange(e:SliderEvent):void
{
	tl.currentProgress = slider.value * .01;
    
    //forces the timeline to stop when the scrubber is released.
	tl.pause();
}		

Homework

What? You are giving me homework? Yes! I want you to be your best. Flex your mind muscle with this little challenge.

• Create a TimelineLite that animates six items
• Create play, pause and reverse buttons like in the demo file above
• Create buttons with compound functionality like fast-rewind and slow-forward

In order to really learn this material nothing is better than diving in and getting your hands a little dirty.

Conclusion

So far I’ve given you a fair amount of information on creating and controlling TimelineLite animations. Although there are some obvious similarities in the way you control TimelineLite and Flash IDE timeline animations, I really love how TimelineLite gives animators so much more control with the reverse(), restart(), and resume() methods. The timeScale and currentProgress properties open up some really interesting possibilities that will be discussed even more in the future.

In the next video I will be showing you how to add labels to TimelineLite instances so that you can easily navigate to certain sections of your timelines. TimelineLite labels work very similarly to frame labels in the Flash IDE but with some added functionality. It’s going to be a lot of fun.

If you have any questions or comments on this tutorial – or your homework ;) – feel free to post a comment below.

Thanks for watching!