Navigation Bars with Four-State Buttons


Moving up the complexity ladder is a navigation bar with four-state buttons. The Set Nav Bar Image behavior is used to create this type of navigation bar, where the buttons not only have rollovers, but also communicate to the user which page is currently being browsed.

A navigation bar using this behavior has four states. Each state represents the button's appearance in reaction to a mouse event:

  • The Up state is the default or untouched appearance of the button.

  • The Over state is the way the button appears when the pointer is moved over it.

  • The Down state represents the button after it is clicked.

  • The Over While Down state is the appearance when the user moves the pointer over a button that is in the Down state.

To add the Set Nav Bar Image behavior, follow these steps:

1.

First, you need to build a navigation bar. Begin by creating a background shape and a piece of text.

2.

Next, make those graphics into a Button symbol by choosing Modify, Symbol, Convert to Symbol (F8) and select Button in the dialog box. Make sure you replace the default Symbol name with a more meaningful name.

3.

Press OK to convert the text and image into a button symbol.

4.

Double-click the new button symbol to launch the Button Symbol Editor. Modify the button attributes in the editor for each of the four states (see Figure 4.10).

Figure 4.10. Use the Button Symbol Editor to create four states (Up, Over, Down, and Over While Down) to each button in the navigation bar.


5.

In the Down and the Over While Down states, make sure that the Include in Nav Bar option (located at the top of the editor) is checked. These options should be checked by default.

Repeat this process for the rest of your navigation bar buttons.

Tip

To make life easier after you export the navigation bar, take a moment to select each slice and enter a name for the slice, a label for the button, and a URL in the Property inspector.


Double-check that everything is going to work by selecting each button and looking in the Behaviors panel. Each slice should now have the Set Nav Bar Image behavior applied to it (see Figure 4.11).

Figure 4.11. Select each slice and use the Behaviors panel to make sure the Set Nav Bar Image behavior is selected.


For the ultimate test, you need to export the file to HTML and view it in your browser. Choose File, Export to get started. In the Export dialog box, make sure that HTML and Images is selected in the Export field.

Click the Options button to launch the HTML Setup dialog box. Click the Document Specific tab. Make sure that the Export Multiple Nav Bar HTML Pages box is checked. Click OK to close the HTML Setup dialog box so Fireworks will export additional pages for each button in the navigation bar. Click Save to complete the export.

Open the page in your browser to see how it works or preview it by clicking the Quick Export button and choosing Preview in Browser from the context menu.



Special Edition Using Macromedia Studio 8
Special Edition Using Macromedia Studio 8
ISBN: 0789733854
EAN: 2147483647
Year: 2003
Pages: 337

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net