[Update June 2011: the technique outlined here was used in several projects, e.g. www.whenithinkofjapan.org and www.mindreader.motiondraw.com]

Scenario I

A simple shape tween of a box that morphs into a circle. Would be nice if we could add an elastic easing…

Scenario II

A special text effect – to transition from one text to the next, each character of the original text morphs into the corresponding caracter of the new text.

For starters we limit the characters to upper-case A-Z (27 glyphs), lower-case a-z (27 glyphs) and numbers 0-9 (10 glyphs).

Ok, all we need now, is to create a shape tween for each possible combination, that is 27 x 27 x 10 = 7290 shape tweens. Uhoh…

Wouldn’t it be cool if we could create Shape Tweens with code?

And gain all the flexibility that Tweening Engines give us since a long time when dealing with Motion Tweens?

Hm – wouldn’t it be possible to understand shape tweens as a special case of motion tweens?

If so, we could try to process them just like motion tweens…

Let’s take a look at these 2 shapes – both are defined by the same number of points:

a_b_shapes.gif

A morph from A to B would be a classical shape tween – but let’s see how we can get the same visual result with motion tweens.

Let’s do this in Flash

  • create a red circle Symbol of type MovieClip, drag 5 instances onto the stage and position them like the red circles of shape A
  • insert another keyframe at frame 25 or so and position the circle clips at the same coordinates as in shape B
  • now add a motion tween for each red circle so that they move from position A to position B

What’s still missing now is the grey shape -

using a bit of code, we connect the 5 points in each frame and fill the space in between with the Drawing API.

And here’s the result

Now in a next step we could look up the coordinates of the red points and replace the manual motion tweens by using a Tweening Engine – and viola, we have our first super-simple purely code-based shape tween.

Are we limited to straight lines? No, one option to get curves is to feed the coordinates of the red points to a spline function – this will look like this:

Let’s resume:

when we have 2 shapes that are defined by an equal number of points we can morph one into the other by motion-tweening each point and, on each frame, connect the points with lines and fill the space in between with the drawing API.

In other words: if we know the coordinates of the defining points we can shape tween with code alone.

The only thing that remains to be done is to find these defining points for a given shape.
There are tools that are able to extract the drawing data from shapes that where created with the Flash authoring tool (post on ‘flashcoders’) – one problem to solve there is that in the end shape A and shape B must have the same number of defining points, only under this condition it is possible to ‘map’ each point of shape A to a point of shape B.
Another way – and that’s what I’d like to demonstrate here – is to make a Flash movie that lets us ‘draw’ shapes by moving around control points – we can then simply read the coords of these points and map them to points of other shapes that we have created with the same tool.

Here we go - make a new shape by dragging around the control points and see it being shape-tweened to other, prerecorded shapes:

Agreed, the editor could be more refined -

one idea would be to draw the shapes with any real drawing app, import it into Flash as a Bitmap, detect the edges of the shape through some Bitmap API wizardry and distribute the control points automatically and evenly along the edge…

Before coming to an end, here’s another example of dynamic shape tweening

dynamic shape tween dynamically generated Shape-Tweens

These shapes were edited with this tool, which I built about 2 years ago (WARNING: not for the faint of heart! The interface is ‘experimental’ and the code only palatable for the amateurs of italian pasta.)

Download the source files