Dowload PDF in Full Site Email the Author

Menus within Menus within Menus...
If you examine the diagram on page 3, you’ll see that each of the categories in the services submenu have submenus themselves. Each of these have already been built for you and are under the clip.m.services folder (clip.m.animation, clip.m.consulting, clip.m.training, clip.m.design.)
In clip.m.services, we can build the submenu system as we did above in clip.m.maincategories. It appears as follows:

Recall that in clip.m.maincategories, we surrounded the services submenu with empty buttons on the top, bottom, and right side. Because there are further fly-outs for the services submenu, we’ll have to remove the empty button placed at the right side of the menu clip or else the submenus will never have the opportunity to display themselves!
In this clip (clip.m.services), we have to place the same empty buttons around the submenus. However, we’ll reference a different script. If we referenced rolloverStart.as, as we did in clip.m.maincategories, rolling over these empty buttons would cause Flash to still display the services submenu. We will want rollover at these points to display only the main categories. As a result, we’ll reference a script I’ve created called rolloverStartSub.as, which includes the following code:

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

Rather than going to and stopping on the first frame of the current Timeline, we go to an stop on the first frame of the parent Timeline, which in this case is the Timeline of clip.m.maincategories.
Finally, when the clip.m.services Symbol was created, it was created from a duplicate of clip.m.maincategories. We’d place three (3) references on three of the buttons in that Timeline (preferences, services, and profile.) Each of these buttons will go to the appropriate frame Label, such as 1, 2, 3. etc. Because the services menu references four (4) submenus, we need to add the following include on the fourth button (design):

#include "xscripts/rollover4.as"

This file goes to and stops on a frame labeled 4.
Preview the movie. m0012.swf

Limiting the Motion of the Menu
Our final step involves limiting the range of motion for the menu to ensure that the main categories are never obscured from view. To do so, we only need to place constraint arguments in the startDrag method used in clip.menu. If we examine the button.empty Instance in the button.drag Layer of clip.menu, we currently have the following script:

on (press) {
this.startDrag();
}
on (release, releaseOutside) {
stopDrag();
}
on (rollOver) {
mainCat.gotoAndStop(1);
}

We need to modify the second line:

this.startDrag();

to:

this.startDrag(false,20,7,522,312);

The arguments for the startDrag method are lock center, left, top, right, and bottom, as in:

this.startDrag(lock center,left,top,right,bottom);

If lock center is set to true, the Instance will align its center point to the edge of the mouse pointer.
The remaining values are values from the left and top of the screen, and right and bottom of the screen.
View the file mfinal.swf and if you like, look at the file in Flash, mfinal.fla.


Conclusion
This is just one method of creating a dynamic, drop-down or fly-out menu. There are of course, other methods, such as controlling the visibility of each of the clips with script. Furthermore, as you continue to use Flash, you’ll probably find other methods to use to achieve your objectives.


Robert Ross is a courseware developer for TrainingTools.com. He is also a full-time instructor at XtraNet in Toronto, Canada. He has been developing multimedia, video, animation, and web projects for 5 years. He is the author of many TrainingTools Learning manuals, including Learning Flash 5, Learning Dreamweaver 4 (with Charlie Walker), Learning Photoshop 6 (with Charlie Walker) and others.


 
Introduction Adding Sound to the Arrow
How the Menu will Function Building the Menu Item Clips
A Look at the Menu Generic External Scripts
Planning and Mapping Navigation Building the Submenu Clips
Building the Assets Menu Assembly: Putting the Clips Together
Sound Building and Scripting the Fly-outs
Draggable Menu Menus within Menus
Expand/Collapse Arrow