Création de paramètres de symbole modifiables avec JavaScript
Lorsque vous enregistrez un symbole de composant, Fireworks enregistre un fichier PNG dans les dossiers par défaut suivants :
(Windows XP) <paramètres utilisateur>\Application Data\Adobe\Fireworks CS4\Common Library\Symboles personnalisés
(Windows Vista) \Utilisateurs\<nom d’utilisateur>\AppData\Roaming\Adobe\Fireworks CS4\Common Library\Symboles personnalisés
(Mac OS) <nom d’utilisateur>/Application Support/Adobe/Fireworks CS4/Common Library/Symboles personnalisés
Pour créer un symbole de composant, vous devez créer un fichier JavaScript portant le même nom que le symbole et l’enregistrer au même emplacement avec l’extension .JSF. Par exemple, mybutton.graphic.png est associé à un fichier JavaScript appelé mybutton.jsf.
Le panneau Créer le script du symbole permet aux utilisateurs qui ne sont pas des programmeurs d’affecter des attributs de symboles simples et de créer le fichier JavaScript automatiquement. Pour ouvrir ce panneau, sélectionnez Créer le script du symbole dans le menu Commandes.
Création du fichier JavaScript
Vous devez définir les deux fonctions suivantes dans le fichier JavaScript afin de pouvoir ajouter des paramètres modifiables au symbole :
Fonction setDefaultValues() : elle définit les paramètres qui peuvent être modifiés ainsi que leurs valeurs par défaut.
Fonction applyCurrentValues() : elle applique les valeurs entrées dans le panneau Propriétés du symbole au symbole graphique.
L’exemple suivant illustre un fichier .JSF permettant de créer un symbole personnalisé :
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;
}
Afin de mieux comprendre la façon dont le fichier .JSF peut être utilisé pour personnaliser les propriétés du symbole, explorez les exemples de composants inclus au logiciel.
PDF (adobe.com)
