Adobe cs 6 firework - Create button symbols

Buttons are a special type of symbol used as navigation elements for a web page. You can easily
edit buttons using the Property inspector.
Because you can drag instances of a button from the symbol library into your document, you can
change the graphical appearance of a single
button and automatically update the appearance of all button instances in a navigation 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. Fireworks moves all the components and states associated with
the buttons that you drag into the document.
Like other symbols, buttons have a registration point (a center point that helps you align text and
the different button states while you edit the
button).
1. Select the object that you want to convert to a button.
2. Select Modify > Symbol > Convert To Symbol.
3. In the Convert To Symbol dialog, enter a name for the button.
4. In the Type options, select Button.
5. (Optional) To enable 9-slice scaling for the button, select Enable 9-Slice Scaling guides.
6. (Optional) To save the graphic as a button to the graphics library in Fireworks, select Save To
Common Library.
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 plus (+) icon next to the Filters label in the Property inspector.
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.
Convert Fireworks rollovers into buttons
You can convert buttons from rollovers that were created in previous versions of Fireworks and
save them in the library. For more information
about rollovers, see Interactive slices.
1. Delete the slice or hotspot covering the rollover images.
2. Select Show All States from the Onion Skinning menu in the States panel.
3. Select all the objects you want to include in the button. Use the Select Behind tool to select
hidden objects.
4. Select Modify > Symbol > Convert to Symbol.
5. Enter a name for the symbol in the Name box and select a Button symbol type.
To convert four-state animations to buttons, select all four objects to place each on its own button
state.
Insert and import button symbols
You can insert instances of button symbols into a document from the Common Library panel. You
can also import existing button symbols into the
Document Library panel of a new document. For more information, see Import and export
symbols.
1. To insert instances of a button into a document, open the Common Library panel and drag the
button symbol to the document.
2. To place additional instances of a button symbol, do one of the following:
Select an instance, and then select Edit > Clone to place another instance directly in front of the
selected instance. The new instance
becomes the selected object.
173To the top
Drag another button instance from the Document Library panel to the document.
Alt-drag (Windows) or Option-drag (Mac OS) an instance on the canvas to create another button
instance.
Copy an instance and then paste additional instances.
3. To import button symbols into the Document Library panel of a new document, do one of the
following:
Drag and drop (or cut and paste) a button instance from another Fireworks document.
Import button symbols from a Fireworks PNG file.
Export button symbols from another Fireworks document to a PNG library file, and then import
button symbols from the PNG library file
into the document.
Select Import Symbols from the Document Library panel Options menu. The libraries contain a
wide variety of premade button symbols
prepared by Adobe.