Subtitles of the Movie

Continuing from the previous movie, we're now ready to add our first scripts to our complex menu system. Open up your movie clip here in the main timeline, go to the Up Frame, open up the Actions Panel, let's go ahead and add the first lines of script, the stop action to stop the play back head. Then we're going to add our event listener, we're going to add the event listener to the Menu underscore Btn button symbol instance that we labeled in the previous movie. Then we're going to add our event listener. These are noticed in blue. Those are reserved terms in that they need to be typed in exactly as written here. Open, close parenthesis and inside that parenthesis is the mouse event.mouse over. This is going to be a new mouse event for us. We're going to activate this menu by rolling over it and then we're going to invoke the expand menu function by calling it right here in the event listener. Go down to the next line of code and enter in this function, function expand menu open close parenthesis mouse event here with the My Event in front of it with a colon. Don't forget the void and the open curly brace there to indicate this is a function. And the actual method is go to and play the down frame. I've previously labeled that for you d-o-w-n but be careful with those frame labels in the future. Notice that that term is in green. Then there is a semicolon at the end of that line and then don't forget the closing curly brace. Also this syntax here should format for you like this. The go to and play should be indented and to the right. The closing curly brace should be moved over all the way to the left and as I'm always mentioning, you should be testing your scripts as you write them. We're now at a stage here where we can test this first section of script. What should happen is the play back head should stop in Frame 1 of that movie clip so the menu should not open until I roll my mouse over it. So let's go ahead and do a Control Test Movie. And when I roll my mouse over the button, you'll notice that the menu continues to open back and forth and that's OK because I haven't finished writing out the rest of my scripts. What's happening here is the play back head is going to in playing at the Down Frame and then going all the way over here to Frame 20 and then going back over to Frame 1. So we can fix that by adding a stop action right there in Frame 20. Let's go ahead and do that. Let's open up our Actions Window and add the stop action like so, close our Actions Panel and now let's test the movie again and that rotation now should end. Notice that it now opens up. It doesn't close but it does open and it stops there. So all my scripts are so far so good. Now what we need to do is collapse the menu and to do that we're going to need to create something called an invisible button, place that invisible button over the menu and then add an action to it that when I roll off the invisible button, that it collapses the menu. To add our invisible button, I've included here a layer called Invisible Button with a keyframe over there in Frame 20. Let's open up our Tools Panel and let's draw a rectangle in that empty frame there that just covers that menu. The idea is that when you roll off of this invisible button, it'll trigger the menu to collapse. Go ahead and let's hide some of the other elements there so we can double click on the rectangle that we just created and choose Modify, Convert to Symbol. Let's convert this to a button symbol. Let's call this Invisible underscore Btn like so. Click OK. Now, the way that you create an invisible button is that you double click on it. Let's insert a keyframe here in the over state and then all you do is you delete the up state so that it basically makes it invisible but it's still there in the over state. Now, Flash's way of letting you know that you have an invisible button there is to make that this light blue color. So let's bring back our menu like so. Now we need to label that invisible button, very important, so let's go ahead and select the invisible button and give it an instance name here, Invisible underscore Btn. That has to be named just like that in order for the script that we're going to write to work. Now we go back here to Frame 20 and let's go ahead and add our actions. Let's bring our Actions Panel back here and the first line of code is going to read like this: delete two stop actions. We're going to add a label there, invisible button, for the button instance and then we're going to add the event listener just as we did before, mouse event.mouse out will be the mouse event this time so when I move my mouse out of the invisible button, I'm going to run the function Collapse Menu. In that function let's go ahead and add a line there; reads as follows: function collapse menu open parenth my event colon mouse event there void. Don't forget the syntax elements there and then we're going to go to and stop on the up labeled frame and then don't forget the last closing curly brace there. Open curly brace after the void, closing curly brace at the last line of the script and that should do it. We're now ready to test the entire script. What should happen now is when I roll off of the invisible button there, it should collapse the menu. As a final check, Control Test Movie. I'm getting an error here and this is flashing. The error message is giving me Line 3, Frame 20, invisible button and most often what happens here is you mislabel that instance and that's probably what I've done here so let's go back and double check. Click on the instance there and notice that I've forgotten an I there. That's misspelled. So one good trick to do here is to match the name here in the script verbatim by copying it like so, Command C, Copy and then pasting it right here in the Property Inspector for the button instance; invisible button. That way I guarantee that I have no mistakes. Let's go back and test the movie again. Sure enough no error, roll over the button, it opens, roll off the button, it closes. Very good. A couple of trick here is when doing this you're going to run into problems if you have spaces in between your buttons here. Let's go ahead and double click on that stack and then notice that what I have done here is I've made sure there's no spaces in between those buttons. If you want an extra challenge, you can add spaces between the buttons and then manipulate your coding a little bit to get that to work. But it's easier to start with to have those buttons touching each other. Also, the shape of that invisible button; if it's too big or too small the menu won't expand or contract correctly. So if your menu expands and contract a little bit erratically, try adjusting the size of your invisible button. So there you have the scripts you need to get your more complex animated menus working in Flash. Let's now move on to the next section of the tutorial, Controlling Multiple Timelines.