USING THE COLOR OBJECT

To use a Color object, you must first create it using the Color object constructor. The following is the syntax for creating a new Color object:

 myColor = new Color(shirt); 

The above line of ActionScript creates a new instance of the Color object named myColor and associates it with a movie clip instance named shirt.

You can create the object anywhere, and the constructor accepts one parameter, the path to the movie clip it should modify. If you want to create a Color object with ActionScript from within a movie clip that will reference itself, you would use this as the path. Take, for example, the following:

 myColor = new Color(this); 

This creates a new instance of the Color object on the movie clip instance that contains this script.

NOTE

As with any constructor-created object, you can create many different Color objects in a single project and associate them with various timelines, providing you with dynamic control over the color of many instances simultaneously.

The most common Color object method is setRGB() , which changes the color of the movie clip instance specified as the parameter when the object was created. Here's an example of one use of setRGB():

 myColor = new Color(shirt);  myColor.setRGB(0xFF3300); 

The above ActionScript creates a new Color object named myColor and then uses the setRGB() method to change the color of the shirt movie clip instance to red. This method accepts a parameter (0x) followed by the hex value for a color. The 0x parameter is a reserved character combination that tells Flash that what follows is a hexadecimal number.

The number system we're accustomed to using is called base 10, which means ten numbers are used for all values (zero through nine). In other words, all other numbers (28; 6,403; 496; 300, 439; and so on) can be described using a combination of these ten. Hexadecimal numbers, in contrast, are base 16, which means their values are expressed using numbers and letters: zero through nine, and A through F. Using these, you can create hexadecimal values of 00 to FF, with 00 being a base 10 value of 0 and FF a base 10 value of 255.

However, you don't absolutely have to know hex values to describe certain colors when using the setRGB() method: Instead, if you know the RGB value of a color, you can convert it to a hexadecimal value dynamically using the Number object and the parseInt() function which we'll show in the following exercise (though we won't cover it in detail).

In this exercise you'll create a simple interactive scene in which you'll be able to change the color of a clown's hair using several buttons.

1. Open Clown1.fla in the Lesson04/Assets folder.

   The content has already been created and placed on the stage so that we can focus on the ActionScript involved in changing the color of a movie clip. There are three layers on the main timeline: Background, Clown Hair, and Buttons.

   The Clown Hair layer contains a movie clip instance named hair. You will be changing the color of this instance with ActionScript.

   The Buttons layer contains five circular, colored buttons. You'll be adding ActionScript to these buttons to change the color of the clown's hair.

2. With the Actions panel open, select the red button and add this script:

    on (release) {    hairColor = new Color(hair);    hairColor.setRGB(0xCC0000);  } 

   This ActionScript tells Flash to create a new Color object named hairColor when this button is released and to associate that object with the hair movie clip instance. The second line of ActionScript uses the setRGB() method to change the color of this Color object (hence the hair movie clip instance) to CC0000 , which is the hex value for the red in the middle of the button.

3. With the Actions panel open, select the yellow button and add this script:

    on (release) {    hairColor = new Color(hair);    hairColor.setRGB(0xFFCC00);  } 

   This ActionScript is identical to the ActionScript attached to the red button except for the color value used in the setRGB() method, the value of which is the hex value for the yellow in the middle of the button.

4. With the Actions panel open, select the green button and add this script:

    on (release) {    hairColor = new Color(hair);    hairColor.setRGB(0x009900);  } 

   The hex value for green in the middle of this button is 009900 and is used in the setRGB() method, just as in the two preceding scripts.

5. With the Actions panel open, select the blue button and add this script:

    on (release) {    hairColor = new Color(hair);    hairColor.setRGB(0x336699);  } 

   As with the previous three buttons, this ActionScript creates a Color object that it uses to change the color of the hair movie clip instance.

   

   Now it's time to test your work!

6. Choose Control > Test Movie. Click the four buttons to view the color changes.

   Every time you click one of these buttons, Flash creates a new Color object and associates it with the hair movie clip instance. It then uses the setRGB() method available to Color objects to change the color of that instance.

   NOTE

   Although in this exercise a Color object is created on each button, an object really only needs to be created once after which it exists as part of the timeline. Any changes to that object can then be made simply by using methods available to that object.

   Now let's use ActionScript to change the clown's hair color to a random color.

7. Close the test movie to return to the authoring environment. With the Actions panel open, select the rainbow-colored button and add this script:

    on (release) {    R = random(256);    G = random(256);    B = random(256);    colorHexString = R.toString(16)+G.toString(16)+B.toString(16);    colorHex = parseInt(colorHexString,16);    hairColor = new Color(hair);    hairColor.setRGB(colorHex);  } 

   There are two ways to describe a color programmatically: with its RGB (red, green, blue) value or with its hex value. There are three separate RGB values, each of which can have a numeric value between 0 and 255. The RGB value of red, for instance, is R=255, G=0, B=0. The corresponding hex value (for the same color of red) is FF0000 . The idea behind the first five lines of this script is to generate a random RGB value, convert it to a hex value, then use that value in the setRGB() method at the bottom of the script.

   The first three lines of the above ActionScript create variables R , G , and B whose values are random numbers between 0 and 255. The next line of ActionScript uses the toString() method of the Number object to convert a base 10 number to a base 16 string value. Let's assume, for example, that when this script is executed, the following R , G , and B values will be generated:

    R = 45  G = 202  B = 129 

   The next line of the script says to convert the value of R to a base 16 value, then convert it to a string, and then do the same thing with G and B . Using the plus (+) operator to put the converted values together, the variable coloHexString will have a string value of "2DCA81." This needs to be converted to a hex number (same value as string value, without the quotes) to use the setRGB() method. To do this, you use the parseInt() function as seen above.

   The last two lines of ActionScript create a new Color object pointing to the hair movie clip instance and then change its color to the random value just created.

   NOTE

   This ActionScript can randomly generate more than 16 million possible colors.

8. Choose Control > Test Movie, and click the rainbow-colored button several times.

   As you can see, the hair movie clip instance changes randomly! You can even modify this technique to randomly generate colors within a certain range.

9. Close the test movie and save your work as Clown2.fla.

   You should now be able to easily change the color of any movie clip instance at any time.