Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Let's take a look at using code snippets to navigate through a Timeline. On the Stage I have a simple application where you can click a thumbnail image and you will see the appropriate bitmap image. So I can scrub the Timeline and show you that I have five different frames of animation and then five buttons on the left side of the Stage. So I have Button 1, which corresponds with the image on Frame 1, Button 2 with Frame 2, etcetera. Now, if I test this movie in the Flash Player, you will that it loops endlessly.
We actually want it to be stopped on each frame. So the first thing I am going to do is add a Stop action to the first frame. So I will put the playhead at the first frame and open up the Code Snippets panel and in the Timeline Navigation section, I will double click Stop at this Frame. Now when I test the movie, I will see the single image on Frame 1. So far so good! Now we will add the interactivity for the buttons. To do that, I am going to lock the Actions layer and I will select the first button on the Stage, click on the Code Snippets panel and double- click Click to Go to Frame and Stop. That's important.
You don't want to go to a frame and play or else the playhead will move to a certain frame and then the animation will play. We want it to stop at the right frame. So just double click Click to Go to Frame and Stop. Flash gives you the instance name method. At this point you can just click Don't show again and click OK and Flash will create that instance name for you. So we have our gotoAndStop Action, and if you read the instructions Flash says replace the number 5 in the code below with the frame number you would like the playhead to move to when the symbol instance is clicked.
So we want this one to go to Frame 1, so I will change that 5 to a 1. And before we test the movie, I will just add it to one more button. So I will select the second button, Code Snippets panel, double-click Click to Go to Frame and Stop, scroll down, change the 5 to a 2, and then we will test the movie. So I should be able to click the second and first images to see them appear in the main view. There's the second image and the first image. Nice! So while we are at it, we might as well go through and apply the rest of the functionality to finish the app.
So I will select the third image, Code Snippets panel, double-click Click to Go to Frame and Stop, change the frame number at the bottom of the code to 3. For the fourth button, same thing, except I am going to change it to 4. And since the default frame is 5, I don't need to do anything for the fifth button. I can just select it and then just double-click that Click to Go to Frame and Stop code snippet. I don't have to make any changes because it's already going to go to Frame 5.
So let's test the movie and now you can click all the thumbnails and see all the images. So you can see that you can easily navigate through a Timeline by applying the Click to Go to Frame code snippet.
Get unlimited access to all courses for just $25/month.Become a member