Color Transforms

Next up in your rendering arsenal is the Color object and its methods , as well as the ColorTransform object, available in Flash 8. Unlike the drawing API, these dont allow you to create graphics, but merely change the color of an existing graphic contained in a movie clip or other display object instance. Actually, it is more accurate to say that you are altering the color of the movie clip. Lets dive in and see how it all works.

Changing color with the Color object

Note that although the Color object has been deprecated in Flash 8, it still works. It has been included here for use in Flash 7 movies.

To change the color of a movie clip, you first create a new Color object, passing it the name of an existing movie clip instance in the constructor, like so:

 var myColor:Color = new Color(myMovieClip);

Then you call a method of that Color object, which affects the color of the movie clip. Note that you dont need to do anything to the movie clip itself. The Color object is kind of a wrapper that goes around the clip, and whatever you do to the object changes the clip.

Two methods of Color allow you to change the color of a movie clip: setRGB and setTransform . These methods work quite differently.

Setting a single color with setRGB

The setRGB method takes in a single color value. It changes the entire movie clip to the given color. If you had a movie clip that contained an imported bitmap, and you created a Color object, and on that object you said setRGB(0xff0000) , you wouldnt have a reddish picture; instead, youd have a solid red rectangle. setRGB obliterates any existing color in a movie clip. It doesnt respect lines or fills either. They will all be changed equally. Anything in the clip that is visible gets its color changed to whatever color setRGB tells it.

Knowing this, you should understand then that setRGB is best for blocks of colors and simple shapes . Its senseless to create some fancy, multicolored graphic, only to slap a coat of single-colored paint over the whole thing.

Lets try out setRGB to get a feel for it. Create any shape and convert it to a movie. Put an instance of that clip on stage and give it a name. As usual, Ive already done this for you in ch04_09.fla , naming the instance star . The star instance has a yellow fill and a thick blue border. Now for the code:

 var starColor:Color = new Color(star); starColor.setRGB(0xff00ff);

Test that out. Voila! No more yellow fill. No more blue border. Just a solid mass of purple star, as shown in Figure 4-7.

Figure 4-7: Before and after setRGB (trust me, this is purple)

Thats about it for setRGB . Try it out with different movie clips and different colors. Youll get the hang of it pretty quickly.

setRGB has a companion method called getRGB . This simply returns the color that you last set. If you havent yet set a color, it will return zero.

Transforming colors with setTransform

The setTransform method is the powerhouse of color manipulation in Flash. With it, you dont merely slap on a layer of color, but actually intelligently shift the color values, tint, or alpha of a movie clip. Thus, if you have an imported bitmap photo embedded in a movie clip, you can do some rudimentary image processing on it. Lets take a look at how this one works.

First, you need to create an object to pass into the setTransform method. This object contains all the information it needs to alter the color. It has eight properties: two each for red, green, blue, and alpha. The names of the properties are ra , ga , ba , aa , rb , gb , ab , and bb . The a values are a percentage and can range from 100 to ˆ 100. The b values are an addition and can range from 255 to ˆ 255. Now, what do I mean by a percentage or addition? Basically, Flash evaluates each pixel of the movie clip and gets the original value for each color channel ( r , g , b , or a ). It multiplies that by the percentages specified in the a properties, and then adds on the values from the b properties. Here is the actual formula, using red as an example:

 newRed = oldRed * ra / 100 + rb;

The same goes for green, blue, and alpha. Lets say the red value for a particular pixel is 128, ra is 60, and rb is 20. You get a new red value for that pixel of 128 — 60 / 100 + 20, or 96.8. Its roughly three quarters as bright as it was.

The ch04_10.fla file has a nice example of using setTransform . Ive included a commemorative picture of myself , along with a free slider component you can use in your own projects if you want. The picture is contained in a movie clip named pic . The sliders call the change function when they change.

