Creating Buttons and Pop-up Menus

In Macromedia Fireworks MX® you can create a variety of JavaScript buttons and pop-up menus, even if you know nothing about JavaScript.

The Fireworks MX® Button Editor leads you through the button creation process, automating many button-making tasks. The result is a convenient button symbol. Once you’ve created a button symbol, you can easily create instances of the symbol to make a navigation bar, or nav bar.

Fireworks MX® also has a Pop-up Menu Editor, which allows you to quickly and easily create vertical or horizontal pop-up menus. The Advanced tab of the Pop-up Menu Editor gives you creative control over cell spacing and padding, text indentation, cell borders, and other properties.

When you export a button or pop-up menu, Fireworks MX® automatically generates the JavaScript necessary to display it in a web browser. In Macromedia Dreamweaver, you can easily insert JavaScript and HTML code from Fireworks MX® into your web pages, or you can cut and paste the code into any HTML file.

Creating button symbols
Buttons are navigation elements for a web page. Buttons created in the Button Editor have the following characteristics:

• You can make almost any graphic or text object into a button.
• You can create a button from scratch, convert an existing object into a button, or import already-created buttons.
• A button is a special type of symbol. You can drag instances of it from the symbol library into your document. This allows you to change the graphical appearance of a single button and automatically update the appearance of all button instances in a nav bar.
• You can edit the text, URL, and target for one button instance without affecting other instances of the same button, and without breaking the symbol-instance relationship.
  A button instance is encapsulated.
• Dragging the button instance in the document moves all the components and states associated with it, so there is no more need for messy multi-frame editing.
• A button is easy to edit. Double-click the instance on the canvas, and you can change it in the Button Editor or the Property inspector.
• Like other symbols, buttons have a registration point. The registration point is a center point that helps you align text and the different button states while in the Button Editor.

Create a button symbol
The initial graphic and text for one button has already been created for you. You’ll convert this graphic into a button symbol. Click here.

Select the button graphic (labeled NEW BUTTON TEXT) in the upper left corner of the document.
Choose MODIFY/SYMBOL/CONVERT TO SYMBOL.
The Symbol Properties dialog box opens.

Type New Button in the Name text box, choose Button as the symbol type, and click OK.

A slice appears on top of the button graphic, and a shortcut icon appears at the left of the slice. This indicates that the selection in the workspace is an instance of the symbol you just created. Symbols are like master copies of your graphics. When you change a symbol, all of the instances of that symbol in your document change automatically. Symbols live in the library.

If the Library panel is minimized or isn’t visible, click the Assets panel group’s expander arrow and click the LIBRARY TAB, or choose WINDOW/LIBRARY.
Your symbol is listed in the Library panel.

Create button states
Next you’ll create various states for the button symbol. Button states are the different ways a button appears when rolled over or clicked in a web browser.

Double-click the button instance you created.
Alternatively, you can double-click the preview of the button in the Library panel or the symbol icon beside it in the Library panel’s symbol list.

The BUTTON EDITOR opens with the button graphic displayed in the work area.

Click the tabs at the top of the Button Editor.
The first four tabs represent the button states. The last tab, Active Area, represents the hot area on the button, or where a user must click or roll over to activate the button states. The active area is also the swap area for the button, or the area that changes with each button state. Currently there are no states for the button symbol other than the Up state, the state of the button before it is rolled over or clicked.

Click the Over tab at the top of the Button Editor, then click the Copy Up Graphic button.
The button graphic is copied from the Up tab. The Over state of a button is its appearance when the pointer rolls over it. To give users visual feedback, you’ll change the color of the rectangle behind the text.

Select the rectangle. Be sure to select the rectangle and not the text; if you are unsure which one you are selecting, check the Layers panel to see which one is selected.
Click the Fill Color box in the Property inspector and choose black as the color.

The rectangle is now black.

Click the Down tab at the top of the Button Editor, and click the Copy Over Graphic button.
The button graphic is copied from the Over tab. The Down state of a button is its appearance after a user clicks it. This time you won’t change the color of the rectangle; you’ll leave it as it is.

Click Done in the Button Editor to apply your changes to the button symbol.
Click the Preview tab in the document window and test the button’s states. Turn slices off if necessary. When you are finished, click the Original tab and turn slices back on.

Assign URLs to the buttons
Next you’ll assign a unique URL, or link, to each button instance. A URL, or Uniform Resource Locator, is the address or location of a page on the web. You can easily assign URLs to buttons using the Property inspector.

Select the button instance labeled Home.
Enter index.htm in the Link text box of the Property inspector.

When clicked in a web browser, the Home button will jump to a page called index.htm. You’ll discover later in the tutorial why you linked the Home button to this page.

Select the Vehicles button instance and enter your favorite URL in the Link text box of the Property inspector.

For the purposes of this tutorial, any working URL will do. If you were creating a real web site, you would enter the URL that you wanted the Vehicles button to jump to.

Be sure to enter the URL of an actual web site, so that you can test your button links later.

Assign a URL to each of the remaining button instances. Once again, any working URL will do.
Choose FILE/PREVIW IN BROWSER/. To test button links, you must preview the document in a browser.

If your browser is not listed, you must first select a browser by choosing File > Preview in Browser > Set Primary Browser.

When the document opens in your browser, test the buttons you created. Except for the Home button, which links to a file you haven’t created yet, each button should jump to the link you specified in Fireworks MX®.