Written by: Patrick Mineault, , http://www.5etdemi.com
Difficulty Level: Advanced
Requirements: MX and experience with actionscript
Topics Covered: Drawing API, dynamic masking masking, curveTo, transitions
Assumed Knowledge: basic actionscript, first tutorial
Download FLA

Dynamic masking using the drawing API II

In a previous tutorial (dynamic masking using the drawing API), I showed you how to create interesting masking effects using the drawing API. If you haven't seen it yet, please read the introduction section in order to get familiar with the drawing API and masking commands. I purposefully avoided to use the curveTo drawing command in the first tutorial as it is a tad more complicated to use than lineTo. However, while designing my new site I discovered quite an interesting application of this command to the dynamic masking method and this is the highly popular 'swoosh' masking effect. Here's an example:

The movie attaches a picture on stage, assigns a mask movie clip to it and draws some shapes inside to reveal a portion of the picture. Since the shapes are curved, we'll need some background on the curveTo command.

The curveTo command

We'll need the following drawing API commands for this movie:

MovieClip.beginFill()
MovieClip.endFill()
MovieClip.lineTo()
MovieClip.curveTo()

The first three were covered in the first tutorial so that leaves us with curveTo. The curveTo(controlX, controlY, endX, endY) command draws a quadratic curve from (startX, startY) to (endX, endY). The (startX, startY) point is determined by the last point used by a moveTo, lineTo or curveTo command. The (controlX, controlY) point acts as a control point for the curve. The control point constrains the slope at the two end points of the curve. You can think of the control point as a 'magnetic point' to which the curve is attracted to. It works much like the control points on a Bezier curve, except there's one one per curve instead of two.

Getting back to our movie, the mask for the pics will be created in three successive stages, which are shown in the following diagram:

As you see, the mask will consist at first of a line at the top and will morph into the 4 sided-figure delimited by the blue line and the exterior frame. This will then morph into the red outline figure and finally into a complete rectangle. The crosses represent the approximate locations of the control points of the blue and red lines. We see immediately from this diagram that all of our figures can be represented by a four-sided figure with three straight sides and a curved line at the bottom.

One thing you may have noticed is that for the first and last frames the bottom line will not be curved. In this case the control point may be placed anywhere on the straight line. This will give us some flexibility in animation as you will see later on.

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
        }
}

This gives us the following movie:

First, a blank movie clip is created in which the line will be drawn. A setinterval action is called so that the animation will advance every 17 milliseconds. A variable is used to keep track of where we are in the animation: animIndex. In this case, the animation takes 60 steps. The time variable goes from 0 to 1 depending on the value of animIndex. The dist variable ('distance') is set to the value of time to create a linear animation (more on this later).

Since the dist variable takes all values between 0 and 1 an obvious set of formulas are used to move from point a to point b:

x = startX + dist*deltaX;
y = startY + dist*deltaY;

Here startX and startY are the starting coordinates and deltaX and deltaY are the x and y distance between the start and end points. So what we do in this script is apply this set of formulas to the start, control and end points. In this case, deltaX and deltaY are 0 for the start point, which further simplifies our code.