Creating Buttons – Lesson 51 Creating Buttons Lesson 5

2 Creating Buttons – Lesson 5 Objectives Create and edit rollover buttons. Make new buttons from an existing one. Use the library to add instances of a button. Add links to your buttons. Create a button from an existing graphic.

3 Creating Buttons – Lesson 5 Create rollover buttons Rollover buttons are quite common on Web pages. A rollover button changes appearance when the user moves the pointer over it or clicks the button. There are four rollover states: Up – Active when the user is not interacting with the button. Down – Active when the button is clicked. Over – Active when the pointer is over the button. Over While Down – Active when the user holds the pointer over the button on a page where the button is already depressed.

4 Creating Buttons – Lesson 5 Use the Button editor When you create a button in Fireworks MX, the button appears in the Button editor. The Button editor contains tabs for each button state, making a button easy to create. When a button is created, it is automatically added to the symbol library, making it easy to use in other parts of your document. Open the Button editor by clicking the Edit menu, then Insert, then New Button.

5 Creating Buttons – Lesson 5 The Button editor This figure shows the Button editor with the completed Up state for a button. This button is composed of several objects. First, a rectangle was created in a blue color. Next, a smaller rectangle was created, colored dark gray, and aligned with the left edge of the first rectangle. Next, a small triangle was created, colored white, and placed within the gray rectangle. Finally, text was added to the button. This is how the button will appear in the Up state.

6 Creating Buttons – Lesson 5 Create the Over state button from the Up state button You can quickly create the Over state for a button using the button created for the Up state. To do so: Click the Over tab in the Button editor. Click the Copy Up Graphic button in the Button editor window to copy the button. Change the color of the triangle to some new color, and change the color of the large rectangle as well. A color change indicates to the user that the button has been clicked. Select the Active Area tab and set the slice and slice guides for the button. Click the Done button when finished.

7 Creating Buttons – Lesson 5 Create a new button from an existing button You can create a new button from an existing button using the Library panel. Click the Window menu, then Library. Click the button to be used to select it, click the Options menu of the Library panel, then click Duplicate. Double-click the new button just created and enter the name to use for the button. With the new button still selected, double-click the preview of the button at the top of the panel to open an editing window. Change the text or color as desired to modify the button for its new purpose.

8 Creating Buttons – Lesson 5 The Library panel The figure on the left is the Library panel. Note the preview image of the button at the top. The button name is listed below the preview window. Double-click the name to rename it. Double-click the preview to edit it. The figure on the right shows the Options menu of the Library panel. Note the Duplicate option used to copy a button.

9 Creating Buttons – Lesson 5 Add instances of a button to the canvas Once a button is in the Library, a new instance of the button can be used over and over in your document. Just drag a button from the library to the canvas to create a new instance. If you edit the master copy of the button in the library, all instances of the button will be automatically updated.

10 Creating Buttons – Lesson 5 Establish links for your buttons Creating a button does not establish any action for the button. Buttons on Web pages are usually created for the purpose of linking to some other page or section of the page. You need to establish hyperlinks for your buttons before the buttons will do anything. Set the links in Fireworks MX before exporting the file to Web format.

11 Creating Buttons – Lesson 5 Setting a link for the button Links can be set in the Property inspector. Click the Link box and enter the complete path name for the link for each button. When you export the file, the link will be exported with the button. You can enter alternative text for the button in the Alt box of the Property inspector. Hint: Use the button labels (the text) as the alternative text. The Alt text will appear in some browsers while the image is loading. For browsers that don’t support images, the Alt text appears in place of the button.

12 Creating Buttons – Lesson 5 Create a button from an existing graphic Any existing bitmap graphic in your document can be used as a button. The graphic must first be converted to a Fireworks button. To do so: Select the graphic to convert, click the Modify menu, then Symbol, then Convert to Symbol. In the Symbol Properties dialog box, assign a name to the button, click the Button option, then click OK. The graphic is now a button and has been copied to the Library panel. Double-click the button to open the Button editor and make any changes required for the button.

13 Creating Buttons – Lesson 5 A sample page with buttons This figure shows a page with several buttons. The buttons across the top of the page were all created and/or copied using the Button editor and the Library panel. The buttons down the left side of the page were all created from bitmap graphics. Buttons created from scratch or copied from existing buttons. Bitmaps converted into buttons.

14 Creating Buttons – Lesson 5 Summary In this lesson, you learned: How to create and edit rollover buttons. How to make new buttons from an existing one. To use the library to add instances of a button. How to add links to your buttons. How to create a button from an existing graphic.