Creating a Flash - driven DHTML 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 to 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 a DHTML menu. In this article, we will walk through creating a DHTML menu and how to show and hide submenus. In addition, we will consider accessibility issues involved with this type of menu.
If you would like to follow the DHTML 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.
| Printable Version | |
| Word | |
| Download Project Files | |
| Zip | |
Advantages/Disadvantages to the menus mentioned
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 menuone.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:
| ActionScript | ActionScript |
| Stops | |
| Labels | |
| Button One | Top Button |
| Sub-Menu | |
| Sub-Menu | |
| Sub-Menu | |
| Sub-Menu | |
| Button Two | Top Button |
| Sub-Menu | |
| Sub-Menu | |
| Sub-Menu | |
| Sub-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 main menu buttons – first and second tier
Since each of the main menu buttons has the same characteristics, we will use "topbutton" from our first tier as our example. Follow these steps to create the button:
Make sure you are on the “topbutton” layer as shown below:
- Right click 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
- Type Button One with the following properties:
- Font: Arial
- Size: 20
- Color: Black (#000000)
- Font-weight: Bold
- Font-style: Italic
- 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 and select Convert to symbol, in the symbol window, type buttononetop and then select button
- With the button selected, in the properties window, locate the Instance text field:
- Type buttononeBtn
- Position the button at the following coordinates:
- X : 86.7
- Y : 23.9
- In the properties window, change the drop down list next to the Instance text field:
- Track as menu item
Repeat these steps for the other button, replacing instance and library names where appropriate.
Why Track as menu item?
Often times when placing multiple buttons in a deep hierarchy, such as this one, leaving the default setting for buttons to Track as buttons will cause buttons to stop working. Setting the buttons to Track as menu item fixes the issue.
Create fade sequence for main menu buttons – first and second tier
Since each of the main menu buttons have the same fade sequence, we will use top button from our first tier as our example. Follow these steps to create the fade sequence:
- Make sure you are on the top button layer
- Right click frame ten and select Insert Key Frame
For frame one:
- Select the button
- In the properties window, set Alpha as color
For frame ten:
- Select the button
- In the properties window, set none as color
To complete the fade sequence, follow these steps:
- Between frames one through ten, right click and select Create Motion Tween:
Repeat this process for button two of the second tier from the main menu except position the button at the following coordinate:
- X : 82.0
- Y : 57.9
We will continue by creating the sub menu buttons in the first-tier.