Fireworks Article

Enhancing rich symbols in Fireworks CS3

Advantages of working with rich symbols

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). 

Figure 1. Line underneath the text not resizing to match the length of the soft-edited text

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). 

Figure 2. Line through the text not decreasing to match the length of the edited text

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).

Figure 3. Graphic object behind the text object not expanding automatically to match the new length of edited text

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.

Page 2 of 5

Previous Page

Next Page