Patrick Mineault

Freelancer behind 5 1/2 math and physics enthusiast Patrick has a knack for making seemingly simple things overly complicated. Perfect for a tutorial writer.

View all articles by Patrick Mineault

Easing, bouncing and other transitions

Now you're probably wondering why we bother to use both a time and a distance variable. Well, let's start by looking at the relationship between time (horizontal axis) and dist (vertical axis) graphically:

As you see, the relationship between time and distance is linear. The slope on this graph corresponds to the speed of the animation. In this case the speed is constant. Now if we want for example to start out fast and end at a null speed, we just have to find a function which has a high slope at t=0 and a null slope at t=1. This could be an upside down parabola or the portion of a sine from 0 to pi/2. By using different functions, we can create different relationships between time and distance and get interesting effects, like easing in and out, bouncing, and more esoteric transitions.

Here are a few examples of functions that may be useful:

This gives us the following transitions:

You may be interested in looking at Robert Penner's transition classes, which are based on this principle.

Putting it all together

With all of this in mind, we're ready to introduce the complete script:

//Global vars
mWidth = 350;

//Create movie clip and mask
counter = -1;
createMovieClip();
animInt = setinterval(doAnim, 17);

function createMovieClip()
{
        counter++;
        attachmovie('pic' add (counter % 2), 'pic' add counter, counter);
        createEmptyMovieClip('mask' add counter, counter + 10000);
        this['pic' add counter].setMask(this['mask' add counter]);
}

function doAnim()
{
        var currMC = _root['mask' add counter];
        if(animIndex < 15)
        {
                var time = animIndex/15;
                var dist = 0.5*Math.sin(Math.Pi*(time-0.5)) + 0.5;
                
                with(currMC)
                {
                        clear();
                        beginFill(0x000000);
                        lineTo(mWidth,0);
                        lineTo(mWidth,dist*125);
                        curveTo(250,dist*40,0,10*dist);
                        endFill();
                }
        }
        else if (animIndex < 35)
        {
                var time = (animIndex-15)/20;
                var dist = 0.5*Math.sin(Math.Pi*(time-0.5)) + 0.5;
                
                with(currMC)
                {
                        clear();
                        beginFill(0x000000);
                        lineTo(mWidth,0);
                        lineTo(mWidth,125);
                        curveTo(250-100*dist,40+150*dist,0,10+190*dist);
                        endFill();
                }
        }
        else if (animIndex <= 50)
        {
                var time = (animIndex-35)/15;
                var dist = 0.5*Math.sin(Math.Pi*(time-0.5)) + 0.5;
                
                with(currMC)
                {
                        clear();
                        beginFill(0x000000);
                        lineTo(mWidth,0);
                        lineTo(mWidth,125+75*dist);
                        curveTo(150,190+10*dist,0,200);
                        endFill();
                }
        }
        
        animIndex++;
        if(animIndex > 50)
        {
                animIndex = 0;
                _root['pic' add (counter - 1)].removeMovieClip();
                _root['mask' add (counter - 1)].removeMovieClip();
                createMovieClip();
        }
}

The script uses two functions: createMovieClip and doAnim. The createMovieClip function attaches a picture on stage, creates an empty movie clip and sets it as the mask of the picture. Since we are stacking pics one on top of the other, a counter variable is set up to keep track of instances.

The doAnim function is called every 17 milliseconds. The animIndex variable keeps track of the current point in the anim. As I mentioned in the first part, the animation takes place in three steps corresponding to the three intermediate shapes of the mask.

This time, I've decided to use the 'easing in and out' function as sketched above. Now, it's simply matter of drawing the shapes using the drawing API functions. For the first and last straight bottom lines, the position of the control point can be moved to the left and right. Playing with this parameter will influence the intermediary shapes obtained and will give a more or less pleasing result. Experimenting is the way to go.

After each transition, a new pic is added using the createMovieClip function and it starts all over again.

Conclusion

In this tutorial, I've shown you how to create a 'swoosh' mask transition using the drawing API and dynamic masking. By now, you should understand the curveTo method, the basics of shape morphing and how to easily create easing and bouncing transitions. Of course, there's no better way to get a hand on your new knowledge than with practice. The techniques shown here are quite general; here is another version of the same file but with different parameters:

If you need professional help with ActionScript, please visit 5etdemi.com for my portfolio and contact info. Happy flashing!