Enhancing rich symbols in Fireworks CS3

Rich symbols are new to Adobe Fireworks CS3 and extend the existing flexibility of symbols by allowing independent editing of a symbol's instance properties. This means you can make changes to the instances of a rich symbol without affecting the master symbol. This is extremely helpful for designing application interfaces and streamlining web design.

In this article I discuss how to build intelligence into rich symbols and how to work with smart rich symbols. To get a deeper understanding of how they work, you can examine JavaScript file corresponding to the sample graphic file.

Rich symbols are much improved over the native symbols available in Fireworks prior to Fireworks CS3. In previous versions, when you edited a symbol, the master symbol was also automatically edited. The process for updating symbols required you to make changes on a new document canvas, making it difficult to get an overall feel of the design. Since the master symbol gets updated, any existing or new instances of the symbol are also automatically updated along with the revisions you made to the master symbol.

Using rich symbols in Fireworks CS3 gives you the convenience of editing instances directly on the canvas while viewing the entire Fireworks document. The instances of rich symbols can be edited to have different appearances without changing the master symbol. The process of editing specific symbol instances through the Symbol Properties panel is known as soft editing. The Symbol Properties panel internally links the objects you are editing via JavaScript.

Fireworks CS3 ships with a huge set of rich symbol assets, allowing you to have a greater variety in choosing the objects. A whole set of assets are exposed as MXML, giving designers the ability to use them directly in Adobe Flex Builder. This significant timesaving feature allows for rapid development with minimal redundant effort.

With a basic knowledge of JavaScript, you can extend the provided rich symbol assets (download at the beginning of the article) and utilize them for your projects.

Limitations of rich symbols

A rich symbol is similar to the native symbols that were available prior to Fireworks CS3. It is a kind of group at an abstract level which is internally built of smaller objects. A major limitation of the legacy symbols was their lack of relationship or dependency between the smaller objects to enable them to behave intelligently.

The limitations of rich symbols are illustrated in the provided sample files. If you haven't already, download the sample files available at the beginning of this article.

The sample files include three examples of rich symbols: Hyperlink, Strike-Through, and Smart Label. Open each file to examine it as you consider the corresponding limitations described below:

A hyperlink is a group comprised of a text object and a line object below it. When text characters in the group are soft edited to become longer or shorter than the default value, the line object below it does not update automatically to expand or contract (see Figure 1). 

A text strike-through is a group comprised of a text object and line object passing through the middle of text. When text in the group is edited to decrease its length, the line length does not automatically decrease to correspond with length of the edited text (see Figure 2). 

A label is a group comprised of a graphic object and the text object on top of it. When the length of text in a label increases, the background graphic does not expand automatically to fit the new length of edited text characters (see Figure 3).

In the next section I describe how to overcome these limitations and explain how you can use JavaScript to make objects inside the rich symbol relate to one another, creating smart rich symbols that automatically adjust their dimensions.

A rich symbol is comprised of a PNG file and a JavaScript (.jsf) file. Using JavaScript (specifically, using the getObjectByName function) you can access almost all of the individual objects that make up the rich symbol. You can internally associate an object or its attributes with another object to build a relationship between them.

The ability to add code to the JavaScript file is very powerful because you can configure a rich symbol to interact with its parts. For example, whenever the attribute of one object is modified, the dependant object will also be modified automatically.

You can build these interdependencies as much as desired because you can establish one or more relationships, depending on the level of intelligence you wish to build into the rich symbols.

The following two JavaScript events are exposed by rich symbols in Fireworks CS3:

• setDefaultValues
• applyCurrentValues

To get a complete overview, read How rich symbols work in the Fireworks LiveDocs.

The next section describes how to update rich symbols into smart rich symbols using the provided sample files.

When you save an object as a rich symbol in Fireworks CS3, a PNG file is saved to your Fireworks application's Custom Symbols folder.

Because every rich symbol must also contain a JavaScript file to allow soft editing, you can choose to either create the JSF file yourself (outside of Fireworks) or use the Create Symbol Script panel (Commands > Create Symbol Script) to generate the JavaScript file automatically.

The important thing is that the JavaScript file must be saved in the same location, with the same filename as the symbol. For example, logo.graphic.png would have a JavaScript file named logo.jsf living next to it in the same folder.

