PDF (adobe.com)

Apply states to buttons



A button can have up to four different states, which represent the appearance of the button in response to a mouse event. Two-state buttons have Up and Down states. Three- and four-state buttons have the Over state and the Over While Down states. These states represent the appearance of the button when the pointer is moved over it when the button is up (Over) or down (Over While Down).

You can create a navigation bar using two-state or three-state buttons. However, only buttons with all four states can take advantage of the built-in Nav Bar behaviors in Fireworks.

Create a simple two-state button

  1. To enter symbol-editing mode, do either of the following:

    • Double-click an existing button on the canvas.

    • Choose Edit > Insert > New Button.

  2. Do one of the following to import or create the Up state graphic:

    • Drag and drop or import the graphic that you want to appear as the button's Up state into the work area.

    • Use the drawing tools to create a graphic or use the Text tool to create a button from text.

    • Click Import A Button from the Property inspector and select a ready-made editable button from the Import Symbols: Button library. With this option, each of the button's states is automatically filled with the appropriate graphics and text.

    • (Optional) Set the 9-slice scaling guides to keep the button shape from being distorted when it is resized. (See Apply 9-slice guides to a symbol.)

    • (Optional) Select the Text tool and create text for the button.

  3. To create the Over state, select Over from the pop-up menu and do one of the following:

    • Click Copy Up Graphic to paste a copy of the Up state button into the Over window, and then edit it.

    • Drag and drop, import, or draw a graphic.

  4. (Optional) To use Live Filters to create common appearances for each state, select the graphic to which you want to add a Live Filter and click the Add Filters button in the Property inspector.

  5. Select Bevel And Emboss > Inner Bevel, or Inset Emboss, or Outer Bevel, or Raised Emboss.

  6. Select a button preset filter for each state.

    Button preset filter

    Description

    Raised

    The bevel appears to rise from the underlying objects.

    Highlighted

    The button's colors lighten.

    Inset

    The bevel appears to sink into the underlying objects.

    Inverted

    The bevel appears to sink into the underlying objects, and the colors lighten.

Create a three- or four-state button

Although four-state buttons are not mandatory, using them lets you take advantage of the built-in Nav Bar behaviors.

  1. With a two-state button open in the canvas in the symbol editing mode, select Down from the pop-up menu in the Property inspector and do one of the following:

    • Click Copy Over Graphic to paste a copy of the Over state button into the Down window, and then edit it to change its appearance.

    • Drag and drop, import, or draw a graphic.

  2. To add an Over While Down state, verify that the Down state button is open and repeat step 1.

  3. (Optional) Apply preset filters to buttons.

    Note: When you insert or create a graphic for the Down or Over While Down states, the options for including the state in the navigation bar are selected automatically.