Using Symbols, Instances, and Library Assets > Changing instance properties > Changing the color and transparency of an instance |  |

Changing the color and transparency of an instance

Each instance of a symbol can have its own color effect. To set color and transparency options for instances, you use the Property inspector. Settings on the Property inspector also affect bitmaps placed within symbols.

Symbol instances, each with its own color effect

When you change the color and transparency for an instance in a specific frame, Flash makes the change as soon as it displays that frame. To make gradual color changes, you must apply a motion tween. When tweening color, you enter different effect settings in starting and ending keyframes of an instance, and then tween the settings to make the instance's colors shift over time. See Tweening instances, groups, and type.

Tweening gradually changes an instance's color or transparency.

Note: If you apply a color effect to a movie clip symbol that includes multiple frames, Flash applies the effect to every frame in the movie clip symbol.

To change the color and transparency of an instance:

1 | Select the instance on the Stage and choose Window > Properties.
2 | In the Property inspector, choose one of the following options from the Color pop-up menu:
| Brightness adjusts the relative lightness or darkness of the image, measured on a scale from black (-100%) to white (100%). Click on the triangle and drag the slider or enter a value in the text box to adjust Brightness.
| Tint colors the instance with the same hue. Use the Tint slider in the Property inspector to set the tint percentage, from transparent (0%) to completely saturated (100%). Click on the triangle and drag the slider or enter a value in the text box to adjust Tint. To select a color, enter red, green, and blue values in the respective text boxes, or click on the color box and select a color from the pop-up window or click the Color Picker button.
| Alpha adjusts the transparency of the instance, from transparent (0%) to completely saturated (100%). Click on the triangle and drag the slider or enter a value in the text box to adjust Alpha.
| Advanced separately adjusts the red, green, blue, and transparency values of an instance. This is most useful when you want to create and animate subtle color effects on objects such as bitmaps. The controls on the left let you reduce the color or transparency values by a specified percentage. The controls on the right let you reduce or increase the color or transparency values by a constant value.
| The current red, green, blue, and alpha values are multiplied by the percentage values, and then added to the constant values in the right column, producing the new color values. For example, if the current red value is 100, setting the left slider to 50% and the right slider to 100 produces a new red value of 150 ([100 x .5] + 100 = 150).
| Note: The advanced settings in the Effect panel implement the function (a * y+ b)= x where a is the percentage specified in the left set of text boxes, y is the color of the original bitmap, b is the value specified in the right set of text boxes, and x is the resulting effect (between 0 and 255 for RGB, and 0 and 100 for alpha transparency).

You can also change the color of an instance using the ActionScript Color object. See Color (object) in the ActionScript Dictionary.