Here's how you can add intelligence to rich symbols via JavaScript. Download the sample files at the beginning of the article if you'd like to follow along. Review each PNG file in Fireworks CS3 and read the code of the corresponding JSF file using a text editor for each of the following sample files.

HyperLink sample file

I updated the JavaScript file for this rich symbol to add functionality that makes the line below the text update to match the horizontal length of the symbol's instance that has been soft edited. Now every time I use the Symbol Property panel to update an instance of this symbol, the line below automatically adjusts to the same size as the linked text. Figure 4 shows the initial display of the rich symbol when it is first dragged out onto the canvas.

Before updating the JSF file, if I use the Symbol Property panel to soft-edit the text, the line below the text doesn't update to span the length of text; the line remains unchanged (see Figure 5).

By editing the JavaScript, you can effectively change a rich symbol into a smart rich symbol. In this example, I added code in the JSF file that associates the text object in the rich symbol with the line object. After updating the JSF file, the line object automatically resizes to fit when I soft-edit the text object of the symbol using the Symbol Properties panel (see Figure 6).

Strike-Through sample file

In this example I've updated the JavaScript file of the smart rich symbol to make it detect any changes to the length of the text and update the line length accordingly. Figure 7 shows the original rich symbol when it is dragged onto the canvas.

If I delete some text using the Symbol Properties panel before adding the dependency between objects via JavaScript, the line asset does not update to match the edited text (see Figure 8).

However, if I first update the JavaScript (see the downloadable sample file) and then edit the smart rich symbol in the Symbol Properties panel, the line automatically resizes (see Figure 9).

Smart Label sample file

As I updated this rich symbol to make it a smart rich symbol, my goal was to add intelligence to adjust the background graphic (so that it automatically expands/contracts) to match the horizontal size of the edited text object. Figure 10 shows the original rich symbol when it is dragged onto the canvas.

If I attempt to soft-edit the text object in label rich symbol, the text object length changes but the background graphic length remains static and does not expand (see Figure 11).

After updating the JavaScript file and making the symbol a smart rich symbol, I can soft-edit an instance using the Symbol Properties panel. The background graphic length updates itself to match the length of the edited text (see Figure 12).

Now that you've reviewed the smart rich symbol assets provided in the sample files, feel free to update them and use them in your own projects. Here are the steps to work with them:

1. Download the sample ZIP file and extract the contents to the following location, depending on your platform:

   Windows: <OS Drive>:\Documents and Settings\<User>\Application Data\Adobe\Fireworks CS3\Common Library\Custom Symbols\

   Mac: <User>\Library\Application Support\Adobe\Fireworks CS3\Common Library\Custom Symbols\

2. If Fireworks CS3 is already running, refresh the Common Library panel. Otherwise, launch Fireworks after copying the files to the Custom Symbols folder.
3. In the Common Library panel, expand the Custom symbols folder to see the newly added smart rich symbols. Drag one of them to the canvas and soft-edit it as desired. Notice the built-in intelligence as the associated assets resize.

You can update the graphic elements of any of the provided examples and quickly create matching sets of graphics as needed. It is fast and easy to generate a large group of graphic files with matching attributes using smart rich symbols.

There are a few limitations in the smart rich symbols provided in this article:

• When the text is soft edited using the Symbol Properties panel, the focus is lost as every character is typed. The workaround is to copy and paste the text rather than typing it directly, character by character, into the Symbol Properties panel.
• After an asset has been soft-edited, the bounding box appears larger than the actual object's dimensions.
• An additional history step is generated when assets are soft-edited using the Symbol Properties panel. If this history step is undone, it disables the intelligence built into the smart rich symbol.

Tip: Whenever you wish to create your own smart rich symbols, make sure to enable the option for 9-slice scaling to allow the assets to scale correctly.

To learn more about working with Fireworks, be sure to check out these articles:

• Using rich symbols in Fireworks (Aaron Beall)
• Archive: Designing Flex 2 skins with Flash, Photoshop, Fireworks, or Illustrator (Narciso Jaramillo)

And to research further, visit these helpful online resources:

• Fireworks Zone
• Fireworks Exchange