Dowload PDF in Full Site Email the Author

Building the Assets: The Library and Naming Conventions
After settling on the categories and sub-categories, as well as settling on a design, both in terms of appearance and function, we need to build the assets for the menu system (well you don’t have to in this case, you can just use the included file.) I use a particular naming convention and a particular folder convention for my Symbols in the Library. If you use the files in these examples you’ll need to be familiar with it. These conventions are merely my own and are not the "right" way to use the Library and name your Symbols. Symbol names and Library use are entirely up to you, the producer.
In this case, I’d start with what is probably the most obvious element, the text for each button. I do not have to create 28 different text Symbols (27 categories + 1 text Symbol for the word menu) because there is some repetition, such as ’web’ and ’training’. Nonetheless, a number of different text Symbols are required. To manage Symbols, I create a appropriate folders in the Library. In this case, I’ve created a folder called menu, and a subfolder called text. Furthermore, in text, i’ve create six (6) additional subfolders that replicate the name of the main categories, preferences, services, column, contact, profile, and award. To create the Symbols themselves, I use the Text Tool to create all of my text boxes on the main Stage. When complete, I select them one-by-one and convert them into Symbols. To name the Symbols, I use the following convention: static.text.word. For example, the name of the menu text box, when converted to a Symbol, is static.text.menu.
What is static.text you might ask? I name my Symbols based on their primary state and content. In this case, the text is not animated, hence the term static, and because the Symbol consists of a text box, I follow with text. Finally, I include the text itself, such as menu. The result: static.text.menu. Its one more way of further organizing Symbols as there can be a lot of Symbols in Flash movies.


The menu folder with the text subfolder and the subfolders beneath text.
Note the names of the Symbols.

There are a couple of additional static Symbols we’ll need to create. Again, when I say static, I refer to the fact that there is no animation occurring within the Symbol itself. I’ve created an additional subfolder called static.elements in the menu folder. We’ll store static Symbols that are not text based there. I’m creating two Symbols, static.arrow (the arrow or triangle shape used in the movie) and static.block (a square shape without a stroke to be used in Buttons).
Finally, I’m going to create a Symbol called clip.arrow. When a Symbol name begins with the word clip, it indicates that the contents of they Symbol are a complete assembly of other Symbols into a self-contained unit. For example, the entire menu system will be called clip.menu. It will consist of all the Symbols required to create the menu system. Once assembled, an Instance of that single Symbol, clip.menu, is placed on the Timeline or Stage. In this case, clip.arrow consists of four Layers, with an Instance of static.arrow on each Layer, oriented to the left, right, down, and up directions.


What is the purpose of clip.arrow? Well, originally I’d planned to use ActionScript to change the orientation of the arrow with script like:

on (release) {
arrowClip.gotoAndStop("left");
}

However, as you’ll see later in the article, I abandoned this idea for another one. By the time I abandoned the idea I’d already used numerous instances of clip.arrow whereas I had really to only use static.arrow. Planning in Flash can be difficult and mistakes made. I could fix the mistake, but it really doesn’t affect the movie in any way.


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