TimelineLite Ultimate Starter Guide: Working With Labels
videos

TimelineLite Ultimate Starter Guide: Working With Labels

on Nov 23rd 2011 with 16 comments
Tutorial Details
  • Difficulty: Beginner
  • Platform: Flash (Flash Player 9+)
  • Language: AS3
  • Software Used: Flash Professional CS4+
Download Source Files
This entry is part 4 of 6 in the series TimelineLite Ultimate Starter Guide

TimelineLite Ultimate Starter Guide

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

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

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!

Other parts in this series:«TimelineLite Ultimate Starter Guide: Controlling PlaybackTimelineLite Ultimate Starter Guide: Advanced Sequencing»

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Carl Schooff is a veteran Flash Developer and Instructor with over a decade of experience. He is continually excited by seeing new Flash users excel and create wondrous things. He gets a kick out of introducing people to new ideas and techniques on his Flash blog at snorkl.tv  

Plus Premium
 
 
Add Comment

Discussion 16 Comments

  1. Ben Waller says:
    November 24, 2011 at 12:18 pm

    Hi Carl,
    Great tutorial! Learning heaps.

    Playing through your example above I get some stuttering with the tweens! It only seems to be on the Color, Align and Transform ones where the text tweens move with the image?. Have you noticed that? Is that easing issue or could it be made smoother using the BlitMask?

    Hey, Carl. I’d like to donate something to you. I feel the need to reward you for the great help you’ve been giving me over at the Greensock forums with all my miss guided/confused questions! Do you take donations?
    Cheers,

    Ben.

    Reply
    • carl schooff says:
      November 25, 2011 at 7:03 pm
      Author

      Hi Ben,

      I don’t notice anything weird with the tweens… or atleast weirder than what one would normally expect with Flash. From what I can tell the animation is quite zippy. Flash is always going to give you some slight aberrations in playback quality depending on hardware and when garbage collection takes place. Yes, a BlitMask would smooth things out and take away the processor strain of re-rendering text.

      As for donations, I don’t have any mechanisms in place just yet but I appreciate the offer. I enjoy contributing to the Flash community. At some time in the future I plan on having some products to sell: like t-shirts and snorkl.tv-branded snuggies. But for now, just keep following and sharing.

      Carl

      Reply
  2. melek says:
    November 24, 2011 at 4:16 pm

    Amazing Tuts! Very good work but download video don’t work :/.

    Reply
  3. Juan says:
    December 1, 2011 at 4:37 am

    Carl thx a lot, it was very usefull,

    Actually i was looking for something like this to solve, in my 1st year of using greensocks.

    But i would love if u could help me on making the “BasicLabels” with reverse betwen each animation.

    What meant is that ; how would be the code of reversing each actual label in case i click any of the other buttons(labels).

    I would aprecciate so much if you coud help me on this is something my head is thinking abt.

    Thx in advance..

    Juan.

    Reply
  4. Reuben says:
    December 3, 2011 at 4:09 pm

    Thanks,

    Very informative and valuable tutorials. Looking forward for more :).

    Cheers

    Reuben

    Reply
    • carl schooff says:
      December 9, 2011 at 7:02 am
      Author

      Thanks Reuben,

      Glad you enjoyed it. I appreciate you taking the time to offer feedback.

      Keep your eye on the rest of the series. Have some good stuff planned.

      Carl

      Reply
  5. Mike Scanlan says:
    December 15, 2011 at 1:57 pm

    Your tutorials have been a life saver several times.

    I do have a question that I couldn’t figure out.

    I set up a slide show with a Play or Next button. The function was play().

    Placed labels/duration in each section. And at the end of each section had a onComplete:tl.pause.

    Just like what you had above.

    What I couldn’t figure out was how to create a single BACK button to run the timeline back to the beginning of the previous section (label)

    reverse() doesn’t recognize the pause. It just plays back to the beginning of the timeline.

    Tried variations of gotoAndPlay but didn’t know how to set it up to go to previous label.

    Couldn’t find anything on Snorklshere. There was the Navigate a TImelineMax. But that had several buttons. The project would work something like that but with just forward and backward buttons.

    If there a spot on the tutorials that I’m missing. I’m a fan of snorkl.tv. So that’s the first place I checked for a solution.

    The clients request to be able to playback to the previous stopping point makes sense.

    Reply
    • carl schooff says:
      December 15, 2011 at 8:51 pm
      Author

      Hi Mike,

      I saw your comment on snorkl.tv. onComplete’s don’t fire in reverse (video6).

      Reversing to the previous section is actually a bit more complicated than I had thought (but not impossible).

      the way the file is set up now it really won’t work as each label comes at a time when nothing is on screen.
      you would have to add labels where each “in” transition resolves like

      “library_complete”
      “transform_complete”
      etc

      you might even want to do
      “section1_complete”
      “section2_complete”
      “section3_complete”

      then you could have a counter keep track of a section number (you could update this with a addCallback (video 6) and when you click previous you could decrement that value and use it to dynamically create the label you need to reverse to.

      like

      section–
      tl.tweenTo(String(section));

      so there is a fair amount involved.

      if i have time later to mock it up, I will let you and others know.

      Carl

      Reply
  6. Rory says:
    March 22, 2012 at 10:55 pm

    Sorry the above code didn’t copy fully .. can you delete my last post please !!

    here it is again hopefully with all the code:

    yo .. Carl

    I’m new here but have been lurking around snorkel for a while now and really been loving your tuts :)

    I have been working from the file you made up with previous and next navigation added to the above tutorial .. it would be great if you could help me out with a wee problem !!
    ..
    code snippet:

    import com.greensock.*;
