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.
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.
To adjust JavaScript behaviors for component symbols, edit values in the Symbol Properties panel. To add customizable properties to that panel, you must edit the JavaScript file associated with the symbol.
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
Component symbols are graphic symbols that can be intelligently scaled and given specific attributes using a JavaScript (JSF) file. They are also referred to as Rich Symbols. Modifying an instance with the Properties panel affects the symbol and all other instances. However, modifying parameters in the Symbol Properties panel (Window > Symbol Properties) affects only the selected instance.
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
For more information, see the article Using rich symbols in Fireworks, or the video tutorial at www.wonderhowto.com.
Create an object with attributes that you want to customize.
This symbol could have the bullet color and the bullet number as customizable options.When creating the object, customize the names of the features that you want to be editable by typing a name into the Layers panel. Ensure that you use the name Label for the text layer, maintaining the upper case for the first L. This name is used in the JavaScript file.
Note: To avoid JavaScript errors, do not include any spaces in feature names. For example, use “number_label,” but not “number label”.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.
Click Save to save the selected options and create a JavaScript file.
Select Reload from the Common Library panel Options menu to reload the new symbol.
After creating the JavaScript file, you can create an instance by dragging the symbol to the canvas. Then you can change its attributes in the Symbol Properties panel.
Note: If you remove or rename an object that is referenced by the script, The Symbol Properties panel reports errors.
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.
Create a JavaScript file to control the symbol properties.
Create editable symbol parameters using JavaScript
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
To create a component symbol, a JavaScript file must be created and saved with a .JSF extension in the same location and with the same name as the symbol. For example, mybutton.graphic.png would have a JavaScript file named mybutton.jsf.
The Create Symbol Script panel allows non-programmers to assign some simple symbol attributes and create the JavaScript file automatically. To open this panel, select Create Symbol Script from the Commands menu.
Create the JavaScript file
Two functions in the JavaScript file must be defined to add editable parameters to the symbol:
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:
function setDefaultValues() { var currValues = new Array(); //to build symbol properties currValues.push({name:"Selected", value:"true", type:"Boolean"}); Widget.elem.customData["currentValues"] = currValues; } function applyCurrentValues() { var currValues = Widget.elem.customData["currentValues"]; // Get symbol object name var Check = Widget.GetObjectByName("Check"); Check.visible = currValues[0].value; } switch (Widget.opCode) { case 1: setDefaultValues(); break; case 2: applyCurrentValues(); break; default: break; } This sample JavaScript shows a component symbol that can change colors: function setDefaultValues() { var currValues = new Array(); //Name is the Parameter name that will be displayed in the Symbol Properties Panel //Value is the default Value that is displayed when Component symbol loads first time. In this case, Blue will be the default color when the Component symbol is used. //Color is the Type of Parameter that is displayed. Color will invoke the Color Popup box in the Symbol Properties Panel. currValues.push({name:"BG Color", value:"#003366", type:"Color"}); Widget.elem.customData["currentValues"] = currValues; } function applyCurrentValues() { var currValues = Widget.elem.customData["currentValues"]; //color_bg is the Layer name in the PNG that will change colors var color_bg = Widget.GetObjectByName("color_bg"); color_bg.pathAttributes.fillColor = currValues[0].value; } switch (Widget.opCode) { case 1: setDefaultValues(); break; case 2: applyCurrentValues(); break; default: break; }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
Do one of the following: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.
Export symbols
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.
