Dowload PDF in Full Site Email the Author

Building the Menu Item Clips
Our next step is a necessary, but tedious task. We need to build each of the menu items into clip units. For example, we’ll build a Symbol called clip.m.maincategories to house the main or top categories.
I’ve created a subfolder in the Library under the menu/clip.mainMenu called clip.m.main. In that folder I’ve created a the new Symbol clip.m.maincategories. The clip itself consists of eight (8) Layers. One (1) Layer for each of the six (6) main categories, six (6) Layers for each of the buttons over the main categories (using Instances of button.highlight), and one (1) Layer for the fly-out arrows which indicate further sub-menus. To make it easier, I’ve already built it for you! Open 0006.fla.

Let’s take a look at how these elements appear on screen and how they are assembled on in the Timeline.

Adding Script to the Buttons: Interactive Structures
We’re going to use this single clip, clip.m.maincategories to build the remaining clips by duplicating the clip, renaming it, and then modifying it appropriately. We could go ahead and do that now, but it would be useful to duplicate some script elements along with the visual elements we’ve already developed.
Before we build the script, let’s take a look at a typical Interactive Architecture or Structure that Flash developers use to build navigation systems.
If you examine our main categories, you’ll note that three categories, preferences, services, and profile, have fly out indicators (our trusty clip.arrow Instance). When the user places the mouse pointer over any of these categories the sub-categories will appear beside them. To make them appear we use the on (rollOver) event to navigate to the section of the Timeline that displays the appropriate Instance.
For example, let’s pretend that we’ve already built the other categories into Symbols and placed them on the Timeline of clip.m.maincategories. It will appear as follows:

The range of frames for the existing main categories has been extended to 13 frames so that the main categories are always visible within the clip. In addition, four new Layers have been added, _blank (for visual convenience, it acts as a separator), m.profile, m.services, and m.preferences(each of which have an Instance of their respective Symbols we’ll create later).
Note that each of the subcategories or fly out categories do not overlap each other in terms of their range of frames. This ensures that only one is visible at a time. The Timeline, in effect, becomes not an area for animation, but a layout area, where we drop Instances of Symbols in appropriate places. In this case, we also label the key frames of those areas that we need to jump to with script. I’ve labeled them 1, 2, and 3 because I like to make my scripts as generic as possible. I could have labeled the key frames preferences, services, and profile. Largely, it’s up to you. and the way you wish to work.

Note: Some Flash developers make separate Label Layers and place Labels on blank key frames. I prefer to attach the Label directly to key frame so that if I move that content, such as the range of frames in the m.preferences Layer, the Label moves with the content itself. Again, this is just my preference, and you can do as you like.


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