Movie Clip Navigation

[ LiB ]

Believe or not, you can stop, play, go to and play, go to and stop, and skip to any frame in a Movie Clip just as you would with your DVD player. It's a great thing.

I setup demo file GDA_PROG4.8.fla for this section. It resembles a main menu; check it out in Figure 4.13.

Figure 4.13. A main menu setup

graphic/04fig13.gif


At first this menu will seem very complicated, so allow me to break it down for you. Once you understand the individual parts , you'll be able to quickly put together a presentation yourself. I'll explain the structure of the main Timeline then all the scattered ActionScript code. The main Timeline appears in Figure 4.14.

Figure 4.14. Main Timeline structure for a generic presentation

graphic/04fig14.gif


As this is an ActionScript book, let's check out the first frame of the Actions layer. There is a script there; you can view it by selecting that frame and pressing F9.

So what's in the script? A stop command. Without it, the movie would run through all the frames , but this command in particular causes the movie to pause at the frame where the stop command is located. The first frame displays the main menu.

Layers Item 1, Item 2, and Item 3 are empty for the first frame, so let's skip them for now.

The next layer I would like to talk about is the Text layer. It contains a few textboxes that have pertinent (yet generic) information. I have designed a title for this menu, added menu item names , and added the small legal information at the bottom. That's all.

The Buttons layer contains three buttons. Each of these buttons contains scripts. We can safely assume that one or all of these buttons is our only way to the other frames. If we don't find code to advance to other frames, we will be stuck in frame 1 for as long as you can stare at the screen.

Luckily for us, most of the code in the buttons is familiar. Right-click (or Command-click if you are on a Mac) on the button to the left of label Item 1. Select Actions from the menu. You will find the following:

 on (release) {   gotoAndPlay("itemOne"); } 

You are already familiar with the on release handlerit executes anything inside it once the mouse button is clicked and released. This handler happens to have only one command inside it, the gotoAndPlay command. This command tells Flash to go to and play from a certain frame, which is specified within its parentheses.

In this case, I used the itemOne label as a target frame to "goto-and-play." So which frame is this? If you carefully look at the Item 1 layer, you will notice a red little flag over the keyframe of Frame 2. This indicates that this frame was labeled. Go ahead and select this labeled frame and access the Properties panel. It so happens that this is the keyframe that I labeled itemOne . How and where did I label the keyframe? The Properties panel has a special textbox under the Frame label where you can label your frames. See Figure 4.15.

Figure 4.15. Labeling a frame

graphic/04fig15.gif


So now that you know that the gotoAndPlay command can jump to and play from any labeled frame, what happens if you don't have a label on a frame that you want to jump todo you have to label it? Nope. You can simply use the frame number like this:

 gotoAndPlay(50); 

So what happens when the program finally jumps to frame itemOne after the user clicks on the first button? Let's examine that frame.

We have three active frames at this pointthree frames with displayable information. The Text layer has keyframed information on Frame 2, and that keyframe is displayed until Frame 12, which is the end of the movie.

The Buttons layer has a completely different Frame 2 keyframe where the original three buttons are nowhere to be found. There is only one button thereafter that is next to the label, Back to main menu. Let's look into this button to see what it does. Select it and press F9.

 on (release) {   gotoAndPlay(0); } 

That makes sense. This button is our only way back to the main menu. Since our main menu is Frame 0, we can confidently say gotoAndPlay Frame 0cool, no?

Our Item 1 layer is something we went over before. It's a simple tween. I took the textbox in Frame 2 and keyframed Frame 10. I then created a motion tween by selecting it from the drop-down from the Properties panel.

Look carefully at Frame 10 on the Actions layer. If you look into it, you will also find another stop command there. Why? If I didn't do that, the movie would continue playing the rest of the information on the Timeline. That wouldn't be good.

As long as we understand that much, we can go back to Frame 0 and examine the second button down. Let's look at the following code together:

 on (release) {   gotoAndStop("itemTwo"); } 

Here's a variation of the gotoAndPlay command. Instead of going to and playing from a frame, this one goes to and stops at the specified frame. As the section with the itemTwo label (Frame 11) is only one frame, there is no need for us to use the gotoAndPlay command in this situation.

When the user does click for Item 2, Flash will go to and stop at Frame 11. Since the Buttons and Text layers are being displayed at that frame, the user will have the option of clicking that main menu button if the user wants to navigate back to frame 0.

The third button is a similar case. We covered most of the technicalities already. It is good practice to keep the main Timeline as small as possible with as few tweens as possible. Check out Frame 12there is no tween there, but it's an animation section of the movie. What's going on?

You guessed correctly. There's a Movie Clip on that frame. If you were to double-click on that textbox, you would be in the Movie Clip's timeline. I had converted it earlier behind your backdon't you just like surprises ?

When you view the Movie Clip's timeline, you'll notice a simple keyframe-to-keyframe tween. There is also a stop command at the end of those frames. If that stop command wasn't there, the Movie Clip would loop when viewed from the main Timeline. If you don't believe me, remove that stop command and test the movie.

Open up the SWF in the Flash Player and play with it. See what you can do to modify it.

For my next trick, I have prepared another file with a similar set of commands. This one is more of a slideshow than a main menu. The file is called GDA_PROG4.9.fla and can be found on the CD. See a screen shot of the demo in Figure 4.16.

Figure 4.16. Our slideshow demo

graphic/04fig16.gif


NOTE

NOTE

If this is a game development book, why are you being shown how to put together a slideshow? That's a very good question! There are valuable commands that can be easily understood through a project like this.When I prepare a demo for you, I plan for a version that is stripped-down compared to its realistic counterpart . This will allow you to concentrate on what you need to learn.This could have eas ily been a movie sequence before Stage 1 in your war game. See what I mean?

The setup is pretty simple. The first layer only has one frameour Actions layer. It also only has one action, a simple stop command. Once again, we need the command so the movie doesn't advance on its own.

There is nothing on the second layer, the Slideshow layer, so we'll skip it until we get to Frame 2. As for the Navigation layer, there is an oversized button straight in the middle. It contains the following script:

 on (release) {   nextFrame(); } 

First thing you notice is that new command , the nextFrame command. This is a special case of the gotoAndStop command. It allows the movie to advance and stop one frame forward. This is an excellent command for when you need to display screen after screen to your user.

Let's suppose the user clicks on the huge button in the middle of the stage after running your program. Flash will advance him to the second frame and wait. What's on the second frame? Some graphics and another navigation button. This button also has similar code to the one above.

Now, once the user bumps into Frame 3, he finds that there are Forward and Backward buttons. Let's check out the actions for the button pointing backwards .

 on (release) {   prevFrame(); } 

You can already tell us what this command doesit moves the movie backward one frame and stops there. How interesting.

Test the movie and play around with the buttons. Make sure you understand all of it before moving on.

[ LiB ]


Game Development with ActionScript
Game Development with ActionScript
ISBN: 1592001106
EAN: 2147483647
Year: 2004
Pages: 162
Authors: Lewis Moronta

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net