Learn Flash: Color Sliders	Home • Tutorials • Forum • Webwasp Members • Templates • Mates • Food • Contact

Flash - Colour Sliders

Free Flash Tutorial

Step Six: Creating a Movie Clip

1. Go to: Insert > New Symbol
   Name: Star (or what ever you want)
   Behavior: Movie Clip
   Click: OK
2. Draw something. For test purposes a simple rectangle or circle will do fine. You can always change it later.
3. When you have finished go back to the main stage by clicking on the tab.
4. Drag your new symbol out onto the Main Stage.
5. Give it an Instance name: myMC
6. Attach the following script to myMC:
   
       onClipEvent (enterFrame) {
           myColour = new Color(_root.myMC);
           myRed = (_root.myRedSlider.knob._x);
           myGreen = (_root.myGreenSlider.knob._x);
           myBlue = (_root.myBlueSlider.knob._x);
           myColour.setRGB(myRed<<16|myGreen<<8|myBlue);
       }
   
   Test your movie. It should now work.

Note: In the ActionScript above to type the line: | use: Shift + Back Slash \

The ActionScript Explained

onClipEvent (enterFrame) {
Each time the play-head enters the frame (normally 12 times per second) do the following ...

myColour = new Color(_root.myMC);
A variable that applies a new colour to myMC.

myRed = (_root.myRedSlider.knob._x);
A variable that looks has the same value as the red slider.

myGreen = (_root.myGreenSlider.knob._x);
A variable that looks has the same value as the green slider.

myBlue = (_root.myBlueSlider.knob._x);
A variable that looks has the same value as the blue slider.

myColour.setRGB(myRed<<16|myGreen<<8|myBlue);
Sends a colour value to the variable myColour based numeric value of the three variables above.

}
Closes the Clip Event.

Colour, Hexadecimal Numbers & Bitwise Operators

Using sliders to set colour in ActionScript is reasonably easy thanks to Bitwise Operators. The question is 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 the colour sliders 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: myColour.setRGB(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: Beginners - Web Safe Colours

 

Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here