A critical issue to decide when developing websites is what navigational menu will be used. First you need to decide how the menu will fit into the proposed layout, for example in a horizontal or vertical format. Next, you need decide what type of navigational menu will be used such as: JavaScript-based rollovers, CSS - styled list menus, or menu creation tools which provide a variety of options, automate creation of the menu and are easily customized.

Often times, one doesn't think of using Flash to create a navigation system. However, if Flash is properly implemented it can provide an interactive option beyond the capability of HTML and CSS. One example is the halo menu. In this tutorial, we will walk through creating a halo menu and how to show or hide submenus. In addition we will consider accessibility issues involved with this type of menu.

If you would like to follow the halo menu's step-by-step development, or even try your hand at creating a menu as you progress through this article, you will find the project files link helpful.

Finished Page

Project Files

Advantages and Disadvantages to Menus

It is probably safe to say that no menu presented today is perfect, at least from a code-based perspective. For example, if you use a menu system with CSS and JavaScript you may discover that if:

• JavaScript is disabled in a visitor's browser, the menu will not work
• CSS isn't developed with cross-compatibility in mind, its behavior is likely to be inconsistent between browsers and operating systems

When using Flash to create a menu, the following can also be problematic:

• If the visitor doesn't have the correct Flash player version installed, the navigation will not render or work properly
• You lose the ability to interact with assistive readers. When you use regular HTML anchor tags and CSS you can provide assistive readers with navigation tools such as tabbed key support

From here you can see that it is critically important for you to consider your website's intended audience. Once all factors have been accounted for, choose the navigation system which best suits your needs. For this article, we will choose the Flash-based option. Let us begin.

Create the file

Inside Flash, create a new file named halomenu.fla by following these steps:

• From the main menu, select File>New, and in the following window:

1. Leave Flash document selected
2. Left click OK

Create the following hierarchy:

Folder	Layer
	ActionScript
	ActionScript
	Stops
	Labels
Main Header
	page header
Top Buttons
	home
	services
	gen info
	tutorials
Services Submenu
	main menu
Gen Info Submenu
	main menu
Tutorials
	main menu

As you can see, folders are on the left and layers are on the right. Assign colors to your folders and layers as you desire. Make sure you reduce the magnification to 50% through the zoom drop down list:

Create the page header

Let's create our page header first, since it's the easiest. Navigate to the page header layer:

