Fading objects with code

When you work with movie clips on the Stage, you might want to fade the movie clip in or out instead of toggling its _visible property. The following procedure demonstrates how to use an onEnterFrame event handler to animate a movie clip.

To fade a movie clip by using code:

Create a new Flash document called fade1.fla.

Draw some graphics on the Stage using the drawing tools, or import an image to the Stage (File > Import > Import to Stage).

Select the content on the Stage and select Modify > Convert to Symbol.

Select the Movie clip option and click OK to create the symbol.

Select the movie clip instance on the Stage and type img1_mc in the Instance Name text box in the Property inspector.

Select Frame 1 of the Timeline, and add the following code to the Actions panel:

img1_mc.onEnterFrame = function() {
    img1_mc._alpha -= 5;
    if (img1_mc._alpha <= 0) {
        img1_mc._visible = false;
        delete img1_mc.onEnterFrame;
    }
};

This code uses an onEnterFrame event handler, which is invoked repeatedly at the frame rate of the SWF file. The number of times per second that the event handler is called depends on the frame rate at which the Flash document is set. If the frame rate is 12 frames per second (fps), the onEnterFrame event handler is invoked 12 times per second. Likewise, if the Flash document's frame rate is 30 fps, the event handler is invoked 30 times per second.

Select Control > Test Movie to test the document.

The movie clip you added to the Stage slowly fades out.

You can modify the _alpha property by using the setInterval() function instead of an onEnterFrame event handler, as the next procedure shows.

To fade an object by using the setInterval() function:

Create a new Flash document called fade2.fla.

Draw some graphics on the Stage, or import an image to the Stage (File > Import > Import to Stage).

Select the content on the Stage and select Modify > Convert to Symbol.

Select the Movie clip option and click OK to create the symbol.

Select the movie clip instance on the Stage and type img1_mc in the Instance Name text box in the Property inspector.

Select Frame 1 of the Timeline and add the following code to the Actions panel:

var alpha_interval:Number = setInterval(fadeImage, 50, img1_mc);
function fadeImage(target_mc:MovieClip):Void {
    target_mc._alpha -= 5;
    if (target_mc._alpha <= 0) {
        target_mc._visible = false;
        clearInterval(alpha_interval);
    }
}

The setInterval() function behaves slightly differently than the onEnterFrame event handler, because the setInterval() function tells Flash precisely how frequently the code should call a particular function. In this code example, the user-defined fadeImage() function is called every 50 milliseconds (20 times per second). The fadeImage() function decrements the value of the current movie clip's _alpha property. When the _alpha value is equal to or less than 0, the interval is cleared, which causes the fadeImage() function to stop executing.

Select Control > Test Movie to test the document.

The movie clip you added to the Stage slowly fades out.

For more information on user-defined functions, see Defining global and timeline functions. For more information on the onEnterFrame event handler, see onEnterFrame (MovieClip.onEnterFrame handler) in the ActionScript 2.0 Language Reference. For more information on the setInterval() function, see setInterval global function in the ActionScript 2.0 Language Reference.

For a source sample of scripted animation in Flash, animation.fla, see the Flash Samples page at www.adobe.com/go/learn_fl_samples. Download and decompress the Samples zip file and navigate to the ActionScript2.0/Animation folder to access the sample.

Flash CS3