Menu Assembly: Putting the Clips Together
Let’s begin by making the expand/collapse part of the menu functional. Thus far, we’ve successfully caused the Instance of clip.arrow to rotate 180 degrees when {Clicked} and make a clicking sound. We need the main categories of the menu to appear as well. Having built the main category clip (clip.m.maincategories), let’s make it work.
Let’s edit the Symbol clip.menu. We need to add a Layer called mainCategories (I’m placing it at the bottom of the Layer stack) to the Timeline and place the Instance of clip.m.maincategories in that Layer. Position the Instance just below the menu bar. On Stage, the content should appear as follows:

Next, make sure you give the Instance of clip.m.maincategories an Instance Name, in this case make it maincat. We’re going to control this Instance with script. Specifically, we are going to make this clip invisible by default, and use the expand/collapse button to toggle the clip’s visibility.
To make the Instance (mainCat) invisible, we’ll add a Layer called Actions (again placed at the bottom since by default, Flash loads content from the bottom up) to the Timeline and place the following script on the blank key frame:

mainCat._visible=false;

We are setting the Instance’s visible property (a property of the MovieClip Object) to false so that by default the Instance is not visible. When the user {Clicks} the expand/collapse button, the Instance (mainCat) will be made visible or invisible appropriately. Let’s edit the script in button.empty. Thus far we have:

on (press) {
xc._rotation+=180;
clickSound = new Sound(this);
clickSound.attachSound("drop")
clickSound.start();
}

What we need to add is a script that checks the current status of the visible property of the Instance (mainCat). If the mainCat Instance is not visible (which it won’t be when the movie begins and the arrow is pointing upward, indicating collapse) then make it visible. If it is visible, then make it invisible.
Below the statement xc._rotation+=180; we need to place the following script:

if (mainCat._visible==false) {
mainCat._visible=true;
}
else {
mainCat._visible=false;
}

First we check to see if mainCat is currently not visible, as in:

if (mainCat._visible==false)

If this is the case the we make it visible as in:

mainCat._visible=true;

If it is not the case, if mainCat is visible then we make it invisible, as in:

mainCat._visible=false;

The key concept to keep in mind is that the mainCat Instance is initially invisible. Furthermore, the Instance of clip.arrow is initially pointing upward, which indicates that the menu is currently collapsed, and thus we cannot see the main categories or menu items. The moment the user {Clicks} the button, the arrow reverses its orientation, pointing downward. Because the mainCat Instance is not visible at this point it is made visible. When the user {Clicks} the arrow button again the orientation of the arrow is reversed, pointing upward, and because the mainCat Instance is visible, it is made invisible. Simple logic that depends very much on how you set up the initial state of the Instances we’re using. The script in the arrow or expand/collapse button should now appear as follows:

on (press) {
xc._rotation+=180;
if (mainCat._visible==false) {
mainCat._visible=true;
}
else {
mainCat._visible=false;
}
clickSound = new Sound(this);
clickSound.attachSound("drop")
clickSound.start();
}

If you run the movie, you should be able to use the expand/collapse button to make the main categories appear and disappear. View m0008.swf and if you like, load m0008.fla to continue on.
When you run the current version, you’ll notice that when you scroll over the menu items the fly-outs for the subcategories still need to be placed and scripted. This is what we’ll do next.