Actionscript Cookbook

7.9. Fading a Movie Clip

Problem

You want to programmatically fade a movie clip.

Solution

Create a fade( ) method that uses the onEnterFrame( ) event handler method and the movie clip’s _alpha property.

Discussion

You can set the value of a movie clip’s _alpha property to adjust its transparency. Thus, if you want to set a movie clip’s transparency to a single value, you can do so with a single statement such as:

// Set the movie clip's transparency to 50%.
myMovieClip._alpha = 50;

You can repeat this process to achieve a fading effect on the same movie clip. You should do this by placing the property assignment statement within the onEnterFrame( ) method of the movie clip:

// Repeatedly decrement the _alpha of the movie clip.
myMovieClip.onEnterFrame = function (  ) {
  this._alpha--;
};

The valid range for the _alpha property of a movie clip is from 0 (completely transparent) to 100 (fully opaque). However, because ActionScript allows you to set the value outside that range, use an if statement to safeguard against inappropriate values:

// Continuously decrement _alpha, provided it is greater than 0.
myMovieClip.onEnterFrame = function (  ) {
  this._alpha--;
  if (this._alpha <= 0) {
    delete this.onEnterFrame;
  }
};

The preceding code works, but it is not completely efficient and has the potential for some minor errors. The reason is that the working range for _alpha is from 0 to 100, but internally Flash converts all the numbers to a range of 0 to 255. As a result, you can end up with incorrect ...