Creating a Flash-driven Halo Menu
Create the fade sequence – page header
We’ll examine the details on how this works a little later in this article, but for now:
- Select frame one, and select Alpha as color in the Properties panel
- Right-click frame ten and select Insert Key Frame
- Select the graphic symbol on the stage, and select None as color in the Properties panel
- Between the empty area for frame one through frame ten, right-click and select Create Motion Tween:
- Place the page header at the following coordinates:
- X: 198.0
- Y: 19.0
- Lock the page header layer:
Create the main menu buttons
For our purposes, four buttons make up the main menu. The only difference between these buttons is their X-Y coordinates. As a result, we will use the Home button as our example for the creation process. Follow these steps in the Home layer:
- Select frame one
- Select the text tool button (“A”) from the Tools menu and drag a text field instance on the stage
- Type Home in the text field
- Make sure the text field is static. In Properties, enter:
- Font family: Arial
- Size: 20
- Color: Dark blue (#14314F)
- 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 home and select button
Next, with the object selected:
- In Properties, type homeBtn in the Instance text box:
- Double-click the button in the library to enter symbol editing mode
- Rename this layer home
- 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:
- Position the button at the following coordinates:
- X: 58
- Y: 86
- Repeat this process for Services, General Information, and Tutorials, replacing instance names in the library and on the stage in the corresponding Instance text boxes
Once completed, change the coordinates for each button as follows:
- Services
- X : 154
- Y : 86
- General Information
- X : 262
- Y : 86
- Tutorials
- X : 402
- Y : 86
Fade Sequence
When the movie loads, we want the page header as well as our four main menu buttons to fade in until frame ten. While we have this completed for the page header, we need to complete the process for our buttons. Since the process is the same for all buttons, we will use Home as our example:
- Right-click frame ten
- Select Insert Key Frame
- Select the pointer tool
- In the properties panel, select none as color
For frame one:
- In the properties panel, select Alpha as color
We will create a motion tween for each button to fade in smoothly as follows:
- Between frames one through ten, right-click and select Create Motion Tween:
Repeat this process for the remaining menu buttons.
Finally, in the Stops layer:
- Right-click frame ten
- Select Insert Key Frame
- Press F9 to open the action script panel and insert the following code:
stop();
Currently, when the movie loads, it begins at frame one, plays to frame ten, and loops. To prevent this we insert the stop command at the end of the frame sequence, frame ten in this case. Save your file, and refer to halomenu_start.fla from the download if you need to compare.
We'll continue with the submenu buttons next.