Using rich symbols in Fireworks
Table of Contents
Creating the script
Now that we've prepared a symbol specifically to be given rich, editable properties, we will create the .jsf script to make it functional. To do this without having to hand code the .jsf, we will use the Create Symbol Script panel.
- Open the Create Symbol Script panel. Choose Commands > Create Symbol Script. This panel allows you to easily create a .jsf file to add editability to your rich symbol. Click the [...] button, locate your Common Library folder and find the symbol you just saved. As mentioned previously, the Common Library is usually located in C:\Documents and Settings\<user>\Application Data\Adobe\Fireworks CS3\Common Library in Windows or <user>Library\Application Support\Adobe\Fireworks CS3\Common Libray in Mac OS, and your symbol is saved by default into the Custom Symbols folder.
The Create Symbol Script panel has four fields used to define an editable property of your rich symbol: Element Name, Attribute, Property Name, and Value.
Figure 10: Define the editable properties of your rich symbol in the Create Symbol Script panel.
- Select the element name. To select the element name, click the [+] button. This will add a new row, with a pop-up menu in the Element Name field. Every element for which you gave a name in step 4 of the previous section should appear in this pop-up menu. If no items appear, make sure you not only gave names to your elements, but that you also saved the symbol to the Common Library, as described in step 5 on the previous page. Select the “face” element, which is the solid blue Rounded Rectangle AutoShape.
Figure 11: Select the “face” element.
- Choose an attribute. The attribute is the Javascript API property on the element that will be made accessible through the Symbol Properties panel. There are many attributes in Fireworks' Javascript API, but only the more direct properties are listed here. Most of the properties are fairly self-explanatory. In this example, choose fillColor.
Figure 12: Choose the attributes that you want to be accessible on the Symbol Properties panel.
- Choose a property name. The property name is the name as it will appear in the Symbol Properties panel. Since the property we are adding will adjust the fill color of the button face, a good descriptive name could be “Face color.”
Figure 13: Assign a name, which will appear in the Symbol Properties panel.
- Choose a default color value. In the case of a fillColor attribute, the value is a hexadecimal color value (there is also a color picker). For consistency, we'll make the default color the same blue color as the Rounded Rectangle AutoShape, which happens to be #0066CC. We could, however, make it any color.
Figure 14: Give the rich symbol a default color value.
You have now created a fully editable property for your symbol! Before we test it out, let's use the same steps to quickly add some extra functionality.
- Add editable text with the textChars attribute. Press the [+] button to add a new property. For the Element Name, choose Label. Set the attribute to textChars and give it an appropriate Property Name, such as “Text Label.” Enter a default value.
Figure 15: Add an editable text property.
This property will now allow you change the text label for each instance. An important characteristic for buttons!
- Toggle visibility with the Visible attribute. Finally, we will make a simple toggle state using the arrow graphic. Add a new property using the [+] button. For the Element Name, choose “arrow” or your equivalent, for the Attribute choose Visible, and for the Property Name choose “Active” or something similar.
Figure 16: Add a simple toggle state.
- Save the script. After you click Save, a .jsf file is generated in the same location as the symbol PNG file. For the daring, now is a good time to open the .jsf file and take a peek at the code. It is important to note that although the symbol in the Common Library now has editable properties associated with it, the symbol you currently have on the canvas does not automatically inherit the new .jsf script. To update the symbol, delete it from the document Library (Window > Library) and drag a new instance from the Common Library. Or, while testing, you may want to simply create a new blank document and drag an instance from the Common Library onto its canvas.
