Adobe 38039927 Extended User Guide - Page 287

283 Chapter 9: Rich symbols Rich symbols allow you to create graphic symbols that can be intelligently scaled and given specific attributes using a JavaScript (JSF) file. Quickly mock up a user interface by dragging these symbols on to the document and editing the parameters associated with them using the Symbol Properties panel. Beginning with Fireworks CS3, you can also export common library assets as known components for use in Adobe Flex™ Builder.™ The MXML export feature allows you to create a Flex application layout in Fireworks, leveraging Flex common library assets as MXML for loading into Flex Builder. How Rich symbols work When a symbol is saved as a rich symbol, a PNG file is saved by default in the \Application Data\Adobe\Fireworks 9\Common Library\Custom Symbols folder (Windows), or /Application Support/Adobe/Fireworks9/Common Library/Custom Symbols (Macintosh). To create a rich symbol, a JavaScript file must be created and saved with a .JSF extension in the same location and with the same name as the symbol. For example, mybutton.graphic.png would have a JavaScript file named mybutton.jsf. The Create Symbol Script panel allows non-programmers to assign some simple symbol attributes and create the JavaScript file automatically. To open this panel, select Create Symbol Script from the Commands menu. The JavaScript file Two functions in the JavaScript file must be defined in order to add editable parameters to the symbol: • function setDefaultValues() -defines the parameters that can be edited and the default values of these parameters. • function applyCurrentValues() -applies the values entered through the Symbol Properties panel to the graphic symbol. The following is a sample .JSF file for creating a custom symbol: function setDefaultValues() { var currValues = new Array(); //to build symbol properties currValues.push({name:"Selected", value:"true", type:"Boolean"}); Widget.elem.customData["currentValues"] = currValues; }