Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
To get practice navigating through Timelines, we'll build a simple slide presentation app. I've taken this bear animation, and I've broken it up into different frames. So we have this one, and this one, and this one, and then the basket goes up into the tree, and the bear tries to get it. So, I'll just scroll up a little bit. So you can see the bear trying to get the basket. These are all just still images that I exported using the File > Export > Export Image command.
If you want to do the same thing with your animation, it's really best to do this on the main Timeline and not inside of a movie clip, because the coordinates inside of the movie clip are relative. So just keep that in mind. So on the Stage, I have a button called back_btn and a button called forward_btn. And then in my code, I've just created some simple EventListeners and EventHandlers for them. So I don't have any code inside of them, but I've just built this already.
So you've seen this function before, the previous frame function, which is prevFrame and parentheses. So we can do that when we click the Back button, and when we click the Forward button, we can go to the next frame. So we'll type nextFrame with capital F, add some parentheses and Before I test the movie I want to add one more line of code. I'm just going to put a stop action. I'll put that at the top of the code, below line 2. So I'll go to the next line and just type stop, some parentheses, and a semicolon, because we don't want the movie to plat by default.
So let's test the movie, and then we have our little slide show, so we can click the Next button to advance through the slides and the Previous button to step backwards through the slides. So if you ever want to make a slideshow, just whip up this code real fast, and there you have it. Let's say you wanted to advance in a loop, so you go to the last frame and you click the Next button, and you want to go back to the first frame again, and vice versa.
You want to go from the first frame to the last frame if you click the Back button. Let's take a look at how to do that. So go to forwardClicked and right below nextFrame, type if, some curly braces. Now, what we can do is check to see if the current frame is the last frame. So to do that, we could say, if currentFrame is equal to - what's the last frame? 6 - we could put 6 right there, but the better way to do it is to use the totalFrames property.
So if the currentFrame is the last frame, or in other words, if the currentFrame is equal to totalFrames, you see why that's better? That's because, if you add more frames or take away frames, the code won't break. So it's always better to make it so that the code won't break if you change the design, because it is pretty likely that you will change the design in your app. So the more solid the code is, the better. So if the currentFrame is equal to totalFrames, then we'll go back to frame 1.
Take a second to think of the code that you would use to go back to the first frame. Simply type gotoAnd with a capital A, Stop, capital S, and 1 in parenthesis. Now, I've stressed the importance of using frame labels before. So you could use one if you want here, but actually, if I go to the last frame and click the Next button, I'm always going to want to go to the first frame. So unless I completely redesign this app, then this code is going to be solid, no matter how many frames I have.
So using the number 1 is okay in this case. So I have my code set up here, and we'll test the movie and then click the Forward button and watch as we advance through the frames. See if you notice anything off. When the basket is up, I click the Next button, and it goes back to the beginning. But what about the frame where the bear is trying to reach for the basket? We don't see that. Let's take a look at why that is happening.
So the function goes to the nextFrame, and then checks to see if the currentFrame is equal to the total number of frames. If so, gotoAndStop. Here is the problem. The fact that nextFrame is before this if statement makes the frame updated before you see it updated. So it happens without you seeing it. Flash makes the frame go to the last frame with the bear, but before you see it, Flash runs this code to go back to the first frame.
Occasionally, you'll run into these problems when you're working with frames. You have to make sure that you change the frame last, so that the last thing you see is the new frame. To make sure this happens correctly, cut nextFrame with Command+X or Ctrl+X. Then below the if statement, let's write an else statement. So write else, and then some curly braces, and then paste the code.
So if the playhead is on the last frame, we'll go back to the beginning. If not, then we'll go to the nextFrame. So we don't have the nextFrame code running every single time, like we did before. It only runs when we're not on the last frame. So let's test the movie now, and you should see all the frames of animation. So bear comes up, basket goes up, and there is the bear. Click the Next button, and you go back to the beginning. So now what we'll do is we'll apply the same technique, but in reverse, to the backClicked function.
So let's scroll up. Then above prevFrame, let's write an if statement: so if, some parentheses, and some curly braces. In the if statement, we want to see if we're on the first frame. So all we have to do is check to see if currentFrame - capital F - is equal to 1. If so, then we're going to go to the last frame. So gotoAndStop and then parentheses, pass in that totalFrames property - capital F.
It should be blue after you type it. Then we'll wrap prevFrame in an else statement. So we only go to the previous frame if we're not on the first frame. I'll just tab that in and write some curly braces around it. So if the current frame is 1, we're going to go back to the end, which is represented by totalFrames. Again, we're using that just in case we increase or decrease the length of the animation. And then the else statement says if we're not on frame 1, then we're going to go back to the previous frame.
So let's test the movie, and if you click the Back button, you'll go to the last frame. Continue to click it, and you'll step backwards through the animation, and the Forward button still works as well. So by using these conditional statements, along with the next frame and previous frame commands, we can navigate through each frame of the Timeline and have the slideshow play in a loop. So navigating through Timelines is a key component in many apps, and as you get more practice using these commands, you'll be able to add Timeline navigation to all sorts of applications.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101414 Viewers
61 Video lessons · 88175 Viewers
71 Video lessons · 72028 Viewers
56 Video lessons · 103820 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.