Flash Training: Setting Color with Bitwise Binary Operators.	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Setting Color with Bitwise Binary Operators

Free Flash Tutorial

Color, Hexadecimal Numbers & Bitwise Binary Operators

What is a bitwise operator and why do you need to use it?

To display colour on a computer screen you need to control three settings: Red, Green and Blue (RGB). The values run from 0 through to 255. So if all three colours are set to zero (0, 0 , 0) there is no light so the object on screen will be black. If all three colours are set at 255, 255, 255 the object will be white. All other colours are somewhere in between.

This is quite straight forward except that most web languages such ActionScript do not use a decimal system but a Hexadecimal colour system. This is a system of ten numbers and six letters. Each of the three colours (RGB) has two digits representing the colour value. These could be either numbers or letters. Black is: 000000 and white is: ffffff.

The numbering system goes like this: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f, 10, 11 etc.

You will find that ff is the same as 255 or ffffff is 255, 255, 255 which is white.

If you are going to set the colour of an object to a predefined colour you would simply type the hexadecimal number into the ActionScript.

Note: You can find the hexadecimal colour codes by using the Fill colour drop down menu in Flash or print out a web safe hexadecimal / RGB colour chart at: Beginners Web Safe Colours

 

Cross Ref: To see how to change an objects colour to a predefined colour see tutorial: Beginners Changing the colour of Objects

The problem with animating colour is how do you get it to count using a hexadecimal system rather than a decimal system? Well the answer is you don't bother! The reason for that is it is far easier to tap into the computers own binary system of counting.

All computers count using binary which is a number system made up of zeros and ones: 0, 1, 10, 11, 100, 101 etc.

The reason why colour systems count from 0 to 255 is because eight digits in a binary system is the same as 255.
So the binary number: 1111 1111 equals 255.

Bitwise operators enable you to tap into this binary system. What you do is set eight of the digits to represent Red, eight digits to represent Green and eight to represent the Blue value:

Black: 0000 0000  0000 0000  0000 0000
White: 1111 1111  1111 1111  1111 1111

Lets take another look at the line of code which sets the colour value: (myRed<<16|myGreen<<8|myBlue);

You will notice there are three sections: myRed<<16|myGreen<<8|myBlue

The Bitwise operator Left Shift: << Moves the Green section beyond the first eight digits to the middle part of the number. It also moves the Blue past the Green value. In this way each of the Red, Green, Blue colour values has its own eight digits.

The Bitwise operator OR: | Joins the three parts of the number to return a single binary digit. The Bitwise operator always returns a 32 digit number, which is longer than we need. This does not matter as the first part of the number has no value. The number returned for black and white would be:

Black: 0000 0000  0000 0000  0000 0000  0000 0000
White: 0000 0000  1111 1111  1111 1111  1111 1111

Thankfully using Bitwise operators is simpler than understanding the maths behind the ActionScript!

Cross Ref: If you want to learn more about Bitwise operators look at tutorial: ActionScript - Bitwise Operators

Cross Ref: If you want to learn more about using Colour look at tutorial: Web Safe Colours

Cross Ref: If you want to learn more about changing color with ActionScript: Colour Sliders

Return to the Tutorial: Animating Filters with ActionScript

Quick Link: Tutorial Introduction: Animating Filters with ActionScript

 

Quick Link: Step Three: ActionScript - Using Variables to Animating Filters

 

Quick Link: Step Five: Changing Complex Parameters - Animating Filters

I hope you have found this useful. If so perhaps you could recommend this site to others and link to webwasp!