Jump to Main Content

Creating a Flash — driven DHTML menu

Creating the submenu buttons – second tier

Repeat the same button creation process for the second tier as we did for the first tier submenu. Make sure you are on the submenu one layer in the second tier:

Second Tier Submenu

Additionally, make sure you start the process on frame twenty- three. Position the second submenu button as follows:

  • X: 120.0
  • Y: 82.0

Create the fade sequence – second tier

When a visitor clicks the second main menu button, the first tier submenu will be hidden and the second tier menu will show beneath. Since the fade sequence is the same for each submenu button, we will use the first submenu button as our example. Follow these steps to create the fade sequence:

  • Right click frame thirty- three and select Insert Key Frame

For frame twenty-three:

  • In the properties panel, set Alpha as color

For frame thirty three:

  • In the properties panel, set none as color

To complete the fade sequence, complete the following:

  • Between frames twenty- three through thirty- three, right click and select Create Motion Tween:

Create Motion Tween

Repeat this process for the remaining second tier submenu buttons replacing instance and library names where appropriate. Change coordinates as follows:

  • Sub menu two
    • X: 120.0
    • Y: 113.0
  • Sub menu three
    • X: 120.0
    • Y: 145.0
  • Sub menu four
    • X: 120.0
    • Y: 177.0

Adding a stop command

Right now, when the movie loads, the two main buttons will fade in and then loop. We add a stop command in the main timeline to solve this issue. Follow these steps:

  • Make sure you are on the action script layer
  • Right click and select Insert Key Frame
  • Press F9 on your keyboard to open the actions panel and type the following:
stop();

Save your file and use dhtmlmenu_start.fla to compare.

We will continue with the functionality next.

top of page