Colors in Flash

In Flash, colors are specified as numbers . A color number can be anything from 0 to 16,777,215. In case you are wondering about the significance of that number, it comes from the fact that there are 16,777,216 possible color values, which is 256 — 256 — 256. Flash uses RGB color, meaning that every color is made up of a red, a green, and a blue component. Each of these component colors can have a value from 0 to 255. So, there are 256 possible shades each of red, green, and blue, resulting in the nearly 16.8 million colors.

This system is also known as 24-bit color. It takes eight bitsones or zerosto represent the number 256. Eight bits times three (red, green, blue) means it takes 24 bits to represent the 16.8 million possible colors. Additionally, there is a 32-bit color system, which also has an 8-bit number set aside for alpha, or transparency.

Now, since its pretty tough to visualize what color 11,273,634 might look like, we often tend to resort to another system of representing such numbers: hexadecimal. If youve used color values in HTML, this is nothing new to you, but lets cover the basics anyway.

Using hexadecimal color values

Hexadecimal, or hex for short, is a base 16 system. In other words, each digit can be from 0 to 15, rather than 0 to 9 as in the usual base 10 system. We dont have any single digits to represent the numbers 10 to 15, so we borrow the first six letters of the alphabet, A to F. So, each digit in a hex number can be from 0 to F. (In Flash, hex values are not case-sensitive, so you can use A through F or a through f.) To signal that we are using a hex number in HTML, you prefix it with #. In ActionScript, as with many other languages, you use the prefix 0x. For example, the number 0xA is equal to decimal 10, 0xF is equal to 15, and 0x10 is equal to 16.

In decimal, each digit is worth ten times the digit to its right. In other words, the number 243 means two times 100, four times 10, and three times 1. In hex, each digit is worth 16 times its right-hand neighbor. For example, 0x2B3 means two times 256, B (or eleven) times 16, and three times 1.

For 24-bit colors, this goes all the way up to 0xFFFFFF, which, if you do the math, is magically equal to 16,777,215. Furthermore, those six hex digits can be broken down into three pairs. The first pair represents the red component, the second pair represents the green, and the last two digits represent blue. This is often symbolized as 0xRRGGBB. 32-bit colors are likewise often seen as 0xAARRGGBB, with the AA being the alpha channel. (You would never put R, G, or B into an actual hex number; this is merely a symbolic way of telling you what color channel each digit controls.) Youll see where 32-bit colors come in when you look at the BitmapData object in the Bitmap control section later in this chapter.

Remember that each component color can have a value anywhere from 0 to 255, or in hex, 0x00 to 0xFF. Thus, the color red can be represented as 0xFF0000, which denotes full red, zero green, and zero blue. Likewise, 0x0000FF is completely blue.

If you took the earlier mentioned value of 11,273,634, and converted it to hex (Ill show you an easy way to do that in a minute), youd get 0xAC05A2. You can easily break this down into red = AC, green = 05, blue = A2. Seeing that red and blue are rather high, and green is almost nothing, you can guess that this color is rather purplish, something youd never be able to tell from the decimal value.

Note that it doesnt matter which number format you use in ActionScript. For any function that takes a color value, you can use either decimal or hex. The numbers 11273634 and 0xAC05A2 are exactly the same thing to Flash. Its just that one is more readable to us poor humans .

You might be wondering how to convert between the two formats. Well, converting from hex to decimal is pretty easy. Just trace the value. The trace function will convert to decimal for you.

 trace(0xAC05A2); 

One way to get hex is to use the toString(16) method, like so:

 trace((11273634).toString(16)); 

This will trace ac05a2 . If you are going to use that value somewhere, dont forget to add the 0x.

Combining colors

Another common question is how to combine three red, green, and blue values to form a valid overall color value. Say you have three variables , red , green , and blue . Each of them holds a value from 0 to 255, and you want to create a valid color value. Heres the formula to do just that:

 color24 = red << 16  green << 8  blue; 

This makes use of two bitwise operators you may not have seen before. Bitwise operators work on numbers on a binary levelon ones and zeros.

As I mentioned, RGB colors are 24-bit colors. If you were to list those 24 bits, you would have a string of 24 ones and zeros. Breaking up the hex 0xRRGGBB into binary, you have this:

 RRRRRRRRGGGGGGGGBBBBBBBB 

You see eight bits for red, eight for green, and eight for blue. This makes sense, because eight bits are equal to 256.

In the color combination formula, the first bitwise operator is << , which is the bitwise left shift operator. This shifts the binary representation of the value a number of places to the left. Say you have a red value of 0xFF or 255. This can be represented in binary as follows :

 11111111 

Shifting it 16 places to the left gives you this:

 111111110000000000000000 

As a 24-bit color number, this is red. Seen in hex, this is 0xFF0000again, full red.

Now, say you have a green value of 0x55 (85 decimal). In binary, it looks like this:

 01010101 

Shift this eight places, and you get this:

 000000000101010100000000 

So, the original eight bits now fall completely in the green range.

Finally, you have a blue value of 0xF3 (243 decimal), which is this in binary:

 11110011 

Since this already all falls into the blue range, you dont need to touch it.

Now, you have three values for red, green, and blue:

 111111110000000000000000 000000000101010100000000 000000000000000011110011 

You could simply add them together to get a single 24-bit number, but theres a quicker and cooler way: use bitwise OR, the symbol. This compares the digits of two numbers on a binary level and says if either digit is equal to one, the result will be one. If both digits are zero, the result is zero. You can OR the red, green, and blue values together, and it will say, If this OR this OR this is one, the result is one. And you get this result:

 111111110101010111110011 

If you convert that to hex, you get 0xFF55F3. Of course, you never see the bits or deal with the ones or zeros at all. Youd just type this:

 var color24:Number = 0xFF << 16  0x55 << 8  0xF3; 

Or, if you are working with decimal values, you could use this form:

 var color24:Number = 255 << 16  85 << 8  243; 

Again, Flash doesnt care whether you use hex or decimal.

You could do something similar by converting each of the red, green, and blue values to a hex string, concatenating them into one long string, and converting that back to a number. But if youve ever tried it, youll know that you get into some complicated and slow string logic. Conversely, bitwise operators are probably the fastest operators in ActionScript, since they work on such a low level.

Extracting component colors

Finally, you might also need to take a color value and extract the various component values from it. Lets go the opposite way and take the value 0xFF55F3 and try to get the red, green, and blue values from it. Heres the next formula for your toolbox:

 red = color24 >> 16; green = color24 >> 8 & 0xFF; blue = color24 & 0xFF; 

Lets take the lines one at a time. First, youve probably guessed that >> is the bitwise right shift operator, which shifts the bits so many places to the right. You cant have fractional bits, so any bits that are shifted too far right are just discarded. So, begin with red:

 111111110101010111110011 

When you shift the color value 16 places to the right, it becomes this:

 11111111 

Or its simply 0xFF, or 255.

For green, shift it 8 places, and you get this:

 1111111101010101 

Here, youve knocked the blue values out, but you still have the red ones hanging around. This is where you use another bitwise operator, & , also called AND. Like OR, this compares two values, but says, If this digit AND this digit are both one, then the result is one. If either one is zero, the result is zero. You compare it to 0xFF, so you are comparing these two numbers:

 1111111101010101 0000000011111111 

Since all the red digits are being compared with zero, they will all result in zero. Only the digits that are both one will fall through, so you get this:

 0000000001010101 

With blue, you dont need to shift anything, just AND it with 0xFF, which will preserve the blue and knock out the red and green.

Now that you know more than you ever hoped to know about colors in Flash, lets start using them.