Recipe 11.3. Fading Movie Clip Instances In and Out

Problem

You want to create an effect in which a movie clip appears to fade in or out of your movie.

Solution

Use a motion tween between an instance of the movie clip at 100% alpha to an instance of the movie clip at 0% alpha, to create a fade-out effector the reverse to fade-in.

Alternatively, you can use an interval function (or an onEnterFrame( )) event handler method to increment or decrement a movie clip's _alpha property over time.

Additionally, you have the option of using the mx.transitions.Tween class.

Discussion

You can create the effect of a movie clip fading in or out of your movie by adjusting the instance's alpha setting over time. By starting out with 100% alpha and gradually adjusting the value to 0%, the movie clip will appear to fade out, and by starting at 0% and gradually adjusting the alpha to 100%, the movie clip will appear to fade in. Or, you can also have the movie clip only fade in or out partially to create your own custom fading effects. For example, you might choose to lower the transparency of one or more movie clips when another is selected. Instead of completely fading those movie clips down to 0%, you can create a dimming effect by lowering the alpha to 50%.

You can create a fading effect at authoring time by using a motion tween between two instances of the same movie clip with different alpha settings. The following steps outline the basic process:

First, let's look at how to do this using an interval function. A simple fade function would take a single parameterthe reference to the movie clip to fade. We'll assume at first that we want to fade the movie clip down from complete opacity at a constant rate of one percentage point at a time. Here, then, is the function:

	function fadeMovieClip(mClip:MovieClip):Void {
	  var nAlpha:Number = mClip._alpha;
	  mClip._alpha = nAlpha - 1;
	  updateAfterEvent();
	}

Note that I didn't use the decrement operator in the preceding example. That is because Flash Player internally keeps track of alpha values on a scale from 0 to 255, and the _alpha properties effective range is from 0 to 100. Due to the way in which Flash Player converts between the scales, the effects are unexpected when using the decrement operator. Using the preceding technique (assigning the current _alpha value to a variable, and then subtracting 1 from that variable) corrects the issue.

Then you can set up an interval over which to call this function for a particular movie clip. The number of milliseconds for the interval that you should choose depends on how quickly you want the movie clip to fade. The smaller the interval, the faster the movie clip will fade. The following example creates an interval in which fadeMovieClip( ) is called every 100 milliseconds and is passed a reference to a movie clip:

	var nFadeSquareIntervalID:Number = setInterval(fadeMovieClip, 50, mSquare);

Now, one difficulty with this solution to this point is that it continues to decrement the _alpha property even after having reached 0. So the movie clip can end up with negative _alpha values. Although this is not inherently a problem, it can create other problems, and it is best to stop decrementing the _alpha property once it reaches 0. We can do this by adding an if statement to the function definition. Here's the new fadeMovieClip( ) definition:

	function fadeMovieClip (mClip:MovieClip):Void {
	  if(mClip._alpha > 0) {
	    var nAlpha:Number = mClip._alpha;
	    mClip._alpha = nAlpha - 1;
	    updateAfterEvent();
	  }
	}

And yet, there are still a few minor things we can do to improve upon this solution. Now we can also adjust the function definition a little, so that we can pass it a parameter indicating what value to use when changing the _alpha property. Instead of always decrementing by one, we can now specify positive and negative values to fade the movie clip both up and down. In this case, we'll also want to modify the if statement slightly, so that it also makes sure the _alpha property is no greater than 100:

	function fadeMovieClip (mClip:MovieClip, nRate:Number):Void {
	  if(mClip._alpha > 0 && mClip._alpha < 100) {
	    var nAlpha:Number = mClip._alpha;
	    mClip._alpha = nAlpha + nRate;
	    updateAfterEvent();
	  }
	}

With the latest fadeMovieClip( ) function, we can fade movie clips up and down using positive and negative rate values. Here are two examples in which we assume that mSquare has an initial _alpha value of less than 100 and mCircle has an initial _alpha value of greater than 0:

	var nFadeSquareUpIntervalID:Number = setInterval(fadeMovieClip, 50, mSquare, 1); 
	var nFadeCircleDownIntervalID:Number = setInterval(fadeMovieClip, 50, mCircle, -1);

Although this code works perfectly well, it has a slight defect: the interval doesn't stop. That won't normally cause any difficulties or errors, but it does mean that the Flash movie continues to use processor resources to keep calling the interval function, even though the task has completed. If enough intervals get set and none of them is cleared, after a while, Flash can start to slow down the entire computer. So it is generally a good practice to clear any interval after it's no longer necessary. You already learned how to do that in Recipe 11.1, by using the clearInterval( ) function. The only catch is that in this case, you've created a function (fadeMovieClip( )) that is abstract enough that it can accommodate many different movie clips and intervals. Therefore, you cannot call clearInterval( ) within the function using a hardcoded interval ID reference. Instead, you need to store the interval IDs in an associative array as you create them. The following code may seem a little confusing, because it is rather advanced. However, rest assured that using this same code, you'll be able to apply fades to any movie clip with just very minor modifications. The first thing you should do is define an associative array to contain the interval IDs. You can do that using the Object class constructor as follows:

	var oIntervalIDs:Object = new Object();

