Using rich symbols in Fireworks
Table of Contents
How do rich symbols work?
Using the ingredients on page 2, the recipe for a rich symbol is quite simple.
A rich symbol consists of a regular symbol document, usually with 9-slice enabled, saved as a PNG file, and a single accompanying .jsf file by the same name. These two files are saved together (1) in the Common Library (see Figure 3). You can save a symbol to the Common Library when converting objects to a symbol, or from a document's Library with an existing symbol. To create an instance of the symbol in your document, you drag-and-drop it from the Common Library panel (2) on to your canvas (3). When a rich symbol instance is on your canvas, you use the Symbol Properties panel (4) to change properties exposed by the .jsf file inside the symbol. The .jsf contains code, either created by hand or generated by the Create Symbol Script command (which will be described on the next page) to target elements in the symbol by name and make visible changes (5), such as color, stroke attributes, or text characters.
Figure 3: The components of a rich symbol are saved together in the Common Library.
Isn't that fancy? Now let's make a rich symbol! For this article, we'll create a simple 2-state button with editable text and color, and all without writing a single line of code by hand.
