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:

New Document Symbol

  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:

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:

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:

Expand Text Field

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

Pointer Tool

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