Then, instead of assigning each interval ID to a variable as in the previous examples, you can assign the IDs to elements of the associative array. Use the name (exp 3pod.com) of the movie clip as the index, or key, of the associative array. That way you'll be able to reference the ID later on simply by knowing the name (exp 3pod.com) of the movie clip. You can retrieve a movie clip's instance name (exp 3pod.com) using its _name (exp 3pod.com) property. The following code shows how you can create two intervals as in the previous example, but this time assigning the IDs to elements of the associative array:

	oIntervalIDs[mSqaure._name (exp 3pod.com)] = setInterval(fadeMovieClip, 50, mSquare, 1);
	oIntervalIDs[mCircle._name (exp 3pod.com)] = setInterval(fadeMovieClip, 50, mCircle, -1);

You then need to modify the fadeMovieClip( ) method just slightly. Add an else clause to the if statement so that if the _alpha value is beyond the valid range, Flash will clear the appropriate interval. The new function should appear as follows:

	function fadeMovieClip (mClip:MovieClip, nRate:Number):Void {
	  if(mClip._alpha > 0 && mClip._alpha < 100) {
	    var nAlpha:Number = mClip._alpha;
		mClip._alpha = nAlpha + nRate;
		updateAfterEvent();
	  }
	  else {
	    clearInterval(oIntervalIDs[mClip._name (exp 3pod.com)]);
	  }
	}

Although that may appear to be a lot of advanced code, you can copy and adapt it to fade any movie clip.

You can use buttons to initiate the programmatic fading by placing the call to setInterval( ) inside the onPress( ) or onRelease( ) event handler method:

	// In this example, I assume that the interval function, the btFadeUp button, and the
	mSquare 
	// movie clip are defined on the main timeline. 
	btFadeUp.onRelease = function ():Void {
	  oIntervalIDs[mSquare._name (exp 3pod.com)] = setInterval(fadeMovieClip, 50, mSquare, 1);
	}

You can accomplish basically the same tasks with the onEnterFrame( ) event handler method. However, it does not allow you quite as much flexibility as an interval function. You're likely to notice choppier animations unless you have a high frame rate and/or you are fading the movie clip slowly. However, if you prefer using an onEnterFrame( ) technique, you can use the following code as an example. Many of the same principles apply as with the interval function technique.

	mClip.onEnterFrame = function():Void {

	  // Decrement the _alpha value by one.
	  var nAlpha:Number = this._alpha;
	  this._alpha = nAlpha - 1;

	  // Check whether the value is out of range. If so, delete the onEnterFrame( ) event
	handler 
	  // method. Notice that you should not include the function call operator after 
	onEnterFrame. 
	  if(this._alpha > 100 || this._alpha < 0) { 
	    delete this.onEnterFrame; 
	  } 
	};

If you want to fade a movie clip's alpha up, increment the _alpha property's value instead. If you want the movie clip to fade more rapidly, increment or decrement the value by more than 1.

Flash ships with an ActionScript class called mx.transitions.Tween. You can use the class to add an alpha tween programmatically with the following syntax:

	var twShape:mx.transitions.Tween = new mx.transitions.Tween(movieClip, "_alpha", 
	null, startingAlpha, endingAlpha, durationInFrames);

For example, you can add an alpha tween that fades a movie clip named mShape from 0 to 100 over 10 frames using the following code:

	var twShape:mx.transitions.Tween = new mx.transitions.Tween(mShape, "_alpha", null, 
	0, 100, 10);

Optionally, you can replace the null reference with a reference to one of the built-in easing functions. Those functions are as follows:

mx.transitions.easing.Back.easeIn

mx.transitions.easing.Back.easeOut

mx.transitions.easing.Back.easeInOut

mx.transitions.easing.Bounce.easeIn

mx.transitions.easing.Bounce.easeOut

mx.transitions.easing.Bounce.easeInOut

mx.transitions.easing.Elastic.easeIn

mx.transitions.easing.Elastic.easeOut

mx.transitions.easing.Elastic.easeInOut

mx.transitions.easing.Regular.easeIn

mx.transitions.easing.Regular.easeOut

mx.transitions.easing.Regular.easeInOut

mx.transitions.easing.Strong.easeIn

mx.transitions.easing.Strong.easeOut

mx.transitions.easing.Strong.easeInOut

You can try the different function references to see the effects. Some of the easing effects may not be noticeable with alpha tweens, but they are with other types of tweens (rotation, x and y, etc.).

The following example alpha-tweens a movie clip named mShape from 0 to 100 over 10 frames using a regular ease in:

	var twShape:mx.transitions.Tween = new mx.transitions.Tween(mShape, "_alpha", mx. 
	transitions.easing.Regular.easeIn, 0, 100, 10);

Make sure that you do not include the function call operator (()) when you reference the easing functions.

Additionally, you can specify the duration of the tween in seconds rather than frames. If you want to do that, change the durationInFrames parameter to a duration given in seconds. Then, add one more parametera value of true. The extra parameter tells Flash to interpret the duration as seconds rather than frames. For example, the following code creates an alpha tween over five seconds:

	var twShape:mx.transitions.Tween = new mx.transitions.Tween(mShape, "_alpha", null, 
	0, 100, 5, true);