A tear in time and space
Alright, I agreed that was a really dramatic title. Hidden in between this lecture is a really critical concept: when we add a pause in a timeline ( or any callback), they automatically get triggered when using the time method. In this lesson we will get rid of duplicate labels as we fix our tear in time and space.
Video Transcript
00:00So another problem that we're gonna confront another problem that we're gonna confront when we are
00:05Creating our timelines and creating a dynamic editor is there might be a scenario where we're adding a label
00:12Exactly where there was already a label and we don't have duplicate labels. That would just confuse our
00:18Animation presentation that we're creating so how could we know if there is a label there and how could you get rid of a label?
00:24That is already there and that is exactly what we're gonna do
00:27Leverage timeline max to be able to figure it out. So let's jump right into it and figure out
00:32How could we solve that type of a scenario? I think we're doing right now is timeline light
00:39Irrelevant because this is timeline
00:41Max related so we're talking about when we add labels and add labels at the same spot
00:47And I want to be able to know more information if there is already a label at that specific point in time
00:54Now I want to show you how do you actually fetch for example all the labels that are basically there
00:59so if I go ahead and first step one is I want to I'm gonna go into this function where we add the labels and
01:06Literally into this and into the place where we're actually physically adding the label, which is basically happening happening happening
01:14Let's see. Let's see. Let's see. Where is the actual label addition happening? It's happening right here
01:20So what I really want to do is I'm gonna not actually trigger this TL play immediately here
01:25but instead of that what I'm gonna do is I want to create here a helper function because we're gonna have a lot more things to
01:31Do inside here and I'm gonna I'm gonna put here basically. Oh, that's the playing right? No, no working
01:38We're fine the inside of the on label. We actually want to put this logic inside of our on label
01:42So right now we got the text for the new label now even before I'm gonna make any changes what I want to do
01:48Is I want to show you how could you see all the current labels that exist and you could actually get an array of labels?
01:54very easily by
01:55by calling the
01:57timelines get timeline max by the way label
02:02array
02:03Now get table and get labels array will literally do that. It's console log
02:08It's gonna return to you an array of all of the labels that exist
02:12So if I go ahead here and save this and just click on a refresh here for a second
02:16And I'm just gonna add an item and I'm gonna go to my labels and I'm gonna call this l1
02:21Notice what I'm gonna get in my output. First of all, I have your a little typo because I wrote here LaBelle
02:27So let me fix that
02:31Get timeline get
02:35Labels array. Oh, I'm missing here an s not labels, but get labels array
02:42All right, fair enough
02:44So it's get labels array and if I just go ahead and just do this one more time really quickly and I'm gonna add it
02:49Move it. I'll just gonna set a label l1
02:53click our aside and we're gonna see that we're getting an object an
02:56Array with an object inside of it. Now if I go ahead and I add here another item
03:01I'm getting an object with two items inside of it
03:05Now let's look at what that object actually contains. So to do that
03:09I'm just gonna create here a very quick array here, which I'm gonna basically loop through that
03:14I the values that are coming back
03:16So I'm gonna just go go gonna call this item and I'm just gonna loop through that one item the first one because that's gonna
03:22Be an indicator to us about all the different things that exist inside of that array
03:26And by the way in general
03:28it's a really great practice especially if you don't know the
03:31Documentation or you don't have access to documentation at some point the best way to find out what's the information inside of something is to
03:38Literally do a get vars item in
03:41the name of the object or get our
03:44This should be a string in
03:46Item and now it could literally just
03:49Console out the value itself and its value to be able to see what's inside there
03:56If I go ahead and save this and just run my application one more time what I'm basically doing here. I'm looping through all the
04:02Numerate of all items inside of this item and tracing them out seeing what their key is and then what their value is to give me a
04:09Better indication and better insight into what does this actually do?
04:13So I'm gonna go ahead here and just create this label really quickly and then we'll take a peek at it
04:17We're gonna be able to see that first of all con. Oh, I always do these silly typos
04:23We need a console log, right? So let me just do that really quickly
04:28And let's run it one more time really quickly
04:31Add an item and I'm gonna just go ahead here and call this L1
04:35And we're gonna see that there's two properties one is time and one is name, which is absolutely perfect
04:42Now that's what we get inside of that array and literally every single item that is added
04:48We're gonna get its name and its value in time now
04:51What happens if you're in a specific one thing is like a very easily you could create some sort of array and store it
04:57We're not gonna do that what I want to show you is another way
04:59And I'm just gonna comment all this out
05:01I want to show you another way of how could we check and see if there is already an array
05:06There is already a label that we could very easily find out with the timeline
05:11current label so I could literally ask if
05:15There is a current label and I could I probably want I'd probably want to do this even before
05:24We go ahead and add a label so I could literally just go here and just set this and what's what's going on here?
05:30Is I'm asking is there a current currently a label now if currently there is a label. What is important?
05:36It's important that my current time will be exactly the same as the label time
05:41So I could literally have your another if inside here if my timeline dot time
05:47equals the timeline dot get
05:51Label time of the current label
05:56Which is which should be the value that we get by default anyways, so if that's true
06:02Then we're gonna console log
06:06True all right. Let's just see if this works before we do anything else so if I go back into my application
06:11I'm gonna click on refresh. I'm not gonna even spend any time adding anything in I'm just gonna go ahead really quickly add a label
06:18Now I added a label that trace didn't happen, but if I go ahead and I try to add another label
06:23Let's call it l21 again. I'm not getting anything, but let's see why am I not getting anything?
06:29I'm gonna go ahead do a small little cut edit to add a small little thing that broke our functionality
06:34So this will fix it basically if you go into your on drag and method function really
06:39You'll see that we added the TL time dot time and remember back
06:44Then we pushed our timeline to the end using the time command
06:47The problem is that now that we're working with pauses the time itself
06:53Will get stuck in those pauses and not go to the last frame and because there is a pause exactly in the same frame. It's creating this
07:01Unexpected behaviors, so to be able to fix this we should or change the timeline dot time
07:06This line where we were pushing to the end to use the seek or we would send the second a second parameter to the time
07:14Excuse me for that second parameter for the time that would equal true and that would basically say
07:21Jump to that specific point ignore all callbacks ignore everything that's in between just go there no matter what
07:27But if we set it to be false, which is the default it will automatically get stuck stuck stuck stopped
07:34Whenever there's a playhead stop
07:36Okay, and we want to make sure that we change it also in this method
07:39But also in our second method where we added that in which was inside of the on manual toggle
07:45So just make sure in your on manual toggle as well that you add here the true
07:50Just make sure you do that before we continue the video and we're gonna jump right in there and continue the video
07:55All right. So let's give it a try. I'm gonna add an item and I'm gonna just give it a label and
08:02We'll see that we have your an item in we're not getting any trace any anything
08:06But if I go ahead and I add another label without changing the time that I'm in
08:10I'm gonna get a trigger of that true, which basically is telling me
08:13Okay
08:13It's time for me pry to remove that specific label because a new label is going to be added immediately
08:19So now that I know that I could literally come right here and it's time for me to get rid of that label
08:25So to get rid of that label, I'm gonna go to my timeline
08:28And I'm gonna click on remove
08:31if I find the R
08:35remove
08:36Label and I'm just gonna send in our current label
08:40so
08:41It because I see I'm using current label so many times. Let me just create a quick variable
08:49see label and
08:51I'm just gonna get the current label and set that as that
08:56You know and just because I'm doing that let's also clean up all these ifs cuz there we don't need to if so you
09:01Could do this all in one if so I'm gonna go ahead and take that as my first parameter if this value
09:07Is going to be null or a value that is not true
09:11then we're moving onwards, so I just I'm gonna put here an end and
09:16That will make sure that I'll have or this condition or this condition
09:20And I could literally just use this again
09:23So I don't have to type your timeline label again like that
09:27It's a little bit shorter easier to to read
09:29So I'm literally saying if there is a label and it's time is the exact same thing as the current time that we're in
09:35Then let's remove that specific label now idea behind. This is the idea behind
09:40This is very simple a new label has just been added in and if a new add new one is just about to be added in
09:47Let's remove the last one before we remove it in so step one. We're fetching that new label
09:52We're fetching the current label
09:54we're deleting the current label if it is the same label if it's in the same time as we're in already and
10:00Be only after that we then continue on to adding the label and adding the pause and so on and so forth
10:07All right
10:09Now probably a good logic to have and this is also not to add a pause twice
10:14we might want to also remove a pause and we might want to look into how to remove a pause and
10:22That is gonna be a very very good question, which we're not gonna answer right now
10:27Which is gonna be your homework assignment?
10:29So your homework is to try to figure out how to solve this to be completely solidified because we're done talking about
10:36Labels we looked at the current label. We looked at the get label after we looked at the get label before
10:42We've looked at the get labels array. We've even looked at the get labels time and
10:48We've last but not least so or how to look at the remove label itself
10:53And I encourage you to find your solution and how can we figure out a way?
10:57To undo this pause if we wanted to get rid of that pause at any given time
11:02All righty, so that's it for that and in the next lecture
11:06We're gonna and I encourage you to start talking in the chat area
11:09Which will be happy to chat with you if you try to figure it out
11:12We'll figure it out together in the next lecture
11:14What we're gonna do is we're gonna move out of this topic of labels and back into our timeline in general
11:22Where we're gonna go back into that back and next and try to figure out a way to make that back next functionality
11:27more operational