• Keep in touch:
  • Linked In
  • Twitter
  • RSS

How do I make something change shape?

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 vertexes. The working example shows how to morph a square into a circle. The set of drawing commands for the square:

ArrayList<ShapeRecord> list = new ArrayList<ShapeRecord>();

list.add(new ShapeStyle(1, 1, 0, width/2, 0));
list.add(new Line(0, height/2));
list.add(new Line(-width/2, 0));
list.add(new Line(-width/2, 0));
list.add(new Line(0, -height/2));
list.add(new Line(0, -height/2));
list.add(new Line(width/2, 0));
list.add(new Line(width/2, 0));
list.add(new Line(0, height/2));

return new Shape(list);

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

ArrayList<ShapeRecord> list = new ArrayList<ShapeRecord>();

list.add(new ShapeStyle(1, 1, 0, startX, startY));
list.add(new Curve(-ax, ay, -cx, 0));
list.add(new Curve(-cx, 0, -ax, -ay));
list.add(new Curve(-ax, -ay, 0, -cy));
list.add(new Curve(0, -cy,  ax, -ay));
list.add(new Curve(ax, -ay, cx, 0));
list.add(new Curve(cx, 0,  ax, ay));
list.add(new Curve(ax, ay, 0, cy));
list.add(new Curve(0, cy, -ax, ay));

return new Shape(list);

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 vertexes 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 vertex 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.