Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One recurring theme in this title, and many other titles for that matter, is staying organized. Making a project scalable is often a crucial part in building a solid app, and scalability is usually easiest to maintain when using frame labels instead of frame numbers. Let's take a look at our file here. On the main Timeline, I have this movie clip, and if I double-click, it you can see its Timeline. I have some actions telling the main Timeline to jump to a specific frame so that we can change the angle of the view of this animation.
So I have this code here MovieClip.(parent).gotoAndStop(20) and if I test the movie, you can see an example of that. When the bear gets to the basket the camera sort of zooms in on the bear. Really, what's happening is the movie clip is scaling up. I set that all up in keyframes on the main Timeline. If you are not familiar with frame labels, frame labels enable you to actually name a frame. So, instead of saying go to frame 20, I could say go to the frame where the bear is eating out of the basket.
That way if I move around the frame label, it doesn't matter. So let's close this and return the main Timeline. Now, I am going to go to frame 20, and I am going to create a new layer above the frame layer. I'll call this new layer 'labels.' In the labels layers, I am going to create a keyframe at frame 20. I'll do that by pressing F7 to insert a blank keyframe. When you're working with labels, you should always have them on their own layer, and use blank keyframes.
So, no art on the labels layer, only blank keyframes. Select frame 20 of the labels layer, and in the Properties panel, click in the Name field. Here, you don't want any spaces or special characters, so type bear_eating and then press Enter to commit the change. You should see bear_eating in the Timeline. Now, let's go back and change our code to the label instead of the number.
Go to frame 1 on the main Timeline, double-click the movie clip, move the playhead to where the ActionScript is, which is on line 103. Select that keyframe of the actions layer and open up the Actions panel. Select 20 and delete it. Now if you just type bear_eating right here, just like you typed in the frame label, you are going to get an error, because there is no variable in Flash that's called bear_eating.
It's not built-in to Flash, and you don't create a variable when you create a frame label. So, you need to refer to frame labels as Strings. So you should put them in quotes. Just think of this bear_eating thing as text. So, when you get a frame label, you're assigning text to a frame. Whenever you refer to an ActionScript, you need to use a String because it's text. So let's test the movie and see what we get. So you can see that it works just the same.
Let's go through the rest of our frame labels and repeat this change to get some practice. Return to the main Timeline, and above each keyframe in the main layer, create a keyframe for the labels layer. So on frame 41 in the labels layer, I am going to select that frame, go to the Name area in the Properties panel, and type basket. This is the view of just the basket.
Note, there are different types of frame labels, so if you click that dropdown menu, you'll see Name, Comment, and Anchor. Names allow you to navigate with ActionScript, like we've been doing. Comments allow you to write comments, just like you would in ActionScript, except for they're in the Timeline. So you can explain what's happening in that part of the Timeline. That's makes it actually really easy to navigate around the Timeline. Then finally, anchors allow you to communicate with the back button in the browser. Now, the feature does sound really exciting, but it doesn't work with all browsers, so I usually don't use it.
So we'll select the Name and then go to the last frame of the labels layer that we created, on frame 71, click in the Name field, and type bear_reaching. Press Enter or Return to accept the change. You should see three named labels there. Now, just for good measure, we can go to the first frame, click on the first keyframe of the labels layer, and then click in the label field and type normal. Now frame 1 is pretty much always going to be the frame 1, but just in case if ever you want to move it around, it's wise to give it a name anyway.
So we have normal, bear_eating, basket, and bear_reaching. So, let's go to frame 1 and double- click the main_mc movie clip and select the first keyframe of the actions layer and open up the Actions panel. We are going to tell the main Timeline to go to the normal frame here. So MovieClip, in parenthesis put parent - remember, that solves any errors that may occur from using parent, because Flash looks at parent as a display object container.
So you are telling Flash to treat it as a MovieClip. .gotoAndStop, capital A, capital S. Then instead of passing in 1, I'm going to pass in normal in quotes. Close out the parentheses and add a semicolon. Now, we'll close the Actions panel, and we'll make all the rest of the changes for our navigation in the actions layer of the main movie clip. We've already made the change at 103, so I'll go to 196, select that actions keyframe, open up the Actions panel, replace 41 with a String called basket.
Then we'll go to the next keyframe, which is of the basket going up. That's going to take us back to the beginning. So I'll open up the Actions panel and change 1 to the string normal. And moving on, the last one is the bear_reaching. So I'll open up the Actions panel on that frame and change 71 to bear_reaching.
Now you should be able to test the movie, and it should work just the same. So the bear walks in. When he starts eating the food, it zooms in on him, then zooms out, just shows us the container by itself. The container goes up into the tree on the rope, and the bear tries to reach at it. So now we've replaced our numbers with frame labels. Let's take a look at the advantage of doing that.
Go to Scene 1, and let's say we were to move around our keyframes for some reason. So, I'll select frame 20 on the main layer, so that keyframe is selected, and I'll move it. So I am moving it to frame 25. Now all I have to do is move that bear_ eating label, and I don't have to change the code. So, I'll test the movie, and you'll see that I'll still go to the bear_eating at the appropriate time. There it is! So with frame labels your app can withstand animation and design changes without requiring any code modification.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101561 Viewers
61 Video lessons · 88320 Viewers
71 Video lessons · 72184 Viewers
56 Video lessons · 103939 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.