Adobe 38039927 User Guide - Page 227

Creating a three- or four-state button, Using bevel filters to draw button states

Page 227 highlights

ADOBE FIREWORKS CS3 222 User Guide • Click Copy Up Graphic to paste a copy of the Up state button into the Over window, and then edit it to change its appearance or text. • Drag and drop, import, or draw a graphic. Creating a three- or four-state button When creating a button, you may want to add a Down state and an Over While Down state in addition to the Up and Over states. These states give web page users additional visual cues. You can create a nav bar using two-state or three-state buttons, but only a button with all four states qualifies as a real nav bar button in Fireworks. Fireworks has several Nav Bar behaviors that make buttons act as though they are related to each other. For example, you can create nav bar buttons that act like the push buttons on an old car radio: when the user clicks a button, it remains down until another button is clicked. Although four-state buttons are not mandatory in a nav bar, using them allows you to take advantage of the built-in Nav Bar behaviors in Fireworks. For details about creating the Up and Over states for a button, see "Creating a simple two-state button" on page 221. To create a Down state: 1 With a two-state button open in the Button Editor, click the Down tab. 2 Do one of the following to create the button's Down state: • Click Copy Over Graphic to paste a copy of the Over state button into the Down window, and then edit it to change its appearance. • Drag and drop, import, or draw a graphic. Note: When you insert or create a graphic for the Down state, the Include Nav Bar Down State option is automatically chosen. This button state is for buttons that are part of navigation bars. To create an Over While Down state: 1 With a three-state button open in the Button Editor, click the Over While Down tab. 2 Do one of the following to create the button's Over While Down state: • Click Copy Down Graphic to paste a copy of the Down state graphic into the Over While Down window, and then edit it to change its appearance. • Drag and drop, import, or draw a graphic. Note: When you insert or create a graphic for the Over While Down State, the Include Nav Bar Over While Down State option is automatically chosen. This button state is for buttons that are part of navigation bars. Using bevel filters to draw button states As you create graphics for each button state, you can apply preset Live Filters to create common appearances for each state. For example, if you are creating a four-state button, you can apply the Raised filter to the Up state graphic, the Highlighted filter to the Down state graphic, and so on. To apply preset Live Filters to a button symbol: 1 With the desired button symbol open in the Button Editor, select the graphic to which you want to add a Live Filter. 2 Click the Add Filters button in the Property inspector.

  • 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
  • 337
  • 338
  • 339
  • 340
  • 341
  • 342
  • 343
  • 344
  • 345
  • 346
  • 347
  • 348
  • 349
  • 350
  • 351
  • 352
  • 353
  • 354
  • 355
  • 356
  • 357
  • 358
  • 359
  • 360
  • 361
  • 362
  • 363
  • 364
  • 365
  • 366
  • 367
  • 368
  • 369

ADOBE FIREWORKS CS3
User Guide
222
Click Copy Up Graphic to paste a copy of the Up state button into the Over window, and then edit it to change its
appearance or text.
Drag and drop, import, or draw a graphic.
Creating a three- or four-state button
When creating a button, you may want to add a Down state and an Over While Down state in addition to the Up and
Over states. These states give web page users additional visual cues.
You can create a nav bar using two-state or three-state buttons, but only a button with all four states qualifies as a real
nav bar button in Fireworks. Fireworks has several Nav Bar behaviors that make buttons act as though they are
related to each other. For example, you can create nav bar buttons that act like the push buttons on an old car radio:
when the user clicks a button, it remains down until another button is clicked.
Although four-state buttons are not mandatory in a nav bar, using them allows you to take advantage of the built-in
Nav Bar behaviors in Fireworks.
For details about creating the Up and Over states for a button, see “Creating a simple two-state button” on page 221.
To create a Down state:
1
With a two-state button open in the Button Editor, click the Down tab.
2
Do one of the following to create the button’s Down state:
Click Copy Over Graphic to paste a copy of the Over state button into the Down window, and then edit it to change
its appearance.
Drag and drop, import, or draw a graphic.
Note:
When you insert or create a graphic for the Down state, the Include Nav Bar Down State option is automatically
chosen. This button state is for buttons that are part of navigation bars.
To create an Over While Down state:
1
With a three-state button open in the Button Editor, click the Over While Down tab.
2
Do one of the following to create the button’s Over While Down state:
Click Copy Down Graphic to paste a copy of the Down state graphic into the Over While Down window, and then
edit it to change its appearance.
Drag and drop, import, or draw a graphic.
Note:
When you insert or create a graphic for the Over While Down State, the Include Nav Bar Over While Down State
option is automatically chosen. This button state is for buttons that are part of navigation bars.
Using bevel filters to draw button states
As you create graphics for each button state, you can apply preset Live Filters to create common appearances for each
state. For example, if you are creating a four-state button, you can apply the Raised filter to the Up state graphic, the
Highlighted filter to the Down state graphic, and so on.
To apply preset Live Filters to a button symbol:
1
With the desired button symbol open in the Button Editor, select the graphic to which you want to add a Live
Filter.
2
Click the Add Filters button in the Property inspector.