This function creates a new object and assigns the values of all the sliders to it, and then calls setTransform on pic , using that object. Heres the code in full:

 var myColor:Color = new Color(pic); ra.changeHandler = change; ga.changeHandler = change; ba.changeHandler = change; aa.changeHandler = change; rb.changeHandler = change; gb.changeHandler = change; bb.changeHandler = change; ab.changeHandler = change; function change() {       var transformObject:Object = new Object();       transformObject.ra = ra.value;       transformObject.ga = ga.value;       transformObject.ba = ba.value;       transformObject.aa = aa.value;       transformObject.rb = rb.value;       transformObject.gb = gb.value;       transformObject.bb = bb.value;       transformObject.ab = ab.value;       myColor.setTransform(transformObject); }

A cool trick is to create a negative image. You can do this by setting the percentage sliders for r , g , and b to the bottom ( ˆ 100), and the additive sliders for the same to the top (255). In effect, this completely reverses the values of each color.

Changing colors with the ColorTransform object

If you are using Flash 8, the correct way to do color transforms is via the ColorTransform object. All the stuff you just learned about offsets and percentages still applies, but the syntax is a little different.

First, you should know that a movie clip now has a new property, which is an object called transform . This object itself contains various properties that you can use to scale, rotate, position, and colorize the movie clip. The property of interest here is colorTransform . Realize that this is a property of a property of a movie clip, so its accessed like this:

 myMC.transform.colorTransform

To change a movie clips coloring, you assign a new ColorTransform object to this property. And just what, you might ask, is a ColorTransform object? This is really pretty much the same kind of object as the transformObject object created in the previous example, but rather than leaving it as a generic object, in Flash 8, it has been formalized into its own official class. Instead of saying this:

 myTransform = new Object()

And then assigning all those ra , rb , and so on properties, you can say something like this:

 myTransform = new ColorTransform(0.5, 1.0, 0.5, 0.5, 10, 10, 10, 0);

Also, you might notice that the percent values are now decimals in the range of ˆ 1 to 1, rather than ˆ 100 to 100. The offsets still go from ˆ 255 to 255. The actual constructor for the ColorTransform object looks like this:

 ColorTransform(redMultiplier,                greenMultiplier,                blueMultiplier,                alphaMultiplier,                redOffset,                greenOffset,                blueOffset,                alphaOffset)

For the Color object, the formula for transforming a particular channel is like so:

 newRed = oldRed * ra / 100 + rb;

For the ColorTransform object, it winds up being like this:

 newRed = oldRed * redMultiplier + redOffset;

One more thing you need to know is that ColorTransform is actually part of the flash.geom package. In ActionScript 2, packages are just a way of organizing code. You access a package with dot notation, using syntax that is similar to the way you access properties of an object. So, to create a ColorTransform object, you actually need to say this:

 new flash.geom.ColorTransform(. . .)

Another way to do it, if you know youre going to be using ColorTransform a lot and dont want to type flash.geom over and over, is to import the class. Just place the following line at the start of your file:

 import flash.geom.ColorTransform;

Now the class will be available for you to create instances directly, without prefixing the package name every time.

Just to give you an example of how this might make things a little easier, I modified the file for the previous example, ch04_10.fla , to a Flash 8 file named ch04_10a.fla . I changed the top sliders to have a range of ˆ 1 to 1, instead of ˆ 100 to 100, and replaced the code with this:

 import flash.geom.ColorTransform; ra.changeHandler = change; ga.changeHandler = change; ba.changeHandler = change; aa.changeHandler = change; rb.changeHandler = change; gb.changeHandler = change; bb.changeHandler = change; ab.changeHandler = change; function change() {       pic.transform.colorTransform =             new ColorTransform(ra.value,                                ga.value,                                ba.value,                                aa.value,                                rb.value,                                gb.value,                                bb.value,                                ab.value); }

Make sure your publish settings are set to a Flash 8 file if you create this one yourself. I think youll agree this approach makes things a little easier.