Create button states

Next you 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.

1. Double-click the button instance you created.

   The Button Editor appears with the button graphic displayed in the work area.

   
   
   

2. 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.

3. Click the Over tab, and 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 decide to change the color of the rectangle behind the text.

4. Select the rectangle on the Over tab, making sure you select the rectangle and not the text.

   To select the rectangle, select the Subselection tool (or press A) and hover carefully over the left or right edges of the button graphic. The outlines of two overlapping objects should appear. The rectangle has 4 selection points while the text has 6 selection points. Carefully select the outline with 4 selection points. If the name of the object in the Property inspector is "Button rectangle," you successfully selected the rectangle.

5. Click the Fill Color box in the Property inspector and select black as the color.

   The rectangle is now black while the text remains white.

6. 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 don't change the color of the rectangle; you leave it as it is.

7. Click Done in the Button Editor to apply your changes to the button symbol.
8. Click the Preview button in the Document window and test the button's states.

   Disable slices if necessary. When you are finished, click the Original button and enable slices again.

9. Save your work.

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/fireworks/8/fwhelp/gs_06_w9.htm

Add Comment