import com.greensock.plugins.*;

var currentSection:int;
var tl:TimelineMax;

currentSection = 0;

tl = new TimelineMax({});

// set start state of sections
tl.appendMultiple(TweenMax.allTo([sec0_mc, sec1_mc, sec2_mc, sec3_mc], 0,  {autoAlpha:0}));

// anim in sec0
tl.append(TweenMax.to(sec0_mc, .5, {autoAlpha:1, onComplete:tl.pause}));
tl.addLabel("section0", tl.duration);
// anim out sec0
tl.append(TweenMax.to(sec0_mc, .2, {autoAlpha:0}));

// anim in sec1
tl.append(TweenMax.to(sec1_mc, .5, {autoAlpha:1, onComplete:tl.pause}));
tl.addLabel("section1", tl.duration);
// anim out sec1
tl.append(TweenMax.to(sec1_mc, .2, {autoAlpha:0}));

// anim in sec2
tl.append(TweenMax.to(sec2_mc, .5, {autoAlpha:1, onComplete:tl.pause}));
tl.addLabel("section2", tl.duration);
// anim out sec2
tl.append(TweenMax.to(sec2_mc, .2, {autoAlpha:0}));

// anim in sec3
tl.append(TweenMax.to(sec3_mc, .5, {autoAlpha:1, onComplete:tl.pause}));
tl.addLabel("section3", tl.duration);
// anim out sec3
tl.append(TweenMax.to(sec3_mc, .2, {autoAlpha:0}));

// end timeline 

// butts - previous / next navigation

prev_btn.addEventListener(MouseEvent.CLICK, prevClickHandler);
next_btn.addEventListener(MouseEvent.CLICK, nextClickHandler);
prev_btn.buttonMode = true;
next_btn.buttonMode = true;

function nextClickHandler(e:MouseEvent):void{
	if(currentSection<3){
		currentSection++;
		tl.tweenTo("section" + (currentSection));
		}
}

function prevClickHandler(e:MouseEvent):void{
	if(currentSection!=0){
		currentSection--;
		tl.tweenTo("section" + (currentSection), {} );
		}
}.

    the above works .. but I would like to stop the following from being possible:

    if you click the next or previous button multiple times then it advances multiple sections .. rather than just advancing to the next or previous section and pausing ??

    for example the timeline is at section 1 .. you click the next button two times rapidly .. the timeline then advances to section 3.

    would it be possible to add a condition to the clickhandler that would stop it from doing anything if it is currently tweening ?? allowing it to function if the timeline is paused ??

    not sure how much sense that makes .. hopefully a little

    thanks in advance for any help you can give me

    Reply
    • carl schooff says:
      March 23, 2012 at 12:46 am
      Author

      hi rory,

      Glad you are enjoying the tutorials.

      1 thing you could do is add a function that activates and deactivates the buttons based on a boolean parameter:

      function configureBtns(active):void{
      if(active){
      prev_btn.addEventListener(MouseEvent.CLICK, prevClickHandler);
      next_btn.addEventListener(MouseEvent.CLICK, nextClickHandler);
      }else{
      prev_btn.removeEventListener(MouseEvent.CLICK, prevClickHandler);
      next_btn.removeEventListener(MouseEvent.CLICK, nextClickHandler);

      }

      }

      whenever you click a button call:

      configureBtns(false) // will remove the eventListeners

      then make your tl.tweenTo re-activate the buttons when complete

      tl.tweenTo(“section” + (currentSection), {onComplete:configureBtns, onCompleteParams:[true] } );

      unfortunately it isn’t easy to disable the buttons based on the paused state of timeline as the timeline can be technically paused while the tweenTo is running.

      Hope this helps

      -Carl

      Reply
      • Rory says:
        March 23, 2012 at 5:24 pm

        yo carl

        works a treat .. thank you very much !!

        this is part of a much larger project I’m working on and that has just sorted out a major glitch .. the best thing about it though is i actually feel like I’m understand whats going on .. which is all down to your tuts over on snorkel and I’m now working my way through the ones here too.

        i’m nearly done on the project I’ll email you a link when its done so you can check it out.

        keep up the good work its inspiring .. thanks again man

        rory

Add a Comment

To add a code snippet to your comment, please wrap your code like so: <pre name="code" class="html">YOUR CODE</pre>. You can replace the class name with "js," "css," "sql," or "php." If there are any "<" or ">" within your code, please search and replace them with: &lt; and &gt; respectively.