Building and Scripting the Fly-outs
We have to build and script three (3) fly-out menus for the main categories preferences, services, and profile. Recall that in the preferences button we are referencing the external script rollover1.as which contains the following script:

on (rollOver) {
gotoAndStop("1");
}

By planning ahead, we know that we’re going to place the clip.m.preferences clip in a key frame labeled "1" on the clip.m.maincategories Timeline. In the clip.m.maincategories Symbol, I create a Layer called _blank as a visual spacer (there will be no content on the Layer), and then a new Layer called m.preferences. I extend the range of all frames in the Timeline to thirteen (13). In the m.preferences Layer, I create a blank key frame at frame 5 and drag an Instance of clip.m.preferences onto the Stage. I place the Instance accordingly:

If you run the movie (view m0009.swf), expand the menu, and rollover preferences, the preferences submenu will fly-out. But as you play with it, you’ll notice some problems. You can scroll over the main menu bar and the submenu remains visible. You can scroll off the submenu (to the right, top, or bottom) and the submenu remains visible. We want to ensure that the submenus disappear when appropriate. Let’s take a look at how we do that.

Surrounded by Buttons
One of the more common things developers do to correct this situation is place Instances of a blank button (our button.empty) around the submenu that, when the user rolls over them, return to the first frame of the clip, i.e. to a frame where none of the submenus are visible. In the xscripts folder i have an external script file called rolloverStart.as, which contains the following code:

on (rollOver) {
gotoAndStop(1);
}

This is precisely what we wish to occur when the user rolls off the submenu. All we have to do is put Instances of button.empty around the submenu to be hit areas for the user’s mouse pointer. In each Instance we reference the external script:

#include "xscripts/rolloverStart.as"

The other buttons over the main categories that currently have scripts (services and profile) already have scripts that will jump to the Labels 2 and 3 when we build them and place the appropriate Instances there. Scrolling over these buttons will automatically make the preferences submenu at frame label 1 disappear as the range of frames in that particular Layer will be small (enough to show the Label) and will not overlap the other frames. The remaining buttons (columns, contact, and award) do not currently have scripts on them. Scripts will be placed later when the content for each section is built. For now, I’m also putting the include statement to reference rolloverStart.as on them.
At this point, at the key frame at Frame 5 in clip.m.maincategories, the Stage should appear as follows:

The Timeline of clip.m.maincategories should appear as follows:

One problem remains. If you scroll off the submenu to the preferences button and then over the menu bar itself, the submenu remains visible. We need to edit clip.menu and select the button with our dragging script in it (in Layer button.drag.)
At the moment, we have the following script:

on (press) {
this.startDrag();
}
on (release, releaseOutside) {
stopDrag();
}

We need to add the following script below the current content:

on (rollOver) {
mainCat.gotoAndStop(1);
}

This ensures that whenever the user rolls over the menu bar, only the main categories are visible. Recall that we assigned an Instance Name of mainCat to the Instance of clip.m.maincategories.
Preview the movie and test it out. m0010.swf
You may note that if you do not rollover the menu bar initially, but {Click} the expand/collapse button you’ll note that the Instance of clip.m.maincategories loops, making the preferences submenu appear briefly, then disappear, then appear, in an endless cycle. The moment we added or extended the range of frames we created the possibility for a looping scrub (also referred to as the playhead.) To complete this part of the production, we’ll need to add a stop(); action to the first frame of the clip.m.maincategories Symbol and add the remaining submenus for services and profile just as we added the preferences submenu. You can do so yourself, or view the file I’ve completed: m0011.fla.
If you view the Timeline of clip.m.maincategories it should appear as follows:

If you run the movie the menu system should function properly. m0011.swf