Jumping back or forwards
Adding labels into the timeline enables us to jump to specific point in time as we leverage the max features in the TimelineMax class. In this lesson, we will add two new controls that will help us jump to the point where the last label was and the point where the next label will be. This won't be a perfect solution, but we will return in a few lectures to improve our solution. In this lesson, we will learn how to use: TimelineMax.getLabelTime(), TimelineMax.getLabelBefore() and TimelineMax.getLabelAfter().
Video Transcript
00:00So we're gonna start right now
00:02Back and next functionality now that we could have more than one label. So in our timeline where we have here
00:08Let's say first label another label another label and I'm in right now
00:13I'm here and I want to be able to jump to that specific time or jump to that specific time
00:18I want to create a controller that is capable of knowing where is that label before and what is its location?
00:23So we could jump there and that's exactly what we're gonna look at right now
00:27We're not gonna create a perfect scenario here perfect sample
00:30But we will in a couple lectures when we get back to it
00:32So let's jump right in it first get to know it and maybe it as an exercise and this is a really good mental
00:38Exercises once you're done with this video
00:40Do copy that code and then try to figure out how could you do it better?
00:45And don't move on to the next lectures until you figure out a better solution
00:48And then you'll see if our solution matches up to yours and even if not
00:51Make sure you drop your solution because there could be a lot of different ways to solve this
00:55Drop it into the comment section because I would love to see your solution as well
00:59All right, so let's get to it in this lesson. We're continuing we in the last lesson
01:04We met the current label
01:05We're in the timeline max and the next step is we I want to add two controllers one that will take us one label back
01:11And one that will take us forward basically back or next really. So let's go ahead and create that back and next functions and
01:20I'm just gonna go ahead and place it somewhere. Maybe we have here this right after our pause
01:25So I'll have your add pause back
01:28forwards
01:29so how about we'll put it even in between so here we'll be back and
01:37One after would be next and I'm just gonna go ahead on back and on next
01:50And I'll just go ahead and create those functions really quickly and then we'll add the logic into them
01:55So I'm just gonna go ahead here and put it right after
01:58Right after on replay, let's say
02:02function on back and
02:06We want one more which will be function on next and let's start with our back
02:13Now to be able to go back the first step is we want to know what is our current label?
02:17But beyond that we also know what was the label before we are the one that we're in right now
02:22And to do that is incredibly simple. All I have to do is go to my console and
02:27Well, I don't have to go to my console
02:28But I'm gonna go for my to my console to show it is there's a method for the timeline itself timeline max
02:33That is that it's called get label
02:36before now the get label before is going to return to me the label that is the one exactly before the one there in and
02:43There is oh to a method for get label after and if we save this go back into our application
02:51Click on refresh and add a few labels. So I'm just gonna add your some animation and this is going to be
02:58label one
03:00And I'm gonna move this and I'm gonna call this center. Oh
03:08Gosh, sir
03:10All right center and we'll move this one and then we'll call this NARF
03:15All right
03:15now if I go ahead and I click on the back button we should get in our
03:20First of all, we're getting our label one if I click on my next button
03:24We're gonna get NARF because we're in the last one currently
03:28But back really is that label before so if I go ahead and I save this well
03:34Which it is already saved and instead of just calling the label
03:37But literally going to that label by going to my timeline just like we set when we were
03:43Jumping around with our button that we were creating dynamically up inside of our button creation process if I could find it here somewhere
03:52Where we did label play that's exactly what we're gonna do and we were just sending the label in
03:57So if I just set here play
04:01LTL play and just literally just send the content into the TL play
04:07Pushing us to that spot in the time in our time zone
04:10So if I click on save go back click on refresh. Let's try this one more time
04:15So if I add an item where no label gonna move a little bit gonna call this
04:21Label one I'm gonna move a little bit. I'm gonna call this label two
04:27I'm gonna move a bit and I'm gonna call this label three
04:32Alright, so we have your three distinct labels if I click on the back
04:36It's gonna go back to the label one if I click on next it's gonna go to two if I click on next
04:42It's gonna go to the third one
04:44Although we're not seeing that update there because there was no play state
04:47But if I click on back and you can see the reason why oh so by the way
04:51Why is it when we're clicking on the back? It's basically stopping there
04:55And the reason is is because we have a stop command right inside there
04:59So to be able to sort that problem out where we have that stop there
05:03And we know that all of our stops are happening because of that pause state
05:07We have a few options one is we could get rid of that pause state if I could find it
05:12Which is when we're adding the actual label inside. So we have quite a lot of code already
05:17So in our label, we have your applause here somewhere. Here we go
05:20Here's our pause or another way around is when we're going to set our play
05:25Let me show you what we could do. So let me just find that on back and on next
05:29So let's start with the on next one instead of just sending the label itself one thing that the play command could accept
05:35I'm just gonna create here a string which will be our LBL and
05:38That's gonna be our label itself that we're getting what I want to do is I could literally add to it a string
05:45That says plus equals one which will basically say one second later
05:51Now obviously one second later is a lot later
05:54But if I set it to be 0.1 or if we were running on frames and one frame would definitely be enough
05:59Because literally we're saying we want to move to a frame after that current label
06:03But even better than this
06:05What if we could just capture the actual point in time that we're in?
06:09But if I'm gonna go here just to test this out if I save this and I add this value inside
06:15Look what will happen?
06:17So I'm gonna save this go back into my application click on refresh and I'm gonna add an item
06:23I'm gonna put here a label
06:26let's just call it just l1 and
06:30I'm gonna move and let's call this l2 and
06:34Let's move and let's call this
06:38L3
06:40So now we have three L's now
06:41I'm gonna go back for a second because I want to go back we're in the beginning now
06:45But now when I click on next notice what's gonna happen from label one it should go to label two
06:50But when it goes to label two it's gonna start animating and the reason it's animating and it didn't animate before is because we moved
06:57To be a little bit before a little bit after that actual point in time now
07:02I want to show you another way of doing that
07:05Before we wrap up this topic and another way of doing that is I could actually fetch that labels actual position in time
07:12And they do that to do that. I could literally go ahead and for example if I wanted to go to that
07:18Label before and
07:20Well, let's do this in this one. Let's do it in the back one
07:23so I'm just gonna go ahead and I'm gonna do a console log again and
07:28What I want to do is I want to call the timeline and I want to ask from it to get
07:33Label time and when I ask for the label time all I have to do is send in a label
07:38So I could literally just go ahead and send the label that is before and I could even trace both them out at the same time
07:47so let me just
07:49Save this and we're gonna test it out one more time
07:52So if I click on save here add another item push it to some point a point in our time put here label one
08:00Put another one to be label two
08:03Put another one to be label three and
08:08Now if I go ahead to my actual back button and I click on back notice what value I'm gonna get on the back here
08:14So one is I'm getting label one is my back. It's going back to label one
08:18I could see the point in time in my animation and
08:22If I click back again
08:24It's gonna give me minus one and all because it doesn't have a value because null is empty obviously
08:31But if I click on next and if I click on back again
08:34It's gonna go back to label two and we could see the time in label two. We could go back to label one
08:40We could go forwards
08:42So we could see a very very powerful feature here now
08:45Obviously in my scenario when I'm doing this back and next in a real scenario a back and next would just play from
08:53Next would just play and a back would basically
08:57Revert back to the specific point in time. That's not exactly what we're doing right now because we're just trying to showcase
09:03Though the play the timeline the labels how to work with labels and we're not we are gonna fix this in the next lecture
09:11but before we move on to the next lecture, I want to talk about a couple more things and
09:16Actually in the next lesson
09:18I'm gonna talk about a couple more things related to labels because we do have one problem here and I want to show you the
09:23Problem right now, for example, we're in label three, but if I go ahead and I add your another label
09:30Let's say I call it f2
09:32So what label are we in if I click on back?
09:35Where is it gonna go to if I click on next l2?
09:38Where is it gonna go to is it getting confused it is because we're adding two labels into the exact same spot
09:45So it's adding a little bit of
09:47Redundancy now what I really want to do is in a scenario that if someone adds a label
09:52But that label already exists and that specific point in time
09:56I really want to remove the last label that was in that specific time and
10:01That's exactly what we're gonna see how to do in the next lecture before we move on to actually fixing the back and next
10:07To work how a real back and next would probably operate
10:11so see in the next lecture where we solve that problem of
10:15Adding more than one label at a time and how to make sure that it doesn't happen that only one label could be there
10:21At a time and if I change a label, I'm actually really changing the label and not adding another label
10:26So we'll see in the next lecture when we look into that