Using symbol color effects

Using symbol color effects

Let’s say you want to change the color of one instance of a symbol in an Adobe® Flash® CS3 document. You can’t use the Color panel to change its stroke or fill, because an instance isn’t editable. You can’t double-click the instance and change its color in symbol-editing mode, because doing so would change the color of all instances of that symbol.

The solution is to select the instance and look for a menu marked Color at the right side of the Property inspector. From that menu—the Color Styles menu—you can choose the type of color effect you want to apply. Depending on which option you select, a different control (or set of controls) will appear next to the menu.

In this tutorial, you'll learn how to change the color of just one instance of a symbol.

Requirements

To complete this tutorial you will need to install the following software:

Adobe Flash CS3

• Try
• Buy

Using symbol color effects

The available options are for changing one color of a symbol instance are:

• Brightness. The brightness control is a slider that goes from 100 percent to –100 percent, with 0 as the default. Choosing a positive number brightens the instance; choosing a negative number darkens it.

• Tint. There are several tint controls. The first is a standard Flash color menu that allows you to choose a tint for the instance in the same way you’d choose a color for a stroke or fill. Below the menu are three sliders—labeled R, G, and B—that allow you to adjust the individual levels of red, green, and blue on a scale ranging from 0 to 255.

  None of these tint controls discriminate between strokes and fills. As a result, tinting an instance causes the stroke and fill to appear the same color, even if they had contrasting colors to begin with.

  To avoid this, you can use the Tint Amount slider at the right of the color menu. This slider acts as if the tint were a separate object overlaying the instance: If the slider is set to 100 percent, only the tint is visible; if the slider is set to 0 percent, only the unchanged instance is visible. At intermediate settings—such as 50 percent, the default—the tint is treated as if it’s partly transparent, allowing some of the underlying instance to show through. As you lower the tint amount, the original contrast between the stroke and fill colors becomes more apparent, but the tint looks increasingly washed out (Figure 1).

  

  Figure 1: The effects of the Tint Amount slider can be seen in these three different views of the same instance. On the left, the tint amount is set to 0 percent, leaving the original instance unchanged. In the center, the tint amount is set to 100 percent, completely covering the instance with a uniform color. On the right, the tint amount is set to 50 percent, allowing the instance to partially show through the tint.

• Alpha. This setting is synonymous with opacity. When the Alpha slider is set to 100 percent (the default), the instance is completely opaque; when it’s set to 0 percent, the instance is completely transparent. If the background behind the instance is white, the effect of lowering the alpha is indistinguishable from raising the brightness.

• Advanced. This option lets you control tint and alpha at the same time. When you choose Advanced from the Color Styles menu, a button labeled Settings appears to the right. Clicking it brings up the Advanced Effect dialog box, which contains two columns of sliders.

  In the left column are RGB sliders and an Alpha slider. The Alpha slider works identically to the Alpha slider you saw earlier. The RGB sliders, however, work differently: Instead of making the stroke and fill the same color, they increase or decrease the amount of red, green, and blue by the same percentage, thereby preserving the differences between the stroke and fill colors.

  The sliders in the right column modify absolute amounts of red, green, blue, and alpha, in increments ranging from 255 to –255. Because they add the same amount to (or subtract the same amount from) each color, they preserve the differences between stroke and fill colors.

  For these reasons, if you use the Color Styles menu to change the color of an instance, you’ll usually get better results with the Advanced option than you would with Tint.

Where to go from here

For more information about Flash, check out the following resources:

• Flash Design Center
• Adobe Video Workshop

About the authors