Symbols in Fireworks

Symbols are master copies of an image or group of images. Each laid down instance is a copy of the master symbol. Updating the master updates all the instances. Ideal for creating your master template with things like the banner, footer and navigation.

Symbols are stored in the “Document Library”. They can be dragged in and scaled.  They can also be made available to all future documents by selecting it, then choosing “Save to Common Library” from the right hand panel options. By default it is saved in the “Common Library/Custom Symbols” folder with a .animation.png extension.

There are 3 symbol types : Graphic, Button and Animation.

Creating a Graphic Symbol

• Create an image and select it
• Convert this image(s) to a symbol by F8 or Modify/Symbol/Convert to symbol. Name is and select “Graphic”
• To place more instances of the symbol onto the canvas either drag them out from the Document Library or hold ALT and drag then out from the original copy on the canvas.
• Double clicking on the symbol enters edit mode.   Edits will apply to all instances.

To convert multiple images into  single symbol with 9-slice scailing.

• Use the rectangle tool to select a group of images. Make sure in the properties pane you have no fill and a border set.
• Convert to a symbol using F8. Selecting Graphic and 9-Slice scaling.
• Double click on the new symbol to enter scaling edit mode. Drag the guides to select the are to preserve when scaling (area not to be stretched)
• Now when you use instances of the symbol you can click on it and drag its size out.

Button symbols

This allows you to create buttons and navigation. 4 states can be created for use on web sites (over, down, up, selected)

• draw a button on the canvas and select all elements.
• Convert them to a symbol using F8. Name it and select “button”
• To create an “Up” state double click the button to enter Edit mode. Click away from it then select “Over” under state in the properties pane. Then pick “Copy Up Graphic” to copy up the image for editing to the Over version.
• To create moe buttons, drag them out onto the canvas sing ALT and drag. remember to change the button labels.

Creating an Animation symbol

• Select your images and convert to a symbol. Name it and pick “animation”
• In the pop up animation box pick ; 5 states, Move 250. Click OK.
• Choose Modify/Fit to Canvas if you want to size the animation. Make adjustments by dragging the animation line.

Editing a single Instance of a Symbol

To edit a single instance of a symbol you can either edit that particular instance, but with limited editing (resize, filters, opacity etc).  Or detach it for full editing capabilities using Modify/Symbol/Break Apart.  Now ungroup all its elements for editing using Modify/Ungroup.

Adding Component Symbols to a Design

Component symbols are in the “Common Library” and are pre made symbols.  Double click on one to edit, making sure 9-slice scaling is on.  Check the scaling guides then step back and drag size of symbol to your requirements.

Importing and Exporting Symbols

Symbols can be exported for emailing etc by. Options/Export Symbols/ select and export.  They can be imported by going to the Document Library the options/Import.