Monday, June 2, 2008

Fireworks CS3 - Rich Symbols

Symbols were existent in prior Fireworks releases but this feature aimed at giving a new dimension to the designers who could also develop their own reusable symbols. Only restriction being that the designers needed to know a little bit knowledge of JavaScript.

The above image is the panel called Common Library. It contains all the Assets which are shipped with Fireworks CS3 from animation, buttons to Rich Symbols.

The traditional symbols in Fireworks when had to be edited, the user had to enter the symbol edit mode, which would open as a new document containing the symbol. When the editing was complete all the symbol instances were updated with the edits. The limitation being that the symbol instances could not be independently skinned.

Rich Symbol was all about solving this problem. Each instance of the rich symbol could now be edited independently. The editing is done through the ‘Symbol Properties’ panel.

In the above screenshot I have selected the ‘Book Closed’ rich symbol placed on the canvas which is present under ‘Flow Diagram’ folder in Common library panel. The properties above are the ones that can be edited for this rich symbol independent of its instance.

These editable properties for a particular rich symbol are stored in a jsf file which is associated with each rich symbol png file. A designer with some basic scripting knowledge can expand on the set of editable properties for the rich symbol as per their convenience.

The shipped rich symbols are placed at the following location and each rich symbol .png file is associated with a JavaScript (.jsf) file as shown below.

I feel that this is a powerful feature but the designers who are not scripting/programming savvy will find it really difficult to exploit its full potential. Adobe has provided a ‘Create Symbol Script’ panel for such kind of designers but sometimes I find it not working. Or perhaps I feel more comfortable opening/creating jsf files in BBEdit /EditPlus.

I have also written an article an Adobe Fireworks Dev Centre where I have extended this rich symbol functionality to make them smart and intelligent. You can read the full article at the following URL:

My Article Link

No comments: