Flash CS3 Documentation

Learning ActionScript 2.0 in Adobe Flash > Animation, Filters, and Drawings > Drawing with ActionScript > Using Drawing API methods and scripting animation

Using Drawing API methods and scripting animation

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);
           endFill();
       }
       target_mc.setMask(maskClip);
       target_mc._visible = true;
       var mask_tween:Tween = new Tween(maskClip, "_yscale", Strong.easeOut, 0, 100, 2, true);
   };
   this.createEmptyMovieClip("img_mc", 10);
   var img_mcl:MovieClipLoader = new MovieClipLoader();
   img_mcl.addListener(mclListener);
   img_mcl.loadClip("http://www.helpexamples.com/flash/images/image1.jpg", 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.

   NOTE

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

For a sample source file which shows you how to use the Drawing API in a Flash application, drawingapi.fla, see the Flash Samples page at www.adobe.com/go/learn_fl_samples. Download the Samples zip file and navigate to the ActionScript2.0/DrawingAPI folder to access this sample.

Flash CS3