Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Combining Animation and the Drawing API

Combining Animation and the Drawing API

You can combine the Drawing API with the Tween and TransitionManager classes to create some excellent animated results, and you only have to write a small amount of ActionScript.

The following procedure loads a JPEG image and dynamically masks the image so you can reveal the image slowly after it loads by tweening the image’s mask.

To animate dynamic masks:

  1. Create a new Flash document and save it as dynmask.fla.
  2. Add the following ActionScript to Frame 1 of the Timeline:

    import mx.transitions.Tween;
    import mx.transitions.easing.*;
    var mclListener:Object = new Object();
    mclListener.onLoadInit = function(target_mc:MovieClip) {
    target_mc._visible = false;
    // Center the image on the Stage.
    target_mc._x = (Stage.width - target_mc._width) / 2;
    target_mc._y = (Stage.height - target_mc._height) / 2;
    var maskClip:MovieClip
    = target_mc.createEmptyMovieClip("mask_mc", 20);
    with (maskClip) {
    // Draw a mask that is the same size as the loaded image.
    beginFill(0xFF00FF, 100);
    moveTo(0, 0);
    lineTo(target_mc._width, 0);
    lineTo(target_mc._width, target_mc._height);
    lineTo(0, target_mc._height);
    lineTo(0, 0);
    target_mc._visible = true;
    var mask_tween:Object
    = new Tween(maskClip, "_yscale", Strong.easeOut, 0, 100, 2, true);
    }; this.createEmptyMovieClip("img_mc", 10);
    var img_mcl:MovieClipLoader = new MovieClipLoader();
    "", img_mc);

    This code example imports the Tween class and each of the classes in the easing package. Next it creates an object that acts as the listener object for a MovieClipLoader instance that’s created in a later section of the code. The listener object defines a single event listener, onLoadInit, which centers the dynamically loaded JPEG image on the Stage. After the code repositions the image, a new movie clip instance is created within the target_mc movie clip (which contains the dynamically loaded JPEG image). The Drawing API code draws a rectangle with the same dimensions as the JPEG image within this new movie clip. The new movie clip masks the JPEG image by calling the MovieClip.setMask() method. After the mask is drawn and set up, the mask uses the Tween class to animate, which causes the image to slowly reveal itself.

  3. Save the Flash document and select Control > Test Movie to test the SWF file. Figure 24 shows the final result.

    Figure 24. Animated mask revealing the image using an animation effect with ActionScript

    Note: To animate _alpha in the previous example instead of _yscale, tween the target_mc movie clip directly instead of the mask movie clip.