• Select frame one
• Select the text tool button ("A") from the Tools menu and drag a text field instance on the stage
• Make sure the text field is static
• In the text field type Halo Menu and use the following properties:
• Font: Arial
• Size: 30
• Color: Black (#000000)
• Text alignment: Center
• In case the text field doesn't expand to accommodate the text, move the cursor to the top right corner and drag to the right until the text fits inside:

• Use the pointer tool from the tools menu to mark the desired text:

• Then right-click it, select Convert to Symbol, and in the symbols window, type halomenutitle and select graphic

Save your file.

Create the fade sequence – page header

We'll examine the details on how this works a little later in this article, but for now:

• Select frame one, and select Alpha as color in the Properties panel
• Right-click frame ten and select Insert Key Frame
• Select the graphic symbol on the stage, and select None as color in the Properties panel
• Between the empty area for frame one through frame ten, right-click and select Create Motion Tween:

• Place the page header at the following coordinates:

• X: 198.0
• Y: 19.0
• Lock the page header layer:

Create the main menu buttons

For our purposes, four buttons make up the main menu. The only difference between these buttons is their X-Y coordinates. As a result, we will use the Home button as our example for the creation process. Follow these steps in the Home layer:

• Select frame one
• Select the text tool button ("A") from the Tools menu and drag a text field instance on the stage
• Type Home in the text field
• Make sure the text field is static. In Properties, enter:

• Font family: Arial
• Size: 20
• Color: Dark blue (#14314F)

• In case the text field doesn't expand to accommodate the text, move the cursor to the top right corner and drag to the right until the text fits inside

• Use the pointer tool to mark the desired text, then right-click it, select Convert to Symbol, and in the symbol window, type home and select button

Next, with the object selected:

• In Properties, type homeBtn in the Instance text box:

• Double-click the button in the library to enter symbol editing mode
• Rename this layer home
• Create the other three states for your button; remember the hit state to make your button clickable
• Click the blue background arrow to exit symbol editing mode:

• Position the button at the following coordinates:

• X: 58
• Y: 86

Repeat this process for Services, General Information, and Tutorials, replacing instance names in the library and on the stage in the corresponding Instance text boxes.

Once completed, change the coordinates for each button as follows:

• Services
• X : 154
• Y : 86

• General Information
• X : 262
• Y : 86

• Tutorials
• X : 402
• Y : 86

Fade Sequence

When the movie loads, we want the page header as well as our four main menu buttons to fade in until frame ten. While we have this completed for the page header, we need to complete the process for our buttons. Since the process is the same for all buttons, we will use Home as our example:

• Right-click frame ten
• Select Insert Key Frame
• Select the pointer tool
• In the properties panel, select none as color

For frame one:

• In the properties panel, select Alpha as color

We will create a motion tween for each button to fade in smoothly as follows:

• Between frames one through ten, right-click and select Create Motion Tween:

Repeat this process for the remaining menu buttons.

Finally, in the Stops layer:

• Right-click frame ten
• Select Insert Key Frame
• Press F9 to open the action script panel and insert the following code:

[as]stop();[/as]

Currently, when the movie loads, it begins at frame one, plays to frame ten, and loops. To prevent this we insert the stop command at the end of the frame sequence, frame ten in this case.

Save your file, and refer to halomenu_start.fla from the download if you need to compare.

Submenu buttons

Since each of the submenu buttons are the same except for stage positioning, we can use the Services submenu as a template for the creation process. First, we create an empty movie clip to hold our submenu buttons. On the main menu layer under Services sub menu:

• Right-click frame ten
• Select Insert Blank Key Frame
• From the main menu, select Insert>New Symbol and in the symbol window type servicessubmenu and select movie clip
• Rename the layer ActionScript
• Click the blue background arrow to exit symbol editing mode:

You will return to the main timeline. Make sure you are on frame ten. From the library, position the movie clip on the stage:

• X : 196
• Y : 152

With the movie clip selected, in the Instance text field under Properties:

• Type servicesmc

With the movie clip selected, double-click it to enter symbol editing mode, and create a hierarchy:

Folder	Layer
Action Script
	Action Script
	Stops
	Labels
Services Navigation
	consulting
	freelance
	hosting

Since our submenu buttons differ only in position placement, we will use Consulting as our template. In frame two:

• Right-click and select Insert Key Frame
• Select the text tool button ("A") from the Tools menu and drag a text field instance on the stage
• Type consulting
• Set up the font:

• Font: Arial
• Size: 20
• Color: Dark red (#990000)

• In case the text field doesn't expand to accommodate the text, move the cursor to the top right corner and drag to the right until the text fits inside
• Use the pointer tool to mark the desired text, then right-click it, select Convert to Symbol, and in the symbol window, type consulting and select button
• Position the button (note that these are negative numbers):

• X: -159.0
• Y: -25.0

• On the stage, select the Consulting button, and in the Instance text field under Properties, type consultingBtn
• Double click the button to enter symbol editing mode
• Rename your layer consulting
• Create the other three states for your button; remember the hit state to make your button clickable
• Click the blue background arrow to exit symbol editing mode:

You should return to the services submenu. In the library window:

• Right-click the consulting button
• Select duplicate

In the symbol window:

• Type consultinggraphic
• Select graphic
• Click OK

In the library, double-click the graphic and you will see that we have four key frames.

This is because when we converted our button to a graphic, Flash retained our button's four states. We don't need these, so delete frames two through four. Click the blue background arrow to exit symbol editing mode:

You should return to the main timeline. Ensure you are on the correct layer in the main timeline and create two additional submenu movie clips using these coordinates:

General Information Submenu

• X : 330.0
• Y : 152.0

Tutorials Submenu

• X: 448.0
• Y: 152.0

Follow the same steps to create the remaining submenu buttons and graphics for Services, General information and Tutorials using the following coordinates (note that some of these coordinates are negative numbers):

Services

• Freelance

• -49.0
• -25.0

• Hosting

• 59.0
• -25.0

General Information

• FAQ

• X: -117.0
• Y: -25.0

• Resume

• X: -45.0
• Y: -25.0

• About

• X: 49.0
• Y: -25.0

Tutorials

• Tutorials Contact

• X: -198.0
• Y: -25.0

• Tutorials Idea

• X: -36.0
• Y: -25.0

Save your file and use halomenu_submenu.fla as a comparison.

Fade Sequence – Submenu buttons

When a visitor moves the cursor over one of the main menu buttons, we want the submenu buttons to fade in. Since the fade sequence is the same for all submenu buttons, we use the services submenu buttons as our example. To create the fade sequence for the buttons:

• In the services movie clip, select key frame two in the consulting layer
• In the properties panel, select Alpha as color

For key frame six:

• Right-click and select Insert Key Frame
• In Properties, select none as color
• Between frame two through six, right-click and select Create Motion Tween:

Save your file and use halomenu_submenu_fadein.fla as a comparison. Repeat this process for the remaining submenu buttons.

Fade Out Sequence – Submenu buttons

When a visitor moves the cursor over a main menu button, the appropriate submenu will fade in below. When the visitor rolls onto another main menu button, the old submenu should fade out and the new submenu should fade in. Since each of the Services submenu buttons has identical properties, we use the consulting button as our template for creating the fade out sequence. To create the sequence:

• Select key frame seven
• Right-click and select Insert Blank Key Frame
• Left click the Consulting graphic from the library and enter the same x-y coordinates as the button

For key frame eleven:

• Select key frame eleven
• Right-click and select Insert Key Frame
• Set color to Alpha

For key frame seven:

• Set color as none
• Between frame seven through eleven, right-click and select Create Motion Tween:

Repeat this process for the remaining submenu graphics. To prevent the fade out sequence from looping continuously:

• Inside the services movie clip, select the stops layer
• Select frame one
• Press F9 to open the action script panel and add a stop command:

[as]stop();[/as]

• Add stop commands to key frames six and eleven by following these steps:
• Right click frame six and select Insert Key Frame
• Press F9 on your keyboard to open the action script panel and type the following:

[as]stop();[/as]

Save your file and use halomenu_submenu_fadeout.fla as a comparison.

Showing and Hiding Submenus

In order for the submenus to show or hide, we need to set two frame labels, one set to show and the other set to hide. We use frame labels so that we can move frames containing content without breaking our code. For example, if we instruct a submenu to show by using a frame number…

[as] servicesBtn.onRollOver=function(){ servicesmc.gotoAndPlay("10"); } [/as]

…and then move the show sequence to another frame number our code will not work. Using frame labels solves this issue. To add frame labels to show our submenus, make sure you are inside the services submenu:

• Select key frame two in the labels layer
• Right-click and select Insert Key Frame
• In Properties panel, locate the frame label text field:

• Type show

Then, to hide this menu:

• Select key frame seven
• Right-click and select Insert Key Frame
• In Properties panel, locate the frame label text field:

• Type hide
• Right click frame ten and select Insert Frame

Repeat these steps for the remaining submenus. Save your file and use halomenu_showhide.fla as a comparison.

Choosing which submenu to show

To determine which menu we want to show, we assign a value to a variable. Since we are dealing with the services submenu, we set the variable, menuOpen (created later); to services in key frame two of the action script layer by following these steps:

• Right click frame two and select Insert Key Frame
• Press F9 on your keyboard to open the action script panel and type the following:

[as]_parent.menuOpen="services";[/as]

Click the blue background arrow to exit symbol editing mode, and you return to the main stage.

Continuing, make sure on the action script layer, in frame two, you change the value of the variable (menuOpen) inside the general information and tutorials movie clips to the following:

[as]_parent.menuOpen="geninfo";[/as]
[as]_parent.menuOpen="tutorials";[/as]

Save your file, and remember that you can use halomenu_menushow.fla as a comparison.

Why did we convert our submenu buttons to graphics?

Though the reasoning requires some explanation, the answer is scope. You can hide the button's visibility on the stage, but it's still active. When a visitor moves the cursor over one of the main menu buttons, the corresponding submenu appears; the submenu movie clip is in scope to the rest of the movie. Thus, when the cursor hovers over to another main menu button the previous submenu hides. At this point, if the cursor moves over to where the services submenu resides the mouse pointer would change to a hand, which would be an awkward response.

We prevent this from happening by using a graphic symbol. By duplicating the button, we acquire the same font family and size, and by deleting frames two through four we eliminate the other states associated with the button. By placing the graphic symbol instead of the button in the hide sequence, we create the illusion that the button has disappeared when the sequence plays. The graphic symbol is still in scope, but graphic symbols don't exhibit button behavior, so this technique eliminates any potentially confusing behavior.

Why did we start our submenu buttons on key frame 2 and stop our movie clips on key frame 1?

There are two reasons. First, we don't want our submenu buttons in scope or to show until the visitor moves the cursor over the main menu buttons. Without a stop command, when the movie loads, all three submenus will show once the play head in the main timeline hits frame ten. Therefore, we place a stop command on key frame one inside each movie clip. We can't instruct the submenu movie clips to play in the same key frame because there would be conflicting commands; you can't instruct the play head inside the movie clip to play and stop in the same key frame. So we placed the submenu buttons in key frame two.

Functionality

Since we have completed the user interface, let's review briefly the menu's intended behavior. When the movie loads, we see the page header and four main menu buttons fade in. As we move the cursor over each main menu button, the appropriate submenu shows. Further, as we cursor over the services submenu, and then over tutorials, we see the services submenu hide and the tutorials menu show. Continuing, if a submenu is visible and the visitor moves the cursor over the Home button, the currently visible submenu will be hidden. We use conditional logic to accomplish simple toggling behavior.

Submenus showing

So here is how it's done. First, we add some action script to show each submenu. From the main timeline, select the action script layer in frame ten and follow these steps:

• Right-click and select Insert Key Frame
• Press F9 to open the action script panel and type the following:

[as]servicesBtn.onRollOver=function(){     servicesmc.gotoAndPlay("show"); } geninfoBtn.onRollOver=function(){     geninfomc.gotoAndPlay("show"); } tutorialsBtn.onRollOver=function(){     tutorialsmc.gotoAndPlay("show"); }[/as]

We use the onRollOver method of the button, specify which movie clip (such as services submenu), and use the gotoAndPlay method of the movie clip, followed by a parameter, in this case, show. Recall, show is the name of the frame label associated with playing the show sequence which shows the submenus. Save your file and use halomenu_menushow_stepone.fla as a comparison if you like.

Adding the hide function

To hide our submenus when another main menu button is hovered over, add the following code:

[as]var menuOpen:String="close"; function isitOpen(){ if(menuOpen=="services"){     menuOpen="close";     servicesmc.gotoAndPlay("hide"); } else if(menuOpen=="geninfo"){     menuOpen="close";     geninfomc.gotoAndPlay("hide"); } else if(menuOpen=="tutorials"){     menuOpen="close";     tutorialsmc.gotoAndPlay("hide"); } }[/as]

Let's examine this code in greater detail:

• First, we use the var keyword to declare a variable named menuOpen. We set it as a string data type and assign it a value of close
• Next, we create a function named, isitOpen. Inside this function, we check the value of our variable, menuOpen. We can determine the value of the variable by using a Boolean check (double equal sign)
• In the first condition, we check the value of the menuOpen variable:

• If the value is equal to services, the condition is true and we set the menuOpen variable to close and instruct the services submenu to play the hide sequence
• If the value is not equal to services the first condition is false and we nest two additional checks to test the value of menuOpen for the remaining submenus

Remember, inside our submenu movie clips, for frame two in the action script layer, we set the value of menuOpen to the appropriate submenu. As a result, when the movie loads and the cursor hovers over a main menu button, such as services, the show sequence plays. Subsequently, menuOpen is set to services; the first if statement is true; the variable is set to close and the hide sequence plays. Remember, we hide any submenu which might be visible when moving the cursor over the home button by adding the following to the rollover method:

[as]homeBtn.onRollOver=function(){     isitOpen(); } [/as]

We call the function isitOpen, and its job is to determine if any submenu is showing. If so, the submenu hides. Save your file and preview the results. Hover over any of the main menu buttons, and then hover over Home; the appropriate submenus should hide. For an example, visit:

http://midwestwebdesign.net/tutorials/flash/halomenu/halo_menu_stepthree.html

Save your file and use halo_menu_stepthree.fla as a comparison if you like.

Completing the menu

Currently, hovering over services will show its submenu. However, hovering over general information or tutorials will show their submenus while the existing services submenu remains visible; it should be hidden, right? To fix this, for each button we add the following:

[as]
servicesBtn.onRollOver=function(){
if(menuOpen=="services"){ 
    null;
}
else if(menuOpen=="close" || menuOpen=="geninfo" || menuOpen=="tutorials"){    
isitOpen();    
servicesmc.gotoAndPlay("show"); } }
[/as]

Here's how it works:

• We check the value of menuOpen. If it's equal to services, we do nothing, since the menu is currently visible
• If it's equal to close, geninfo, or tutorials, we first call the function, isitOpen

The reason for calling the function first is to hide the immediately previous submenu before showing the next submenu, such as when the visitor cursors over services, then over tutorials. How are we hiding the services submenu? Recall that when we declared our variable, we assigned a value of close. If menuOpen's value is equal to services, we know the submenu is visible and that menuOpen is now set to a value of close. We can check the value of one variable for three different values and implement a show/hide toggle behavior by using the logical OR operator, which uses the double pipe (||) in action script.

After the function call, we instruct the appropriate movie clip, in this instance, services, to play the show sequence. You might find the logic here a bit odd, since we are instructing all submenus to be hidden first, and then we instruct the services submenu to show. Our reason is simple; we are ensuring that only the correct submenu will show on a main menu button rollover. For the other two main menu buttons, we alter the last if statement for General Info:

[as]geninfoBtn.onRollOver=function(){
if(menuOpen=="geninfo"){    
null;
}
else if(menuOpen=="close" || menuOpen=="services" || menuOpen=="tutorials"){    
isitOpen();    
geninfomc.gotoAndPlay("show"); } }
[/as]

And for Tutorials:

[as]tutorialsBtn.onRollOver=function(){
 if(menuOpen=="tutorials"){    
null; }
 else if(menuOpen=="close" || menuOpen=="services" || menuOpen=="geninfo"){    
isitOpen();    
tutorialsmc.gotoAndPlay("show"); } }
[/as]

For each button we change the last two checks on the menuOpen variable as appropriate. Thus, for the general information button the last two checks on menuOpen need to be services and tutorials. For the tutorials button, change the last two menuOpen checks to services and geninfo. Save your file and preview the results; at this point your menu should be fully functional.

Organize the library

Since our library at the moment is disorganized, let's move our work into a logical folder scheme. Use the New Folder icon:

Create the following folders and place the corresponding symbols as follows:

• Tutorials Folder – All related tutorials symbols
• Services Folder – All related services symbols
• General Info Folder – All related general information symbols

You can see the completed work here:

http://midwestwebdesign.net/tutorials/flash/halomenu/halo_menu_finished.html

Summary

In this article we learned how to use Flash to create a simple halo menu. We also learned a bit about:

• Type of menus available
• Advantages and disadvantages for each type of menu
• Creating button symbols using the text tool
• Creating submenus using movie clips
• Duplicating buttons and convert them to graphics to solve scope issues
• Creating a variable, function and assign different values to the variable
• Creating simple conditional logic using if statements to determine the value of the variable and perform an appropriate action.
• How to check a variable for three different values using the logical operator OR.

Take what you learned here and customize your halo menu to your heart's content!

If you have questions, please follow the link below.

http://midwestwebdesign.net/tutorials/contact.aspx