The Flash Connection Make mine Actionscript 3.0!

Now, let's proceed to customize the dropdown menu by giving all the movie clip buttons in it some labels, and giving them some actions to perform when they are clicked.

You should be back at the main timeline (Scene 1). Click on the menu instance, and give it an instance name in the properties panel. For our present purposes, just name it "menu." Now click on frame 1 of the actions layer and press F9 to get the actions panel.

Let's begin by giving the heading inside the menu a label. Remember that each MCB instance has a dynamic textfield inside it with an instance name of "myText." So enter the following line of code into the actions panel:

menu.heading.myText.text = "Websites";

Test the movie. You should see the text "Websites" appear on the heading movie clip inside the menu. Next, let's program the text label of the first button of the nested "panel" MovieClip:

menu.panel.b1.myText.text = "Amazon";

Test the movie again. Roll over the menu so that the panel drops down. You will see that this time, no text appears on the first button, and there are no error messages! What could be the problem? Well, it so happens that any time you want to animate text, and any time you want text to appear from behind a mask, you have to embed the text. Here's how to do that:

Double click the MCB symbol in the library. Unlock the text layer. Click on the dynamic textbox "myText" on the stage. In the properties panel, click the Embed button. In the Character Embedding dialog box, choose Uppercase, Lowercase, Numerals, and Punctuation. You can do this by holding down the CTRL key as you click on each choice. When you have selected those four, click OK. Now all those characters will be embedded.

While still in the properties panel, click the "B" button to make the font bold. Lock the text layer again. Now go back to Scene 1. Test the movie. Roll your mouse over the menu. Now the text will show up on the Amazon button, because the font is now embedded. Back in the actions panel, frame 1 of the main timeline, let's proceed to set the labels for the other buttons, too. All the actions so far should look like this:

menu.heading.myText.text = "Websites";
 
menu.panel.b1.myText.text = "Amazon";
menu.panel.b2.myText.text = "Google";
menu.panel.b3.myText.text = "Yahoo";
menu.panel.b4.myText.text = "Actionscript.org";

Next we will make the nested buttons do something when they receive a click. We could add event listeners to each button. But we can also add one event listener to the whole menu, which, because of the event flow, will also trigger the mouse events coming from the children:

menu1.addEventListener(MouseEvent.CLICK, clickHandler);

It only remains to write the clickHandler function:

function clickHandler(event:MouseEvent):void {
	if(event.target == menu.panel.b1) {
		navigateToURL(new URLRequest("http://www.amazon.com"));
	}
	if(event.target == menu.panel.b2) {
		navigateToURL(new URLRequest("http://www.google.com"));
	}
	if(event.target == menu.panel.b3) {
		navigateToURL(new URLRequest("http://www.yahoo.com"));
	}
	if(event.target == menu.panel.b4) {
		navigateToURL(new URLRequest("http://www.actionscript.org"));
	}
}

Ordinarily, using event.target to identify which button was clicked on might cause a problem. The problem is that the nested textfield inside each button could potentially trigger mouse events and be the event target instead of the button itself. But in this case, we've previously already built a movie clip button with a built-in instruction to set mouseChildren to false. So every instance of our custom movie clip button is protected against anything nested inside from receiving mouse events.

Test the movie. The menu should be fully functional now, and each button will open the corresponding web page in your default browser. Here's the download link for the finished file:

download mcb_dropdown_menu_tween_class.fla