Manipulating Color Attributes

The ColorTransform class in ActionScript gives you unprecedented control of the appearance of your MovieClip objects. By controlling the color (and transparency) of your artwork with ActionScript's ColorTransform class, you can:

• Create on-the-fly color schemes or "skins" for Flash interfaces.

• Enable users to select and view color preferences for showcased products on an e-commerce site.

• Instantly change the color attributes of a Flash design-in-progress for a client.

Because color is controlled through the ColorTransform class, we'll quickly review the unique properties within this class. Refer to Table 27-1 for more information. Note that this table is organized by order of practical use.

Table 27-1: Properties for the ColorTransform Class

Property	Definition	Options
rgb	Retrieves or sets the RGB offset for the targeted Movie Clip. This property changes all colors in the targeted instance to one	ct.rgb = 0xRRGGBB; where: ct is the name of the ColorTransform object. We'll discuss the creation of ColorTransform objects in this section. RR, GG, and BB are the offset values (in hexadecimal) for the Red, Green, and Blue channels, respectively. solid RGB color.
[Channel]Multiplier	Retrieves or sets the multiplier used by a specific color channel in the targeted Movie Clip. Acceptable values are between (and including) -1 and 1. You can preview a channel’s multiplier effect by using the left-hand column of values in the Advanced Effect dialog box of the Color mode, as accessed in the Property inspector settings for a Movie Clip instance.	ct.redMultiplier = 0.2; ct.greenMultiplier = 0.65; ct.blueMultiplier = -1; ct.alphaMultiplier = 0.1; Where: ct is the name of a ColorTransform object. We'll discuss the intricacies of these properties in the following sections.
[Channel]Offset	Retrieves or sets the offset used by a specific color channel in the targeted Movie Clip. Acceptable values are between (and including) -255 and 255. You can preview a channel’s offset effect by using the left-hand column of values in the Advanced Effect dialog box of the Color mode, as accessed in the Property inspector settings for a Movie Clip instance.	ct.redOffset = 100; ct.greenOffset = 50; ct.blueOffset = 25; ct.alphaOffset = 0; where: ct is the name of a ColorTransform object. You'll practice the use of offsets in an exercise within this section.

Caution 

The ColorTransform class requires Flash Player 8. The older Color class for Flash Player 5 and higher is officially deprecated in Flash Player 8. If you need to control the color of MovieClip instances in Flash Player 7 or earlier movies, use the Color class instead. You can read our archived coverage of the Color class from the Macromedia Flash MX 2004 Bible (Wiley, 2004) at www.flashsupport.com/archive.

Creating a ColorTransform Object

To manipulate the color attributes of a Movie Clip instance, you need to create a new ColorTransform object that references the Movie Clip instance. In the following steps, you learn to use the constructor for the ColorTransform object. Let's work out the steps required to take control of color properties.

On the CD-ROM 

For the exercises with the Color object, make a copy of the dogColor_starter.fla document from the ch27 folder of this book's CD-ROM. Thank you, Sandro Corsaro, of www.sandrocorsaro.com, for supplying the dog artwork!

1. Save the starter file as dogColor_100.fla.

2. Select the instance of the dog graphic on the Stage. Open the Property inspector and name this Movie Clip instance mcDog_1.

3. Create a new layer on the Main Timeline, and name the layer buttons.

4. Open the Components panel and drag an instance of the Button component onto the Stage. Place the instance near the left corner of the Stage. We discuss components in more detail in Chapter 33, "Using Components." For now, we'll guide you through the use of this component for the purposes of this exercise.

5. Select the Button component instance on the Stage, and open the Property inspector. Make sure the Parameters tab is selected in the inspector. Name this instance cbtRed. Type the text Red in the label field. Refer to the settings shown in Figure 27-4.

