Creating a Flash-driven Halo Menu
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.
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:
- Leave Flash document selected
- 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 and we'll continue with the page header.