TimelineLite Ultimate Starter Guide: Working With Labels

In the previous video I showed you how to implement basic playback controls. Today I am going to talk about using labels to mark and navigate to precise locations in a TimelineLite. Labels in TimelineLite work similarly to how frame labels work in Flash IDE timelines. I’ll be showing you multiple ways to add labels and some clever ways of using them. We’ll also take a little look at some features exclusive to TimelineMax.

TimelineLite in Action

Let’s take a look at the example we’ll be building in the video:

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

Watch the Screencast

Adding Labels to a TimelineLite

There are two methods that you can use for adding labels to a TimelineLite

addLabel(label:String, time:Number):void
Adds a label at a particular time. It is most common to pass in the current duration of the timeline as the time.

tl.append( TweenMax.to( align_mc, 1,  { x:endX } ) );
tl.append( TweenMax.to( align_mc, .2, { autoAlpha:0 } ) );

// add a label named transform immediately after the previous tween is finished. 
tl.addLabel("transform", tl.duration)

tl.append( TweenMax.to( transform_mc, 1, { y:endY } ) );	

insert(tween:TweenCore, timeOrLabel:* = 0):TweenCore
When using insert() to insert a tween, the tween will be inserted at the time or label specified in the second parameter. If you insert at a label that doesn’t exist yet, it will automatically place that label at the end of the timeline and then insert the tween. This technique makes insert() act like an append() with the added value of creating a label.

tl.append( TweenMax.to( align_mc, 1,  { x:endX } ) );
tl.append( TweenMax.to( align_mc, .2, { autoAlpha:0 } ) );

//insert a tween and the transform label immediately after the previous tween is finished.
tl.insert( TweenMax.to( transform_mc, 1, { y:endY } ), "transform" );	

Navigating to Labels

TimelineLite’s intuitive gotoAndPlay() and gotoAndStop() methods work exactly as those same methods of the MovieClip object. Although this video focuses on using gotoAndPlay with a label, you can also pass in a time as well.

//jump to the color label and play
tl.gotoAndPlay("color");

//jump 1 second into the timeline and stop
tl.gotoAndStop(1);

TimelineMax gives us the unique ability to play to a particular label with the tweenTo() method. If MovieClips had such a method it would be called playTo(). At the end of this series I will be showing you how to add an ease to a tweenTo() as well as a number of other tricks.

Due to the introductory nature of this series there are some label-related features of TimelineLite/Max that I did not get to cover. Advanced users may want to read up on the optional suppressEvents parameter that can be used with gotoAndPlay() and gotoAndStop() in the documentation.

TimelineMax’s Label Helpers

TimelineMax has a number of features for figuring out the names of labels based on their relation to the current position of the playhead or a specified time. These properties and methods make it possible to dynamically calculate what the nearest label is in any direction.

Property

currentLabel – The closest label that is at or before the current time.

Methods

getLabelBefore(time:Number) – Returns the previous label (if any) that occurs before the time parameter. If you do not pass a time in, the currentTime will be used.

getLabelAfter(time:Number) – Returns the next label (if any) that occurs AFTER the time parameter. If you do not pass a time in, the currentTime will be used.

Conclusion

Due to the powerful properties and methods of TimelineLite/Max it is extremely easy to navigate and control your script-based timelines. The label-related features that we have discussed today really just scratch the surface of what can be done. Once you get a handle on these basic techniques you will find yourself creating timelines with more and more dynamic features. Suppose you want to prevent a user from clicking the “library” button once they are in the library section. You could simply add logic to the button’s click handler that considers the following:

If the previous label is the same as the label of the button that was just clicked then do nothing.

Feel free to convert that to ActionScript if you would like some extra credit ;)

In the next tutorial I am going to be showing advanced techniques for adding tons of tweens to a timeline with very little code and extreme precision.

If you have any questions or comments on this tutorial simply post a comment below.

Thanks for watching!