Fireworks: simpleSymbols

If you are familiar with Macromedia Flash then you might already know about the Symbol feature within Fireworks. If not, read on as this may save you much needed time on your next project.

According to Macromedia’s help file, “ Symbols are useful whenever you want to reuse a graphic element. You can place instances in multiple Fireworks documents and retain the association with the symbol. Symbols are helpful for creating buttons and animating objects across multiple frames. “

So, to dumb this down a bit; say you have a FW layout that has 10 navigation buttons and all of the buttons are exactly the same. You could make one of those buttons a Symbol and replace the others with instances of this Symbol. Then, if you ever have to make changes to the button, you only have to edit one instance and every other instance in your document will change too. If used properly this can be a very efficient way of creating or editing graphics.

Let’s get started on how we create a Symbol in Fireworks.

1

Create or find and object that you would like to use more than once in your FW document. I created a simple button for this example. See below.

2

Use the Pointer tool to select the parts of the object that you know will always stay the same in the Symbol. For example, you would not select the “text” object of the button since that will always be different for every button. In my example I am selecting the base of the button as well as the highlite layer. See below.

3

Now go to Modify | Symbol | Convert to Symbol or just hit F8. You will see a Symbol Properties dialog box. Type in a name that represents your new graphic. In this case we are just making a simple graphic so under Type choose the Graphic radio button. See below for an example dialog.

Next, click OK. Your object will now be grouped and have a few new appearance changes. There will be a small “shortcut” icon in the lower left corner and there will be a blue “cross” in the center of the graphic. This means that the object is an instance of your new Symbol. See below.

Duplicating

Now all you need to do is make new instances of your Symbol. There are many ways to do this. Here’s a quick list of how to duplicate or create a new instance of a Symbol.

1. If there already is an instance of this symbol on the canvas, select it and press CTRL + C and then CTRL + V.
2. If there already is an instance of this symbol on the canvas, hold down the ALT key and then click on the Symbol, drag off, and release the mouse button to duplicate it. You can continue to hold the ALT button and click and drag as many times as you like.
3. If there are no instances of the Symbol on the canvas, open the Library Panel (F11) and drag the Symbol from that panel onto the canvas. See below.

4

Now for the beautiful part. Let’s edit one instances of our Symbol and watch the others change automatically. To do this, simply double click on any instance of our Symbol (either on the canvas or in the Library Panel).

If you are using FW MX or above, a new tab will appear with “Symbol: name of Symbol” as the title. You will also notice a “Done” button in the upper left corner.

Your Symbol will appear on this new canvas all by itself. You can modify, hide, or create new objects just as would any FW document. See below.

When you’re all finished click “Done” in the upper left corner of the document. Now you will notice that every instance of your Symbol will reflect your changes that you just made. Neat huh?

Try using this technique on my mirrorReflect tutorial to see how powerful Fireworks Symbols really are.