Making More Dropdown Menus

This dropdown menu has been coded on the timeline, and has some limitations you should know about. The menu is reusable as it is. You can drag more copies out of the library, give each one a different instance name, and program them with different button labels and different actions when they are clicked. As long as you want menus with four choices each, you can reuse this one.

But imagine that you want a menu with only three choices. You will find that, try as you might, you can't take an instance of this present menu and modify it to have only three choices. The reason is that the menu, and the panel built into it, are templates. They are the master copy. They are a library symbol, which is very analogous to a class. They are the blueprint from which instances are made. Editing their insides affects every instance of them. So it really has to do with what was built in, and what was left to outside code to customize. The idea of a four choice panel was built in to the design, and was not left to the outside code. So our Menu symbol might have been called "Menu With a Panel of Four Choices."

So, let's examine how we can create a new menu with only three choices. Open the finished file (from the end of the previous article page) in Flash. Right click the Menu symbol in the library and choose "duplicate." Change the name from Menu copy to Menu2. Cool! Now there is a duplicate symbol in the library called Menu2. But it is also going to be necessary to duplicate the Panel symbol. So right click it, choose "duplicate," and name the duplicate Panel2.

Now let's edit the inside of the Menu2 symbol. Double click it in the library to go into its edit mode. Unlock the panel layer. Select the panel instance on the stage. Notice that in the properties panel, it says (of course) that it's an instance of Panel. We really want to substitute our new symbol, though, and make this an instance of Panel2 instead. So, right click the instance on the stage. Choose "Swap symbol" from the context menu. Then, just choose Panel2 from the list. Now the panel instance is an instance of Panel2 instead of Panel! By the way, there's no need to change its instance name from panel, because now the nested instance named panel is an instance of Panel2. Get it?

Next, double click the instance of Panel2 on the stage to go into its edit mode. Click the last (bottom) button in the stack to select it. Press the delete key. Now there are only three buttons in the stack. They will still have their instance names (b1, b2, and b3) from before. You can click on each one and verify this. When you duplicate symbols, little details like that get duplicated as well.

Go back to Menu2. It's now going to be necessary to move the panel down one notch because of the button that was removed. Click on the panel. In the properties panel, type -64 in the Y field instead of -96.

Go back to Scene1. Click on the menu layer. Drag out an instance of Menu2. You should have a fully functional three choice menu. Now let's program the new menu with some labels and click actions. First, though, give it an instance name of menu2 in the properties panel. Then, click on the first frame of the actions layer and press F9. Paste in the following additional code:

menu2.heading.myText.text = "Other Sites";
 
menu2.panel.b1.myText.text = "Twitter";
menu2.panel.b2.myText.text = "You Tube";
menu2.panel.b3.myText.text = "Google News";
 
menu2.addEventListener(MouseEvent.CLICK, clickHandler2);
 
function clickHandler2(event:MouseEvent):void {
	if(event.target == menu2.panel.b1) {
		navigateToURL(new URLRequest("http://www.twitter.com"));
	}
	if(event.target == menu2.panel.b2) {
		navigateToURL(new URLRequest("http://www.youtube.com"));
	}
	if(event.target == menu2.panel.b3) {
		navigateToURL(new URLRequest("http://news.google.com"));
	}
}

And there you have it. Two menus! You can see that it wouldn't be too difficult to just place several of these menus side by side to form a menu bar and have a nice navigation system.

There are also other customizations you can make. For example, using some of the easing methods, you might make a menu that opens and closes (for example) using a bounce effect. You could also change the duration parameter of the closeTween, and, for example, make a menu that closes faster than it opened. I also realize that I didn't spend a whole lot of time designing this, so if you use it, you'll probably want to design some more elaborate and better looking buttons.

Even more refinements: It might also bother you that the heading MovieClip has a rollover effect, because it's just another instance of MCB (movie clip button), and that rollover effect is built in. If so, just duplicate the MCB symbol, take out the rollover effect, and use your new symbol instead. Don't forget about the handy right-click "swap Symbol" menu choice. You might want a menu that must be clicked before it will open. If that's the case, just edit the menu symbol, and replace the line that adds a ROLL_OVER event listener, and use CLICK instead. Finally, it may bother you that the dropdown is animated (although I kind of like it myself), and you just want it to drop down in a "now you see it, now you don't" fashion. If so, take out the Tween stuff, position the panel clip just below the heading clip, and then just use the visible property to show and hide the panel.

The bottom line is that there are all kinds of ways that you can customize this and make it yours. I was just messing around with it myself and realized it will still work if you rotate it with the free-transform tool--even sideways and upside down! Then, just for fun, I made it mirror image instead:

menu.scaleX *= -1;

You might also wonder why I did this whole project on the timeline, instead of using custom classes. For one thing, I think it's kind of a myth that you can no longer code on the timeline in AS3. There are a lot of things you can do by coding on the timeline! But I also plan later to add another page to this article and demonstrate a dropdown menu class, because I have written one. Meanwhile, if you appreciated this, would you please provide me some feedback (comments)? Thanks!

download mcb_dropdown_menu_more_menus.fla