Using rich symbols in Fireworks
Table of Contents
What are rich symbols?
In simple terms, a rich symbol in Fireworks CS3 is a design component with editable properties. Examples of rich symbols include resizable buttons with editable text labels, graphic borders with changeable stroke and colors, graphic symbols with multiple states or appearance schemes, and even styleable Flex components, which can be exported directly into MXML for a Flex application. You add a rich symbol to your document by dragging an instance from the new Common Library panel (Window > Common Library), and you change its properties using the new Symbol Properties panel (Window > Symbol Properties).
Figure 1: Edit the properties of a rich symbol in the Symbol Properties dialog box
In a nutshell, a rich symbol is composed of three features in Fireworks CS3: symbols, 9-slice scaling (new to Fireworks CS3), and the Fireworks Javascript API. These three aspects are packaged together to make a coherent design component. You do not need to be a master of any of these three features to immediately use, or even create, rich symbols. Regardless, some working knowledge of these features will be helpful if you intend on making your own.
Symbols: Symbols are a too-frequently overlooked feature of Fireworks. They may sound unnecessarily complicated to the casual user, but they really aren't—they are simple, and very useful. In summary, symbols are similar to their equivalent in other Adobe applications, such as Adobe® Illustrator® and Adobe Flash®, or Smart Shapes in Adobe Photoshop®. They are self contained mini-documents that are embedded in Fireworks PNG files as instances. The advantage of using symbols—and consequently rich symbols—instead of simply copying elements, is that you can have as many instances of a symbol in a document as you want, and any changes you make to the symbol are reflected on each symbol instance immediately. However, each instance can still be uniquely placed and scaled, or have opacity adjusted and unique filters applied. rich symbols expand the editability of symbols to the elements that are actually inside the symbol; just use the Symbol Properties panel to change colors, styles, and even text.
9-slice: This is a very exciting feature that is still relatively new to the design world. It was introduced in Flash 8, and has now been added to Fireworks CS3 and Illustrator CS3. This feature is much better demonstrated than described, so be sure to check out the “What's new” section of the Fireworks CS3 documentation. Any symbol in Fireworks CS3 can have 9-slice scaling enabled and be scaled intelligently, which preserves corner and side proportions instead of distorting the entire object in a uniform way. Below is an example of scaling a simple panel symbol with and without 9-slice scaling.
Figure 2: 9-slice scaling allows you to scale an object without changing its corner or side proportions.
Notice how the 9-slice enabled object has four guides, creating nine regions, which are automatically scaled in a more intelligent manner to preserve corner and side proportions. As you can probably imagine, this is a very powerful feature for interface design! It's a key aspect of rich symbols, allowing you to create very “intelligent” components that can be resized and reused in various scenarios without losing quality or proportions. Buttons are a great example, as you might reuse the same button style for buttons of varying width and title.
Javascript API: This is the third ingredient to a rich symbol, which provides the bridge between your symbol instance and the elements it contains. The Javascript API allows you to change properties inside each instance without changing the original symbol—this process is described on the next page. The abilities of Fireworks' Javascript API are vast and well beyond the scope of this article. However, you may be glad to know that tools are provided with Fireworks CS3 to create the necessary Javascript for a rich symbol, without the need to create any code by hand if you do not wish to do so.
