Dynamic masking using the drawing API II - Page 3

Morphing shapes

We have to morph shapes into one another. Although this may seem like a hard task it's actually as simple as moving an object from point A to point B. We'll move the three points of a first curve (start, control and end points) to the corresponding locations in a second curve. Let's start with a simple example morphing a C shape into a J. Create a new movie and add this script to the first frame:

//Create movie clip and mask
counter = -1;
_root.createEmptyMovieClip('line', 0);
animInt = setInterval(doAnim, 17);
animDir = 1;

function doAnim()
{
    var currMC = _root.line;
    var time = animIndex/60;
    var dist = time;
    with(currMC)
    {
        //Coords for the C shape: (150, 25), (25,100), (150,175)
        //Coords for the J shape: (150, 25), (125,200), (50,125)
        clear();
        lineStyle(0x000000);
        moveTo(150,25);
        curveTo(25+100*dist,100+100*dist,150-100*dist, 175-50*dist);
    }
    
    animIndex += animDir;
    if(animIndex >= 60)
    {
        animDir = -1
    }
    if(animIndex <= 0)
    {
        animDir = 1
    }
}