Adobe 65011817 User Guide - Page 183

Create a three- or four-state button, Convert Fireworks rollovers into buttons

Page 183 highlights

USING FIREWORKS CS4 177 Creating buttons and pop-up menus Button preset filter Raised Description The bevel appears to rise from the underlying objects. The button's colors lighten. Highlighted Inset Inverted The bevel appears to sink into the underlying objects. The bevel appears to sink into the underlying objects, and the colors lighten. Create a three- or four-state button Although four-state buttons are not mandatory, using them lets you take advantage of the built-in Nav Bar behaviors. 1 With a two-state button open in the canvas in the symbol editing mode, select Down from the pop-up menu in the Property inspector and do one of the following: • 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. 2 To add an Over While Down state, verify that the Down state button is open and repeat step 1. 3 (Optional) Apply preset filters to buttons. Note: When you insert or create a graphic for the Down or Over While Down states, the options for including the state in the navigation bar are selected automatically. Convert Fireworks rollovers into buttons You can convert buttons from rollovers that were created in previous versions of Fireworks and save them in the library. For more information about rollovers, see "Interactive slices" on page 163. 1 Delete the slice or hotspot covering the rollover images. 2 Select Show All States from the Onion Skinning menu in the States panel. 3 Select all the objects you want to include in the button. Use the Select Behind tool to select hidden objects. 4 Select Modify > Symbol > Convert to Symbol. 5 Enter a name for the symbol in the Name box and select a Button symbol type. To convert four-state animations to buttons, select all four objects to place each on its own button state. Last updated 3/8/2011

  • 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

177
USING FIREWORKS CS4
Creating buttons and pop-up menus
La
s
t updated 3/8/2011
Create a three- or four-state button
Although four-state buttons are not mandatory, using them lets you take advantage of the built-in Nav Bar behaviors.
1
With a two-state button open in the canvas in the symbol editing mode, select Down from the pop-up menu in the
Property inspector and do one of the following:
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.
2
To add an Over While Down state, verify that the Down state button is open and repeat step 1.
3
(Optional) Apply preset filters to buttons.
Note:
When you insert or create a graphic for the Down or Over While Down states, the options for including the state
in the navigation bar are selected automatically.
Convert Fireworks rollovers into buttons
You can convert buttons from rollovers that were created in previous versions of Fireworks and save them in the
library. For more information about rollovers, see “
Interactive slices
” on page
163.
1
Delete the slice or hotspot covering the rollover images.
2
Select Show All States from the Onion Skinning menu in the States panel.
3
Select all the objects you want to include in the button. Use the Select Behind tool to select hidden objects.
4
Select Modify
> Symbol
> Convert to Symbol.
5
Enter a name for the symbol in the Name box and select a Button symbol type.
To convert four-state animations to buttons, select all four objects to place each on its own button state.
Button preset filter
Description
Raised
The bevel appears to rise from
the underlying objects.
Highlighted
The button's colors lighten.
Inset
The bevel appears to sink into
the underlying objects.
Inverted
The bevel appears to sink into
the underlying objects, and
the colors lighten.