User manual ADOBE FIREWORKS CS3

[. . . ] USING FIREWORKS © 2007 Adobe Systems Incorporated. Adobe® Fireworks® Using Fireworks® If this guide is distributed with software that includes an end user agreement, this guide, as well as the software described in it, is furnished under license and may be used or copied only in accordance with the terms of such license. Except as permitted by any such license, no part of this guide may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, recording, or otherwise, without the prior written permission of Adobe Systems Incorporated. Please note that the content in this guide is protected under copyright law even if it is not distributed with software that includes an end user license agreement. [. . . ] 3 Create a JavaScript file to control the symbol properties. Creating editable symbol parameters using JavaScript: When a symbol is saved as a rich symbol, a PNG file is saved by default in the <user settings>\Application Data\Adobe\Fireworks 9\Common Library\Custom Symbols folder (Windows), or <user name>/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. ADOBE FIREWORKS CS3 192 User Guide 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; } 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 rich 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 Rich symbol loads first time. In this case, Blue will be the default color when the Rich 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; } ADOBE FIREWORKS CS3 193 User Guide 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 that have been included with the software. Editing instances When you double-click an instance to edit it, you're actually editing the symbol itself in the Symbol Editor or Button Editor. To edit only the current instance, you need to break the link between the instance and the symbol. This permanently breaks the relationship between the two, however, and any future edits you make to the symbol won't be reflected in the former instance. Button symbols have several convenient features that allow you to retain the symbol-instance relationship for a group of buttons, while assigning unique button text and URLs to each instance. For more information, see "Editing button symbols" on page 224. Editing rich symbols If you are editing a rich symbol that has JavaScript behavior associated with it, you cannot edit the JavaScript properties using the Symbol Editor. In order to change these symbol properties, the values need to be changed using the Symbol Properties panel. If you want to add customizable properties to the Symbol Properties panel, you must edit the JavaScript file associated with the symbol. Breaking symbol links You can modify an instance without affecting the symbol or other instances by first breaking the link between it and the symbol. To release an instance from a symbol: 1 Select the instance. 2 Select Modify > Symbol > Break Apart. The selected instance becomes a group. The symbol in the Library panel is no longer associated with that group. After separation from the symbol, a former button instance loses its button symbol characteristics and a former animation instance loses its animation symbol characteristics. Editing instance properties These instance properties can be modified in the Property inspector without affecting the symbol or other instances: · Blending mode ADOBE FIREWORKS CS3 194 User Guide · Opacity · Filters · Width and height · x and y coordinates Note: Button instances have additional properties that can be edited without affecting the symbol. For more information about editing button instances, see "Editing button symbols" on page 224. To edit instance properties without affecting the symbol or breaking the symbol link: 1 Select the instance. 2 Modify instance properties in the Property inspector. Importing and exporting symbols The Library panel stores animation, graphic, and button symbols that you create in the current document. It also stores symbols that you import into the current document. [. . . ] The location of this file varies depending on your operating system. · In Windows, preferences are in your user-specific Fireworks configuration folder. For more information about locating this folder, see "About user configuration files" on page 351. · On the Macintosh, preferences are in the Library/Preferences folder in your user folder. For information about locating your Macintosh user folder, see Apple Help. Note: On the Macintosh, most Fireworks user-specific configuration files are stored in a different folder, your userspecific Application Support folder. [. . . ]