Adobe 65011817 Extended User Guide - Page 308

Rich symbols

Page 308 highlights

Last updated 12/8/2009 304 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 CS4\Common Library\Custom Symbols folder (Windows), or /Application Support/Adobe/FireworksCS4/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:

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
  • 298
  • 299
  • 300
  • 301
  • 302
  • 303
  • 304
  • 305
  • 306
  • 307
  • 308
  • 309
  • 310
  • 311
  • 312
  • 313
  • 314
  • 315
  • 316
  • 317
  • 318
  • 319
  • 320
  • 321
  • 322
  • 323
  • 324
  • 325
  • 326
  • 327
  • 328
  • 329
  • 330
  • 331
  • 332
  • 333
  • 334
  • 335
  • 336

304
Las
t
up
d
a
ted
12/8/2009
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 <user settings>\Application
Data\Adobe\Fireworks CS4\Common Library\Custom Symbols folder (Windows), or <user name>/Application
Support/Adobe/FireworksCS4/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: