Creating a Flash - driven DHTML menu
Creating the submenu buttons – first tier
For simplicity, we’ll keep our submenu buttons inside the main timeline. Since each of the buttons has the same properties, we’ll use submenu one from the first tier submenu as our example. After completing the button, we’ll adjust the second tier submenu accordingly. Follow these steps to create the first tier submenu button:
- Make sure you are on the submenu one layer as shown below:
- Right click frame eleven and select Insert Key Frame
- 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 submenuone with the following properties:
- Font: Arial
- Size: 20
- Color: Black (#000000)
- Font-weight: Bold
- Font-style: Italic
- Text-alignment: Left
- 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 submenuone and select button
- In the library, double click the button to enter symbol editing mode
- Rename your layer submenuone
- Create the other three states for your button; remember the hit state to make your button clickable
Click the blue backward arrow button to exit symbol editing mode:
In the properties window, locate the Instance text field:
- Type oneBtn
- Position the button at the following coordinates:
- X: 120.0
- Y: 55.0
Create the fade sequence – first tier
When a visitor clicks the first main menu button, the first tier submenu will fade in beneath. Since the fade sequence is the same for each submenu button, we will use our current submenu button as our example. Follow these steps to create the fade sequence:
- Right click frame twenty -one and select Insert Key Frame
For frame eleven:
- In the properties panel, set Alpha as color
For frame twenty- one:
- In the properties panel, set none as color
To complete the fade sequence, complete the following:
- Between frames eleven through twenty- one, right click and select Create Motion Tween:
Repeat this process for the remaining first tier submenu buttons replacing instance and library names where appropriate. Change the coordinates as follows:
- Sub menu two
- X: 120.0
- Y: 89.0
- Sub menu three
- X: 120.0
- Y: 117.0
- Sub menu four
- X: 120.0
- Y: 148
We will continue with creating the second tier submenus next.