3 March 2008
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.
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.
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.
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).
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.
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.
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.
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).
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).
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:
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\
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:
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:
And to research further, visit these helpful online resources: