Re-usable graphic elements in Fireworks are referred to as symbols. Fireworks has three types of symbols: graphic, animation, and button. When you edit the original symbol object, the copied instances automatically change to reflect the edited symbol (unless you break the link between the two).
Symbols are also helpful for creating buttons and animating objects across multiple states.
For more information on symbols, see Understanding styles and symbols in the dev center.
For a video tutorial on using styles and symbols in Fireworks, see www.adobe.com/go/lrvid4033_fw.
Create a symbol
You can create a symbol from any object, text block, or group, and then store it in the Common Library tab of the Assets panel. From there, you can edit the symbol and place it in your documents.
Create a symbol from a selected object
Select the object, and select Modify > Symbol > Convert to Symbol.
Type a name for the symbol in the Name box.
Select a symbol type.
To scale the symbol without distorting its geometry, select Enable 9-slice Scaling Guides. (See 9-slice scaling.)
To store the symbol so that it can be used in multiple documents, select the Save To Common Library option.
Click OK to save the symbol.
The selected object becomes an instance of the symbol, and the Property inspector displays symbol options.
Create a symbol from scratch
Do one of the following:
Select Edit > Insert > New Symbol.
Select New Symbol from the Document Library panel Options menu.
Select a symbol type.
To use 9-slice scaling guides to scale the symbol, select the Enable 9-slice scaling guides option, and then click OK.
Create the symbol using the tools in the Tools panel.
Place an instance of a symbol
Drag a symbol from the Document Library panel to the current document.
Edit a symbol and all of its instances
When you edit a symbol, all associated instances update automatically to reflect most modifications. Some properties are independent, however. For more information, see Edit specific symbol instances.
When you break apart the symbol the graphics are grouped by default. Ungroup the graphics (buttons, scrollbar, or others) to modify them. You can later re-group the graphics and convert them to a symbol. If you do not group the graphics before conversion, individual graphics in the symbol become editable.
Edit a symbol
To enter symbol-editing mode, do one of the following:
On the canvas, double-click a symbol instance.
Select an instance, and choose Modify > Symbol > Edit Symbol.
In the Document Library panel, double-click a symbol icon.
(Animation symbols only) Click the Edit button in the Animate dialog box.
Change the symbol as needed.Note: If the selected symbol is not enabled for 9-slice scaling, you can edit the symbol within the context itself. You can choose Modify > Symbol > Edit In Place.Use 9-slice scaling guides to avoid distortion when resizing the symbol. (See 9-slice scaling.)
Switch from symbol editing to page editing
When you edit a symbol, the document panel enters symbol-editing mode. This mode dims other objects on the canvas, letting you quickly modify symbols in the context of the overall page. (One exception is symbols that use 9-slice scaling, which appear alone.)
To switch from symbol editing to page editing, do either of the following:
In the canvas, double-click an empty area.
In the tray at the top of the document panel, click the page icon or the back arrow. (If the symbol is nested, the tray also provides access to the containing symbol.)
Rename a symbol
In the Document Library panel, double-click the symbol name.
In the Convert to Symbol dialog box, change the name, and click OK.
Duplicate a symbol
In the Document Library panel, select the symbol.
Select Duplicate from the Document Library panel options menu.
Change the name and type of the duplicate if desired, and click OK.
Select all unused symbols in the Document Library panel
Choose Select Unused Items from the Document Library panel Options menu.
Delete a symbol and all of its instances
In the Document Library panel, drag the symbol to the trash icon.
Edit specific symbol instances
When you double-click an instance to edit it, you're actually editing the symbol itself. To edit only the current instance, you must break the link between the instance and the symbol. This permanently breaks the relationship between the two. Any future edits you make to the symbol won't be reflected in the former instance.
Button symbols have several features that let you retain symbol-instance relationships while assigning unique button text and URLs to each instance.
Break symbol links
Select the instance.
Select Modify > Symbol > Break Apart.
The selected instance becomes a group. The symbol in the Document Library panel is no longer associated with that group. After separation from the symbol, a former button instance loses its button symbol characteristics and a former animation instance loses its animation symbol characteristics.
Create and use component symbols
Fireworks includes a library of predesigned component symbols; you can customize these symbols to match the appearance of a particular website or user interface.
Add a component symbol to a document
Select Common Library from the Window menu.
To use a symbol, drag and drop the symbol from the Common Library panel to the Fireworks canvas.
Adjust component symbol properties
On the canvas, select the symbol.
In the Symbol Properties panel (Window > Symbol Properties), adjust parameters such as state, label, and color.To create interactive buttons for HTML-based web and software prototypes, see Interactive slices.
Create a component symbol
Create an object with attributes that you want to customize.This symbol could have the bullet color and the bullet number as customizable options.
Select the object, and then select Modify > Symbol > Convert to Symbol.
Type a name for the symbol in the Name box.
Select Graphic as the symbol type, select Save to Common Library, and then click OK.
At the prompt, save new symbol to the default Custom Symbols folder, or create another folder at the same level as the default folder.Note: Component symbols must be saved in a folder within the Common Library.
After being saved, the symbol is removed from the canvas and appears in the Common Library.
From the Commands menu, select Create Symbol Script.
Click the browse button in the upper right corner of the panel and browse to the symbol PNG file. The default location is as follows:
For Microsoft® Windows® XP: <user settings>\Application Data\Adobe\Fireworks CS5\Common Library\Custom Symbols
For Windows Vista®: \Users\<username>\AppData\Roaming\Adobe\Fireworks CS5\Common Library\Custom Symbols
For Mac® OS: <user name>/Application Support/Adobe/Fireworks CS5/Common Library/Custom Symbols
Click the plus button to add an element name.
In the Element Name box, select the name of the element to customize from the menu.
In the Attribute box, select the name of the attribute you want to customize. For example, to customize the text in the label, select textChars.Note: For more information about these attribute options see Extending Fireworks.
In the Property Name field, type the name of the customizable property, for example, “Label” or “Number.” This property name appears in the Symbol Properties panel.
In the Value field, type a default value for the property used when an instance of the symbol is first placed into a document.
Add additional elements as needed.
Select Reload from the Common Library panel Options menu to reload the new symbol.
Save an existing symbol as a component symbol
Select a symbol in the Document Library panel.
Select Save to Common Library from the Document Library panel Options menu.
When you save a component symbol, Fireworks saves a PNG file in the following default folders:
(Windows XP) <user settings>\Application Data\Adobe\Fireworks CS5\Common Library\Custom Symbols
(Windows Vista) \Users\<user name>\AppData\Roaming\Adobe\Fireworks CS5\Common Library\Custom Symbols
(Mac OS) <user name>/Application Support/Adobe/Fireworks CS5/Common Library/Custom Symbols
function setDefaultValues() – defines the parameters that can be edited and the default values of these parameters.
function applyCurrentValues() – applies the values entered through the Symbol Properties panel to the graphic symbol.
The following is a sample .JSF file for creating a custom symbol:
To better understand how the .JSF file can be used to customize symbol properties, explore the sample components included with the software.
Import and export symbols
The Document Library panel stores symbols that you create or import in the current document. The Document Library panel is specific to the current document; to use symbols from one library in another document, import, export, copy, or drag them.
Import one or more prepared symbols from a Fireworks symbol library
You can import prepared animation symbols, graphic symbols, and button symbols, as well as navigation bars and multi-symbol themes.
Open a Fireworks document.
Select a folder in the Common Library panel.
You can also import symbols from previously exported library PNG files located on your hard drive, on a CD, or on a network.
Import symbols from another file into the current document
Select Import Symbols from the Document Library panel Options menu.
Navigate to the PNG folder containing the file, select the file, and click Open.
Select the symbols to import and click Import.
The imported symbols appear in the Document Library panel.
Import a symbol by dragging and dropping or copying and pasting
Drag a symbol instance from the document containing the symbol into the destination document.
Copy a symbol instance in the document containing the symbol, then paste it into the destination document.
The symbol is imported into the Document Library panel of the destination document and retains a relationship to the symbol in the original document.
Select Export Symbols from the Document Library panel Options menu.
Select the symbols to export, and click Export.
Navigate to a folder, type a name for the symbol file, and click Save.
Fireworks saves the symbols in a single PNG file.
Update exported symbols and instances in multiple documents
Imported symbols maintain their link to their original symbol document. You can edit the original symbol document and then update the target documents to reflect the edits.
In the original document, double-click an instance, or select an instance and select Modify > Symbol > Edit Symbol.
Modify the symbol.
Save the file.
In the document into which the symbol was imported, select the symbol in the Document Library panel.
Select Update from the Document Library panel Options menu.Note: To update all imported symbols, select all the symbols in the Document Library panel and select Update.
Create nested symbols
Create an object on a page using the vector tool. For example, create a rectangle using the vector tool.
Right-click the rectangle, and select Convert To Symbol.
In the Convert To Symbol dialog box, do the following:
Enter a name for the symbol. For example, call it Symbol A.
If you are planning to apply 9-slice scaling to the symbol, select Enable 9-slice Scaling Guides.
Double-click the “+” icon in the center of the symbol.
- Repeat steps one through four to create another symbol, Symbol B. Because Symbol B is created within Symbol A, Symbol B is a nested symbol of Symbol A.Note: You can create more than one nested symbol.
9-slice scaling nested symbols
You can create symbols within a symbol. Such symbols, called nested symbols, can be scaled individually.
Select Enable 9-slice scaling guides when creating the symbol.
Ensure that you are in the Edit mode of the symbol that you want to scale. Double click the “+” icon on the inner symbol to move to its edit mode.
When transforming nested symbols based on the 9-Slice scale setting, you can scale nested symbols individually. For example, consider a symbol that is nested three levels — Symbol A inside Symbol B, which is inside Symbol C. You can scale Symbol A (inner most) and symbol B (Intermediate) as per their respective 9-Slice guides.Ensure that you are in the Edit mode of the inner symbol to use 9-slice scaling. In the edit- in-place mode, 9-slice scaling for nested symbols can be viewed only through the Library panel. Double-clicking a symbol on the canvas does not display the 9-Slice scale guides.
Enable 9-slice scaling for an existing symbol
Move to the view where you created the symbol.
- Select the Symbol in the Document Library panel, and click Symbol Properties.Note: If the Document Library Panel is not visible, select Window > Document Library to display the panel.
In the Convert To Symbol dialog box, select Enable 9-slice scaling guides.