Fireworks CS4 Resources

Create editable symbol parameters using JavaScript

When you save a component symbol, Fireworks saves a PNG file in the following default folders:

(Windows XP) <user settings>\Application Data\Adobe\Fireworks CS4\Common Library\Custom Symbols
(Windows Vista) \Users\<user name>\AppData\Roaming\Adobe\Fireworks CS4\Common Library\Custom Symbols
(Mac OS) <user name>/Application Support/Adobe/Fireworks CS4/Common Library/Custom Symbols

To create a component 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.

Create the JavaScript file

Two functions in the JavaScript file must be defined 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; 
} 
function applyCurrentValues() 
{ 
    var currValues = Widget.elem.customData["currentValues"]; 
// Get symbol object name 
    var Check = Widget.GetObjectByName("Check"); 
    Check.visible = currValues[0].value; 
} 
switch (Widget.opCode) 
{ 
    case 1: setDefaultValues(); break; 
    case 2: applyCurrentValues(); break; 
    default: break; 
} 
This sample JavaScript shows a component symbol that can change colors: 
function setDefaultValues() 
{ 
    var currValues = new Array(); 
//Name is the Parameter name that will be displayed in the Symbol Properties Panel 
//Value is the default Value that is displayed when Component symbol loads first time. In this 
case, Blue will be the default color when the Component symbol is used. 
//Color is the Type of Parameter that is displayed. Color will invoke the Color Popup box 
in the Symbol Properties Panel. 
    currValues.push({name:"BG Color", value:"#003366", type:"Color"}); 
    Widget.elem.customData["currentValues"] = currValues; 
} 
function applyCurrentValues() 
{ 
    var currValues = Widget.elem.customData["currentValues"]; 
//color_bg is the Layer name in the PNG that will change colors 
    var color_bg = Widget.GetObjectByName("color_bg"); 
    color_bg.pathAttributes.fillColor = currValues[0].value; 
} 
switch (Widget.opCode) 
{ 
    case 1: setDefaultValues(); break; 
    case 2: applyCurrentValues(); break; 
    default: break; 
}

To better understand how the .JSF file can be used to customize symbol properties, explore the sample components included with the software.