Submenu buttons

Since each of the submenu buttons are the same except for stage positioning, we can use the Services submenu as a template for the creation process. First, we create an empty movie clip to hold our submenu buttons. On the main menu layer under Services sub menu:

  • Right-click frame ten
  • Select Insert Blank Key Frame
  • From the main menu, select Insert>New Symbol and in the symbol window type servicessubmenu and select movie clip
  • Rename the layer ActionScript
  • Click the blue background arrow to exit symbol editing mode:

Exit Symbol Editing Mode

You will return to the main timeline. Make sure you are on frame ten. From the library, position the movie clip on the stage:

  • X : 196
  • Y : 152

With the movie clip selected, in the Instance text field under Properties:

Movie clip Instance text field

  • Type servicesmc

With the movie clip selected, double-click it to enter symbol editing mode, and create a hierarchy:

Folder Layer
Action Script  
  Action Script
  Stops
  Labels
Services Navigation  
  consulting
  freelance
  hosting

Since our submenu buttons differ only in position placement, we will use Consulting as our template. In frame two:

  • Right-click and select Insert Key Frame
  • Select the text tool button ("A") from the Tools menu and drag a text field instance on the stage
  • Type consulting
  • Set up the font:
    • Font: Arial
    • Size: 20
    • Color: Dark red (#990000)
  • 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 to mark the desired text, then right-click it, select Convert to Symbol, and in the symbol window, type consulting and select button
  • Position the button (note that these are negative numbers):
    • X: -159.0
    • Y: -25.0
  • On the stage, select the Consulting button, and in the Instance text field under Properties, type consultingBtn
  • Double click the button to enter symbol editing mode
  • Rename your layer consulting
  • Create the other three states for your button; remember the hit state to make your button clickable
  • Click the blue background arrow to exit symbol editing mode:

Exit Symbol Editing Mode

You should return to the services submenu. In the library window:

  • Right-click the consulting button
  • Select duplicate

In the symbol window:

  • Type consultinggraphic
  • Select graphic
  • Click OK

In the library, double-click the graphic and you will see that we have four key frames.

Four Key Frames

This is because when we converted our button to a graphic, Flash retained our button's four states. We don't need these, so delete frames two through four. Click the blue background arrow to exit symbol editing mode:

Create Motion Tween

You should return to the main timeline. Ensure you are on the correct layer in the main timeline and create two additional submenu movie clips using these coordinates:

General Information Submenu

  • X : 330.0
  • Y : 152.0

Tutorials Submenu

  • X: 448.0
  • Y: 152.0

Follow the same steps to create the remaining submenu buttons and graphics for Services, General information and Tutorials using the following coordinates (note that some of these coordinates are negative numbers):

Services

  • Freelance
    • -49.0
    • -25.0
  • Hosting
    • 59.0
    • -25.0

General Information

  • FAQ
    • X: -117.0
    • Y: -25.0
  • Resume
    • X: -45.0
    • Y: -25.0
  • About
    • X: 49.0
    • Y: -25.0

Tutorials

  • Tutorials Contact
    • X: -198.0
    • Y: -25.0
  • Tutorials Idea
    • X: -36.0
    • Y: -25.0

Save your file and use halomenu_submenu.fla as a comparison.