Next: back to the back
As promised, a throwback to the back button and next buttons. A couple of lessons ago, we started working on a back and next functionality, but it wasn't fully functional. In this lesson, we go back and improve the functionality of both the back and next buttons.
Video Transcript
00:00So as promised we're going to go back to the back and next to try to make it way better and
00:06If you haven't tried to make it better already then try to make it better before you move on to this video
00:11But we are ready to make it better
00:13Let's start now and we're going to actually do this for the next two videos. How about that?
00:18But they're short and fun and engaging
00:21It's time for us to go back to the back and next and learn a few more cool little thingies
00:27So let's jump ahead and first figure out. What time are we in and what time do we want to go to?
00:34So to do that, I'm just gonna go back into my code find your back function. I'm just gonna basically
00:40Comment oopsie. I'm just gonna comment out everything here
00:43And instead of what we had there before what I want to do is first of all is I want to console out our current time
00:50Want to know what time we're in?
00:55Next thing that I want to animate. Well, not enemy. Next thing that I want to know is what is the time of our label?
01:02so to do that, I'm gonna console dot log and I'm gonna go to my timeline and I'm gonna ask for the time of the
01:08label by first of all approaching my current label and
01:12Then to the current label itself. I'm gonna ask that current label
01:16it's time by going to get label time and
01:20Then I'll send in that current label inside of it just in case we're not sitting exactly on the label itself
01:27So just before we do anything else, I want to save this and I want to look at that information and analyze it
01:33To be able to start figuring out. How do we go back? So I'm gonna save that go back into my application
01:38I'm gonna click really quickly refresh. I'm gonna add an item and I'm just gonna give it a label
01:43Let's give it a label of
01:46start and
01:48I'm gonna go ahead and move to the end and I'm gonna create a label of end
01:53Now when I'm looking at this and I added a few traces just to make our life a little bit easier
01:58So we'll see that we have currently two labels one which is called start which is in position
02:030.9 and one that's called end which is in position 2.2. Oh
02:085 now when I click on the back button notice what information is going to return
02:13Current there our current frame right now is 205. Our current label is 205 as well. Beautiful
02:19So that's where we're at and where we really want to go is we want to get the label before
02:25So to get the label before I'm just gonna go ahead here and get that label before
02:30but instead of playing it what I want to do is I want to get that label before and
02:35Then output that time to see the time gap between our current time and our previous time
02:41So I'm just gonna save this for a second. And again, we'll just do this really quickly and
02:46I'll click on refresh and
02:48if I'm gonna add this item in really quickly, I'm gonna call this start and
02:55I'm gonna add another item. I'm gonna call it end and
03:00really what I want to do now is literally I want to click on this back here and
03:04The back itself is gonna give me that time of that start which is exactly where I want to go to
03:09So what I'm gonna do is instead of
03:12Instead of playing instead of whatever I'm just gonna jump to that specific point in time just for now
03:18So for I'm just gonna go ahead here and just add inside of our logic here
03:22Just basically I want to go to my timeline
03:25I want to seek a specific point in time and where do I want to seek?
03:30I want to seek the point in time the second in time that correlates to the time of my previous label
03:36So I'm gonna just cup copy that
03:40Paste it right into that seek area
03:42You know
03:43Let me even leave that traces in there because I think they're gonna be incredibly helpful when we're debugging and in the next lecture
03:50I could always delete all the traces that we're not using anymore
03:52But in general it you know
03:53That's one of my favorite thing is console use console any place where you're not sure
03:57But also make sure that you delete them whenever you're done with them because you don't want to have a lot of floating
04:02Information that is just not relevant to you. So when you're done working on something
04:06When we're done working with the labels, then I could go inside and get rid of all those specific labels
04:11So if I save this and I go in here
04:13I'm gonna expect our timeline to basically jump to the right point this time around and be a lot more accurate than before
04:19So I'm just gonna add here an item and I'm gonna call this start
04:24And I'm gonna add another item and I'm gonna call this let's call this point two
04:30We're now another item and we're gonna call this point three and
04:34Let's add another one which will be point point four and last but not least is going to be our end
04:42Now the next step that I want to do is really I want to make sure that each time when I click on the
04:47Back button, I'm gonna get viable information to send through. So if I'm clicking here on back, it's definitely going to step four
04:54Beautiful if I click on back again, it's going to step three. It's then going to step two
04:59It's then going to step one now if I click on back one more time
05:03It's gonna go to undefined because it doesn't really know what that value is
05:07So it's sending minus one which is not information that we want to send because minus one is
05:12Not a really valid value for us. So we want to make sure that we're always sending a valid value
05:19So to do that, I'm gonna make sure that I'm gonna send you a value only if it's might not minus one
05:23So I'm gonna go ahead here and just create here a variable and I'm just gonna call this
05:29let's call this time and I'm gonna just set that and I'm gonna ask myself if time if
05:37Time equals minus one. I'm gonna set time to be
05:43To be zero, right? So only if our time equals minus one
05:46Then I'm gonna set that value to be zero that should work for me
05:50Now before we wrap up this back basic functionality
05:53Oh, so I really also want to make sure that this new label name will reflect also because we're jumping and we're not
05:59So I'm gonna go ahead and also
06:02Update the copy inside of my text area
06:05So if I find where I'm setting that copy which is somewhere label label somewhere where I could see labels
06:11Let me just search for label and this is our copyright. So update check what we could do is also add here a
06:22Value but you know what? I'm just gonna go ahead and just set the value inside of my text to just be the same thing
06:29So what I could do is by the way is, you know, like I could or use this check update again
06:34But a good a smart thing to do would be to create a function that says update label and just have your basically of value
06:41And we'll have your basically just copy this function right in there
06:46Send it right inside here, but and send the value into it instead
06:51And then instead of calling all this logic up here
06:54I could literally just call update label and by doing that now I could reuse that update label
07:00Making sure that if in the future I want to do something an update label label and I want to change something in there
07:05I could literally more easily approach it now
07:09another thing that I could do is I could also move this logic and I'm cutting down the amount of times and amount of
07:13Places where I have extra logic
07:15so I'm sending the current label and if the current label is doesn't have a value that I'm gonna put no label and I
07:21Could literally now go ahead to my update label go back to my back
07:24functionality right here and then I want to send in that current label or
07:29That get labeled before so I'm literally what I'm gonna do here is just create a variable called LBL
07:35Send that information in there and then call the update label. So I'm just gonna
07:41Copy that cut it more accurately send LBL here
07:45Send LBL here making sure that we're updating the text itself to make sure that it's reflecting the LBL that it needs to be
07:53So I'm just gonna push this in to make it a little bit more visually pleasing
07:57Yeah, kind of pleasing but it really I could probably just cut this and
08:02Put this a little bit underneath, you know in these type of stuff
08:05There's never the perfect answer of where to position things. So that's great. That is working for us. I could comment this out or
08:12Delete it. I'll just come down in case you want to play around with it
08:15So our back functionality is working now and we should expect also our labels to work as well
08:20So if I click here on refresh again, I'm just gonna add let's say two labels. I'm gonna call this L1
08:27And I'm gonna call this L2
08:30and I'm gonna call this L3
08:35And
08:36If I click on the back button, it's gonna go on back click back
08:40It's gonna go on back and update the labels and if I click black one more time
08:44It's gonna go to position zero and set us to be without a label
08:47The next thing is we want to make sure that our next command actually does the next it does what it wants
08:52What what we wanted to do. So what I'm gonna instead of what it's doing right now
08:56We're gonna walk through the same type of logic here
08:59But instead of going to the label before we're gonna go to the label after and we're gonna stop there instead of playing
09:05Or we're gonna seek so if we're in a play position will start playing if we're in a pause position
09:09It will start in its pause position
09:12So to do that
09:13I'm gonna literally go ahead and create the same type of logic and I apologize for all those
09:18Ringing in the background and oh we have your radio label. So that's good
09:23and I'm just gonna comment out this play area and
09:28The same kind of logic applies but we're gonna take it step by step
09:32So what I want to do is I'm gonna trace out that information as we're progressing and we're moving
09:38So the steps first step I could go to my TL seek and I could send here just the LBL directly and just seek that
09:45specific point
09:46But also beyond that I want to make sure that when I'm sending this for information that I'm not going to create something weird
09:52So let's start with just the next is the next wasn't as problematic as the as the back was and let's first test
09:59It out and see that when we press on next that it's actually gently creating a problem or not
10:04And if it does then we'll fix it. So let's go ahead here create item number one
10:09Let's create item number two
10:12Let's create
10:15three and
10:16Last but not least let's create four and we already saw that when we click on the back button
10:21It's working really nicely, but let's see what happens when we click on next
10:25So when we click on next it's it's definitely moving definitely moving definitely moving, but it's not updating the label
10:31so all I have to do is also click on to make sure that I'm updating up to the label itself by calling the update label function and
10:38Last but not least that I want to do is also make sure that if I click on next when it's already at the end
10:43That it's not going to generate some sort of an issue. So if I click on next again, it's not doing anything
10:48Which is fine with me. I don't have to do anything if it's not generating any error error
10:53But all I want to do is just make sure that when we click on next that the label number will update
10:59So I'm just gonna just create it really quickly and that will be a wrap to this topic
11:04But not a wrap to this chapter because in the next lesson we're gonna do something incredibly cool
11:09so I'm just gonna click here on back back and if I click on next and
11:14If I click on next one last time, it's actually going to the end and it doesn't have a label there
11:19Which kind of works for me
11:20I don't have a problem with that because then the user could go ahead and put their own label if they choose to do
11:25So perfect. So this looks really really nice
11:27Our back button though seems to have some sort of funky go thing going on because it goes back it goes back
11:34And then for some reason it jumps
11:36Here which doesn't make any sense. So if we let's fix that. Let's try to fix it at least and
11:44The only thing that I could think about here is when I'm updating the label get label before
11:50That's fine that the if the text comes back is nothing if there is no label
11:54I'm completely fine with that
11:55But our only problem with our time is that we might have a time that is not minus one that is generating some sort of
12:01An issue, so I'm just gonna go ahead here and just add your a console
12:05Log to see what is that time because we could see that we have here the Sun. Oh
12:11I'm just doing here a seek of all this stuff. You know, let me undo that because we really want to send the time instead
12:18Let me see what we have inside here. So get label before which we did it up here get time label here
12:24And then we're resetting the time but we weren't actually sending in the right time
12:28So that should really fix it. So we don't even need that console
12:32But click on save let's just make sure that it's really working and I'll click here add an item and I'll call it L1
12:40and I'm gonna add another item I'm gonna call it L2 and
12:46I'm gonna add one last item L3 and let's see if we travel through it if I click on back back back
12:51It's gonna go to the beginning that's the beginning where there was nothing there that makes sense
12:55And if I click on next our item is gonna be there beautiful. Everything is working exactly the way we would expect it to work
13:04Now the only thing that might not be a hundred percent the way we want it to work
13:07Is that when we click on next again, it's gonna send it a little bit forward and then it's gonna reset our label
13:13We could fix that but I'm gonna leave that for you guys as a homework if you choose to really clean this up
13:18just like your homework that of getting rid of labels when we
13:23Update and remove labels so we don't have here these labels all the time even when they don't exist
13:27But we're not gonna fix that in this course
13:30But that will be part of your homework assignment if you choose to do that and that's it
13:34We're done with the topic of labels are really done with the topic of labels in the next lesson
13:39We're not walking away from the back and forwards because I want to show you something incredibly cool
13:43And that is that you could actually animate timelines using tweens crazy. We're gonna see in the next lesson
13:50It is really impressive and really cool