6. Now you need to create a changeColor() function in the movie. This function is executed by the cbtRed instance when the button is clicked. Create a new layer on the Main Timeline and name it actions. Select frame 1 of the actions layer, and open the Actions panel (F9). Type the following code into the Script pane:

    1.  import flash.geom.ColorTransform; 2. 3.  var mcDog_1:MovieClip; 4.  var cbtRed:mx.controls.Button; 5. 6.  function changeColor(oEvent:Object):Void { 7.     var sLabel:String = oEvent.target.label.toLowerCase(); 8.     if (sLabel == "red") { 9.        var ct:ColorTransform = new ColorTransform(); 10.       ct.rgb = 0xFF0000; 11.       mcDog_1.transform.colorTransform = ct; 12.    } 13. } 14. 15. cbtRed.addEventListener("click", this.changeColor); 

   Line 1 imports the ColorTransform class so that the ActionScript compiler can correctly create the Flash movie on publish. Lines 3 and 4 declare the data types of the mcDog_1 and cbtRed instances, respectively.

   The changeColor() function is defined on lines 6 through 13. In this function, the oEvent argument represents an event object that the Button instance passes to the function. When the cbtRed instance is clicked, oEvent.target will equal cbtRed. (You'll be adding another instance in short order.) Line 7 of this function establishes a variable named sLabel that returns the label text inside of the target instance and converts the label text to lowercase. If sLabel equals "red" in line 8, lines 9 through 11 will execute. Line 9 creates a new ColorTransform object called ct. Once the ct object is initiated, you can access properties of the ColorTransform object, such as rgb. In line 10, you set the color to pure red, designated by 0xFF0000 in hexadecimal. In line 11, you apply the ct instance to the new colorTransform property of the MovieClip.transform property.

   The last line of code (line 15), after the function declaration, tells the cbtRed instance to register the changeColor() function as a listener for click events. Whenever the cbtRed instance is clicked, the changeColor() function is invoked.

7. Save the Flash document, and test the movie. Click the cbtRed instance on the Stage. The color of the mcDog_1 Movie Clip should change to bright red. Close the Flash movie, and return to the Flash 8 authoring environment.

8. To see that rgb is both a property you can write and read, let's create some trace()messages for the Output panel. Go back to the changeColor() function on frame 1. Add the following line of code just before the closing curly brace (}) of the if() action. Type this as one line of code:

    trace("ct's RGB numeric value = "+ ct.rgb); 

9. Save the document and test the movie. When you click the cbtRed instance, the Output panel opens and displays the following text:

    ct's RGB numeric value = 16711680 

10. To change this value back to the hexadecimal value you entered in the rgb property, you need to convert the value to base 16. Add the following action after the last trace() action from Step 8:

     trace("ct's RGB hex value = "+ ct.rgb.toString(16)); 

11. Save the document and test the movie. When you click the cbtRed instance, the Output panel should open and display the new value:

     ct's RGB numeric value = 16711680 ct's RGB hex value = ff0000 

    However, you won't need to convert rgb's native return value to set another ColorTransform object equal to a previous rgb value. In the following steps, you will create another dog and ColorTransform object team.

12. Duplicate the mcDog_1 Movie Clip instance on the Stage (Edit ⇨ Duplicate), and name the new instance mcDog_2 in the Property inspector. Position the mcDog_2 instance to the right of mcDog_1.

13. Duplicate the Button component instance on the Stage, and position the new instance below the original one. In the Property inspector, change its instance name to cbtPassRed. Change its label value to Pass Red.

14. Select frame 1 of the actions layer, and open the Actions panel. On the closing curly brace line of the existing if() code in the changeColor() function, add the code shown in bold in Listing 27-2. Also, add the new variables shown in bold formatting at the top of the listing.

    Listing 27-2: Checking for the Pass Red Label

     import flash.geom.ColorTransform; var mcDog_1:MovieClip; var mcDog_2:MovieClip; var cbtRed:mx.controls.Button; var cbtPassRed:mx.controls.Button; function changeColor(oEvent:Object):Void {    var sLabel:String = oEvent.target.label.toLowerCase();    if (sLabel == "red") {       var ct:ColorTransform = new ColorTransform();       ct.rgb = 0xFF0000;       mcDog_1.transform.colorTransform = ct;       trace("ct's RGB numeric value = "+ ct.rgb);       trace("ct's RGB hex value = "+ ct.rgb.toString(16));    } else if (sLabel == "pass red") {       var ct:ColorTransform = new ColorTransform();       ct.rgb = mcDog_1.transform.colorTransform.rgb;       mcDog_2.transform.colorTransform = ct;    } } cbtRed.addEventListener("click", this.changeColor); cbtPassRed.addEventListener("click", this.changeColor); 

    Tip 

    For this example, we wanted to demonstrate the reading and writing of the rgb property. You can also simply pass the transform property, which includes the MovieClip instance's alpha value, to another MovieClip object:

     mcDog_2.transform.colorTransform = ;                     mcDog_1.transform.colorTransform; 

15. Save the Flash document and test the movie. When you click the cbtRed instance, the mcDog_1 Movie Clip instance turns red. When you click the cbtPassRed instance, the mcDog_2 Movie Clip instance turns red.

Figure 27-4: The parameters for this instance of the Button component

Note 

If you click the second Button instance first, the mcDog_2 Movie Clip instance will turn black. Why? Because the first button's actions were not executed, and there was no previous rgb property value for the new rgb property. Consequently, ActionScript returns a zero value. In hexadecimal color, zero is equivalent to black.

Now that you've had some experience with the ColorTransform object's rgb property, let's move on to a more complex use of ColorTransform. You'll use the Flash document from this exercise, so keep the dogs on the Stage!

On the CD-ROM 

You can find the completed Flash document, dogColor_100.fla, in the ch27 folder of this book's CD-ROM.

Setting Multiplier and Offset Values

The ColorTransform class also features multiplier and offset properties, which require a more thorough understanding of RGB color space.

The multiplier and offset properties of the ColorTransform class are

• redMultiplier — The Red channel percentage

• redOffset — The Red channel offset

• greenMultiplier — The Green channel percentage

• greenOffset — The Green channel offset

• blueMultiplier — The Blue channel percentage

• blueOffset — The Blue channel offset

• alphaMultiplier — The Alpha channel percentage

• alphaOffset — The Alpha channel offset

The multiplier properties are decimal values, ranging in value from -1 to 1. The offset properties are integer-based from -255 to 255 (derived from 24-bit RGB color space, in which each 8-bit color channel can have a range of 256 values).

These properties and values may seem complex, so refer to the Advanced options of the Color menu for symbol instances in the Property inspector for guidance. With the Advanced option chosen in the Color menu, click the Settings button. In the Advanced Effect dialog box, the left-hand color controls are percentage-based (or multipliers), whereas the right-hand controls are offset-based. Admittedly, color is difficult to visualize from numbers. To accurately predict the color changes with ColorTransform, we use the Advanced Effect dialog box to help us out.

On the CD-ROM 

Make a copy of the dogColor_100.fla file if you didn't complete the previous section's exercise. This document is located in the ch27 folder of this book's CD-ROM.

1. Resave the Flash document from the previous section as dogColor_200.fla.

2. Select the original mcDog_1 Movie Clip instance on the Stage. Open the Property inspector, and choose the Advanced option in the Color menu. Press the Settings button to the right of the menu. In the Advanced Effect dialog box, enter the following value on the left-hand side: -100% Blue. On the right-hand side, enter these values: 37 G and 255 B. Refer to Figure 27-5. Click OK to close the dialog box. With these values, the mcDog_1 instance should be a monochrome blue with yellow eyes. Normally, you would want to write these values down so that you had them to use later. Because you have them printed here in this book, erase them by choosing None from the Color menu in the Property inspector. The mcDog_1 instance should now appear in its original state.

3. Duplicate one of the existing Button component instances on the Stage. Place the duplicated instance underneath the last Button component instance. Name the instance cbtRabid. Change the label value to Rabid.

   With this new instance, you will create some code that will initiate a new ColorTransform object. The new object will be given properties that have the same values as those determined in Step 2.

4. Select frame 1 of the actions layer and open the Actions panel (F9, or Option+F9 on Mac). Add the bold code shown in Listing 27-3.

   Listing 27-3: Checking for the rabid Label0

    import flash.geom.ColorTransform; var mcDog_1:MovieClip; var mcDog_2:MovieClip; var cbtRed:mx.controls.Button; var cbtPassRed:mx.controls.Button; var cbtRabid:mx.controls.Button; function changeColor(oEvent:Object):Void {    var sLabel:String = oEvent.target.label.toLowerCase();    if (sLabel == "red") {       var ct:ColorTransform = new ColorTransform();       ct.rgb = 0xFF0000;       mcDog_1.transform.colorTransform = ct;       trace("ct's RGB numeric value = "+ ct.rgb);       trace("ct's RGB hex value = "+ ct.rgb.toString(16));    } else if (sLabel == "pass red") {       var ct:ColorTransform = new ColorTransform();       ct.rgb = mcDog_1.transform.colorTransform.rgb;       mcDog_2.transform.colorTransform = ct;    } else if (sLabel == "rabid"){       var ct:ColorTransform = new ColorTransform();       ct.blueOffset = 255;       ct.blueMultiplier = -1;       ct.greenOffset = 37;       mcDog_1.transform.colorTransform = ct;    } } cbtRed.addEventListener("click", this.changeColor); cbtPassRed.addEventListener("click", this.changeColor); cbtRabid.addEventListener("click", this.changeColor); 

   In the preceding code, you created a new ColorTransform instance named ct. In addition to rgb, ColorTransform instances can have offset and multiplier values for each color (and alpha) channel. In Listing 27-3, you assigned the values you determined in Step 2. Offset values have a one-to-one relationship with the offset values displayed in the Advanced Effect dialog box, but multiplier values are divided by 100. So, if you have a multiplier value of -100 in the Advanced Effect dialog box, the equivalent ColorTransform multiplier value would be -1. After you have set the appropriate off-set and/or multiplier values, you apply the ct instance to the colorTransform property of the transform property of the mcDog_1 instance.

   Note 

   The ColorTransform class is one of two types of alterations to Movie Clips that can be made with the Transform class. The transform property of the MovieClip class uses the Transform class, which is new to Flash Player 8 and encompasses a wide range of characteristics that can be applied to the MovieClip class. For more detailed information of the Transform class, refer to the Macromedia Flash 8 ActionScript Bible (Wiley, 2006).

5. Save the Flash document, and test the movie. Click the new Button instance that you added in Step 3. The colors of the mcDog_1 Movie Clip instance should change to match those you saw in Step 2. Close the Test Movie window, and return to the Flash 8 authoring environment.

   Now you will create a button that restores the original look of the mcDog_1 Movie Clip instance.

6. Duplicate one of the Button instances, and place the new instance underneath the last Button instance. In the Property inspector, name this component instance cbtRestore. Change the label value to Restore.

7. Select frame 1 of the actions layer, and open the Actions panel (F9). Add the bold code shown in Listing 27-4 to the Script pane.

   Listing 27-4: Checking for the Restore Label

    import flash.geom.ColorTransform; var mcDog_1:MovieClip; var mcDog_2:MovieClip; var cbtRed:mx.controls.Button; var cbtPassRed:mx.controls.Button; var cbtRabid:mx.controls.Button; var cbtRestore:mx.controls.Button; function changeColor(oEvent:Object):Void {    var sLabel:String = oEvent.target.label.toLowerCase();    if (sLabel == "red") {            var ct:ColorTransform = new ColorTransform();            ct.rgb = 0xFF0000;            mcDog_1.transform.colorTransform = ct;            trace("ct's RGB numeric value = "+ ct.rgb);            trace("ct's RGB hex value = "+ ct.rgb.toString(16));    } else if (sLabel == "pass red") {            var ct:ColorTransform = new ColorTransform();            ct.rgb = mcDog_1.transform.colorTransform.rgb;            mcDog_2.transform.colorTransform = ct;    } else if (sLabel == "rabid"){            var ct:ColorTransform = new ColorTransform();            ct.blueOffset = 255;            ct.blueMultiplier = -1;            ct.greenOffset = 37;            mcDog_1.transform.colorTransform = ct;    } else if (sLabel == "restore"){            var ct:ColorTransform = new ColorTransform();            mcDog_1.transform.colorTransform = ct;    } } cbtRed.addEventListener("click", this.changeColor); cbtPassRed.addEventListener("click", this.changeColor); cbtRabid.addEventListener("click", this.changeColor); cbtRestore.addEventListener("click", this.changeColor); 

   In Listing 27-4, you simply need to create a new ColorTransform instance (ct) and pass it to the colorTransform property of the MovieClip instance, mcDog_1. A new ColorTransform instance has default multiplier and offset values. So, when it's passed to a MovieClip object, the color properties are set back to the original values.

8. Save the Flash document again, and test the movie. Click the cbtRabid instance you created in Step 3. After the mcDog_1 Movie Clip instance changes color, click the cbtRestore instance you created in Step 6. Voila! The mcDog_1 Movie Clip instance reverts to its original color. Click the cbtRed instance that you created in the previous section. This button changes the appearance of the mcDog_1 Movie Clip instance to a solid red color. Now click the cbtRestore instance — the mcDog_1 Movie Clip instance reverts to its original look!

Figure 27-5: These settings will change the color of the mcDog_1 instance.

On the CD-ROM 

You can find the completed document, dogColor_200.fla, in the ch27 folder of this book's CD-ROM.

While the ColorTransform.rgb property can alter basic color properties of MovieClip objects, the offset and multiplier properties are the color-control powerhouse. Any look that you can accomplish with the Advanced Effect dialog box, you can reproduce with the ColorTransform class.