Creating An Auto Shape - MACROMEDIA FIREWORKS MX 2004-EXTENDING FIREWORKS Manual

Creating an Auto Shape

To create an Auto Shape, you need to define a series of properties for the shape, define the shape's
control points, and write functions that tell Fireworks how to handle the Auto Shape as the user
interacts with the object (see
Defining the shape
The following code creates the initial shape, a rectangle (a more concise way of creating an initial
shape follows this example):
function InsertSmartShapeAt()
{
smartShape.elem.elements[0] = new Path;
smartShape.elem.elements[0].contours[0] = new Contour;
smartShape.elem.elements[0].contours[0].nodes[0] = new ContourNode;
smartShape.elem.elements[0].contours[0].nodes[0].predX = 0;
smartShape.elem.elements[0].contours[0].nodes[0].predY = 0;
smartShape.elem.elements[0].contours[0].nodes[0].x = 0;
smartShape.elem.elements[0].contours[0].nodes[0].y = 0;
smartShape.elem.elements[0].contours[0].nodes[0].succX = 0;
smartShape.elem.elements[0].contours[0].nodes[0].succY = 0;
smartShape.elem.elements[0].contours[0].nodes[1] = new ContourNode;
smartShape.elem.elements[0].contours[0].nodes[1].predX = 200;
smartShape.elem.elements[0].contours[0].nodes[1].predY = 0;
smartShape.elem.elements[0].contours[0].nodes[1].x = 200;
smartShape.elem.elements[0].contours[0].nodes[1].y = 0;
smartShape.elem.elements[0].contours[0].nodes[1].succX = 200;
smartShape.elem.elements[0].contours[0].nodes[1].succY = 0;
smartShape.elem.elements[0].contours[0].nodes[2] = new ContourNode;
smartShape.elem.elements[0].contours[0].nodes[2].predX = 200;
smartShape.elem.elements[0].contours[0].nodes[2].predY = 125;
smartShape.elem.elements[0].contours[0].nodes[2].x = 200;
smartShape.elem.elements[0].contours[0].nodes[2].y = 125;
smartShape.elem.elements[0].contours[0].nodes[2].succX = 200;
smartShape.elem.elements[0].contours[0].nodes[2].succY = 125;
smartShape.elem.elements[0].contours[0].nodes[3] = new ContourNode;
smartShape.elem.elements[0].contours[0].nodes[3].predX = 0;
smartShape.elem.elements[0].contours[0].nodes[3].predY = 125;
smartShape.elem.elements[0].contours[0].nodes[3].x = 0;
smartShape.elem.elements[0].contours[0].nodes[3].y = 125;
smartShape.elem.elements[0].contours[0].nodes[3].succX = 0;
smartShape.elem.elements[0].contours[0].nodes[3].succY = 125;
smartShape.elem.elements[0].contours[0].isClosed = true;
}
The Auto Shape is an array of ContourNode objects (see
can write a "helper" function to simplify the code and assign ContourNode properties, as follows:
function addPathPoint(contour, i, x, y)
{
var theNodes = contour.nodes;
// Increase the length to add a new point
if (i > 0)
theNodes.length++;
// get the new point
var node = theNodes[theNodes.length - 1];
96 Chapter 4: Auto Shapes
"Handling the user interaction" on page 97).
"ContourNode object" on page 29). You