Recipe 11.2. Applying Transparency to Movie Clips

Problem

You want to adjust the transparency of a movie clip.

Solution

Select the movie clip instance during authoring time and adjust the Alpha Color value in the Property inspector.

Alternatively, you can modify the transparency at runtime using ActionScript to set the movie clip's _alpha property.

Discussion

By adjusting the alpha (transparency) value of a movie clip instance, you affect the appearance of the transparency of all the contents of that instance. The valid alpha range is from 0% (completely transparent) to 100% (completely opaque), and the default value for all new movie clip instances is 100%. Notice, however, that the alpha value applied to a movie clip instance is multiplied by the alpha values of each of the nested contents to yield the resulting transparencies. For example, if you apply a 50% alpha value to a movie clip instance, and that instance contains two nested movie clipsone with 100% alpha and the other with 50% alphathe result is that the first nested movie clip displays at 50% alpha (which is 50% of 100%) and the second nested movie clip displays at 25% alpha (which is 50% of 50%).

One way to modify a movie clip instance's transparency is at authoring time. The advantage of adjusting a movie clip instance's alpha value at authoring time is that you can accomplish this task without having to use any ActionScript. The process is as follows:

1. Select the movie clip instance on the stage.

2. Locate the Color Styles menu in the Property inspector, and select the Alpha option.

3. Modify the percentage in the form field that appears to the right of the Color Styles menu.

Another option is to modify a movie clip's transparency at runtime using ActionScript. The ActionScript for modifying an instance's alpha is really quite simple. All that is required is one line of codean assignment statement that sets the value of the instance's _alpha property. The _alpha property should contain a numeric value from 0 to 100. If you assign _alpha a value of less than 0, the movie clip will display at 0% alpha, and if you assign _alpha a value of greater than 100, the movie clip will display at 100% alpha.

The following is an example of the proper syntax for assigning a value to a movie clip's _alpha property. In this example, the movie clip instance is named mClip, and the value 70 is assigned to the _alpha property for that movie clip. Use your own movie clip instance name and the value you want to assign to the _alpha value.

 mClip._alpha = 70; 

The advantage of setting a movie clip's transparency using ActionScript is that you can allow for greater user interaction. For example, setting a movie clip's alpha value at authoring time does not allow for much interactivity. However, you can create all kinds of interesting effects by adjusting the alpha with ActionScript. One such example is that you can create buttons that increment and decrement an instance's transparency:

 // Apply actions when the user clicks and releases btIncrement, a button instance.  btIncrement.onRelease = function():Void {   // Add five to the _alpha property of mClip.   mClip._alpha += 5; } // Apply actions when the user clicks and releases btDecrement, a button instance.  btDecrement.onRelease = function():Void {   // Subtract five from the _alpha property of mClip.   mClip._alpha -= 5; } 

By adjusting the alpha for a movie clip, you can create transparency effects, and you can also create effects where instances seem to fade in and out of the movie. In order to accomplish this task, you need to either use a motion tween or an ActionScript techniqueboth of which are covered in Recipe 11.3.