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:
- Create a new Flash document and save it as dynmask.fla.
-
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:Object
= 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 thetarget_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 theMovieClip.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. -
Save the Flash document and select Control > Test Movie to test the SWF file. Figure 24 shows the final result.
Note: To animate
_alpha
in the previous example instead of_yscale
, tween thetarget_mc
movie clip directly instead of the mask movie clip.
Comments