# TimelineLite Ultimate Starter Guide: Controlling Playback

##### Tutorial Details
• Difficulty: Beginner
• Platform: Flash (Flash Player 9+)
• Language: AS3
• Software used: Flash Professional CS5
• Estimated Completion Time: 20 minutes
This entry is part 3 of 6 in the series TimelineLite Ultimate Starter Guide

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.

## 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;

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.

Thanks for watching!

Other parts in this series:«TimelineLite Ultimate Starter Guide: Basic Methods and PropertiesTimelineLite Ultimate Starter Guide: Working With Labels»

• http://www.juxt2.com Dimitree

Hi, is it possible to control a nested MovieClip’s timeline with TimelinelIte? I mean If I place a MovieClip on stage – and want to stop it playing – kind of “freeze” its timeline?

Thanks

• http://www.juxt2.com Dimitree

Ok, I got rid of the Timer Class and now everything works as it supossed to be. Rule of thumb- Don’t use Timer Class along with TimelineLite ( that was a big stupid mistake!)

• http://www.snorkl.tv carl schooff

Hey Dimitree,

Glad you took the time to watch and experiment! Thanks for posting your findings as well.

In general, once you start controlling objects with TimelineLite/Max it is best not to use other methods to move those objects around or control them.

Quite often people will build a TimelineLite/Max that moves a something around, and then they have a button that triggers an independent TweenLite/Max that hides it or does something else.

When the TimelineLite/Max is restarted they often get unexpected results as this “external force” mangled some properties that conflict with recorded values in the TimelineLite/Max.

Thanks again for watching.

Carl

• Andre

Very nice articles indeed. I always stopped using tweenlite since all my animations build with for-loop.

But with this it helps me a bit more to get my animations work with this.

But i have one question. Is it possible to manipulate the end values of an animation while its already playing?

In my case i have a few background elements with interact with the main menu. They change their xy-position, scale and rotate. It would be cool if i dont need to stop the tweens by the kill method, but to make the transition between to become more fluid.

And thanks for this great article. It must be alot of work to do.

Kind regards
Andre

• tuanduy

can I use this tutorial to load swf and control it?
thanks

• http://www.snorkl.tv carl schooff

Hi tuanduy,

This tutorial does not cover anything involving the loading of external assets.

Carl

• http://www.gabaygagot.co.il גגות רעפים במרכז

Excellent post and very useful thanks

• Miguel

Carl this is great, it is simple yet effective (which means great coding), thank you. That being said the only thing I miss is a frame by frame button (both forward and reverse) so that you can control exactly where to get at when looking for specific frames on a long animation.

Thank you again.

• Randy

@Carl Schooff :
Pls, see my comments for part 2 in this series. I am sorry to report more of the same problem here. There is no currentProgress property in the current ( just now downloaded again! ) version of greensock v12.
And it breaks the code used in this demo.

• http://www.snorkl.tv carl schooff

Hi @randy

Thank you for watching the tutorials and trying out the source code.

Please note of GSAP v12 is in BETA right now. There are a number of small changes in v12 that will make these v11 files need some upgrading. The best thing for you to do right now is read the full list of v12 changes at http://www.greensock.com/v12/

Please read the full expanded list of 39 changes. Changes that will impact v11 code are noted with a special warning icon.

Myself and the editors of AT+ have every intention of making it clear to viewers of this series that users migrating to v12 will have to pay attention to certain things.

The most drastic changes are that the properties I have discussed like

tl.time //previously currentTime
tl.timeScale

have been changed to methods

tl.time() // gets
tl.time(2) //sets the time value to 2

And yes, prepend() has been removed as it was hardly used and there are ways of doing the same thing.

I have already converted the source files for this series to v12 and plan on making them available here once we figure out the best way to keep this series pertinent into the future. The biggest changes are in the files that used a scrubber. I’d say 95% of the code is still real solid in v12.

Also there are some really cool new features in v12 that will make writing timeline code MUCH more concise and I look forward to sharing this with the AT+ community.

Thanks again for the feedback.

Carl

If you have any problems whatsoever with migrating to v12 please post on the v12 BETA forums at

http://forums.greensock.com/forum/7-v12-beta/

I moderate over there and will surely see and address your concerns.