Adobe 65011817 Extended User Guide - Page 304

Adding control points, Handling the user interaction

Page 304 highlights

Last updated 12/8/2009 EXTENDING FIREWORKS 300 Auto Shapes You can then simplify the InsertSmartShapeAt() function with the new helper function: function InsertSmartShapeAt() { var elem = smartShape.elem; var newPath = new Path; elem.elements[0] = newPath; newPath.contours[0] = new Contour; var contour = newPath.contours[0]; var i = 0; addPathPoint(contour, i++, 0, 0); addPathPoint(contour, i++, 200, 0); addPathPoint(contour, i++, 200, 125); addPathPoint(contour, i++, 0, 125); contour.isClosed = true; } Adding control points After selecting an Auto Shape in a document, the user can click its control points to adjust the object. You must define the control points for your Auto Shape before you can define what happens to the object when the user manipulates them. The following code adds a single control point to the coordinates (0, 0): smartShape.elem.controlPoints.length++; // Establish the new control point var cp=smartShape.elem.controlPoints[smartShape.elem.controlPoints.length-1]; // Place the Control Point cp.x = 0; cp.y = 0; Handling the user interaction After you define the Auto Shape properties and control points, you need to tell Fireworks how to handle user interactions with the Auto Shape. To facilitate the interaction of the user with the Auto Shape, Fireworks sends a series of messages to the Auto Shape object as the user performs certain operations on the Auto Shape. You can write a series of functions to respond to these messages. Fireworks messages Fireworks passes the following messages to the SmartShape object as the user interacts with (inserts, moves, or changes) the shape: • "InsertSmartShapeAt" Fireworks sends this message when the user selects the shape from the Tools panel and clicks on the canvas, or drags the shape from the Auto Shapes panel to the canvas. • "BeginDragInsert" Fireworks sends this message when the user drags an Auto Shape onto the canvas. This message defines a more specific action than the "InsertSmartShapeAt" message. • "DragInsert"

  • 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

300
EXTENDING FIREWORKS
Auto Shapes
Las
t
up
d
a
ted
12/8/2009
You can then simplify the
InsertSmartShapeAt()
function with the new helper function:
function InsertSmartShapeAt()
{
var elem = smartShape.elem;
var newPath = new Path;
elem.elements[0] = newPath;
newPath.contours[0] = new Contour;
var contour = newPath.contours[0];
var i = 0;
addPathPoint(contour, i++, 0, 0);
addPathPoint(contour, i++, 200, 0);
addPathPoint(contour, i++, 200, 125);
addPathPoint(contour, i++, 0, 125);
contour.isClosed = true;
}
Adding control points
After selecting an Auto Shape in a document, the user can click its control points to adjust the object. You must define the
control points for your Auto Shape before you can define what happens to the object when the user manipulates them.
The following code adds a single control point to the coordinates (0, 0):
smartShape.elem.controlPoints.length++;
// Establish the new control point
var cp=smartShape.elem.controlPoints[smartShape.elem.controlPoints.length-1];
// Place the Control Point
cp.x = 0;
cp.y = 0;
Handling the user interaction
After you define the Auto Shape properties and control points, you need to tell Fireworks how to handle user
interactions with the Auto Shape. To facilitate the interaction of the user with the Auto Shape, Fireworks sends a series
of messages to the Auto Shape object as the user performs certain operations on the Auto Shape. You can write a series
of functions to respond to these messages.
Fireworks messages
Fireworks passes the following messages to the SmartShape object as the user interacts with (inserts, moves, or
changes) the shape:
"
InsertSmartShapeAt
"
Fireworks sends this message when the user selects the shape from the Tools panel and clicks on the canvas, or drags
the shape from the Auto Shapes panel to the canvas.
"BeginDragInsert"
Fireworks sends this message when the user drags an Auto Shape onto the canvas. This message defines a more
specific action than the “InsertSmartShapeAt” message.
"DragInsert"