How do I make something change shape?

Added: 31 Jan 2009. Working example for Java

Flash supports shape morphing, where one shape is transformed into another over a series of steps. To create a morphing shape you only need to define the shapes at the start and end of the process. The Flash Player performs all the interpolation steps to enact the transformation.

Shape morphing is quite complex so Flash imposes the restriction that the start and end shapes must have the same number of vertices. The working example shows how to morph a square into a circle. The set of drawing commands for the square:

ArrayList shapeRecords = new ArrayList();

shapeRecords.add(new FSShapeStyle(1, 1, 0, width/2, 0));
shapeRecords.add(new FSLine(0, height/2));
shapeRecords.add(new FSLine(-width/2, 0));
shapeRecords.add(new FSLine(-width/2, 0));
shapeRecords.add(new FSLine(0, -height/2));
shapeRecords.add(new FSLine(0, -height/2));
shapeRecords.add(new FSLine(width/2, 0));
shapeRecords.add(new FSLine(width/2, 0));
shapeRecords.add(new FSLine(0, height/2));

return new FSShape(shapeRecords);

are matched by the equivalent set of commands for drawing the circle:

ArrayList shapeRecords = new ArrayList();

shapeRecords.add(new FSShapeStyle(1, 1, 0, startX, startY));
shapeRecords.add(new FSCurve(-ax, ay, -cx, 0));
shapeRecords.add(new FSCurve(-cx, 0, -ax, -ay));
shapeRecords.add(new FSCurve(-ax, -ay, 0, -cy));
shapeRecords.add(new FSCurve(0, -cy, ax, -ay));
shapeRecords.add(new FSCurve(ax, -ay, cx, 0));
shapeRecords.add(new FSCurve(cx, 0, ax, ay));
shapeRecords.add(new FSCurve(ax, ay, 0, cy));
shapeRecords.add(new FSCurve(0, cy, -ax, ay));

return new FSShape(shapeRecords);

While the restriction is useful to simplify the process and reduce the workload on the Flash Player it does limit the usefulness of shape morphing somewhat.

The order in which the vertices of each shape is drawn determines the way the shape will be morphed. In the definitions of the shapes above the drawing point after each vertice is approximately in the same position as each shape is drawn. If for example the rectangle was drawn in an anticlockwise path then the morphing process will be completely changed.