Colour Sliders

The aim of the tutorial is to learn how to create a group of sliders which are used to set the colour of an object. Sliders are extremely versatile and can be used to control a range of different settings such as: volume, size, transparency or in this case colour. In fact a slider can be used as a controller for anything which has a range of values.

Cross Ref: If you want to know how to build a volume control slider see intermediate tutorial: Volume Control

Below is an example of the same slider being used to set a variety of settings:

Cross Ref: If you want to know how to use Flash to draw online see tutorial: Drawing in a Flash Movie

Colour, Hexadecimal Numbers & Bitwise Operators

Using sliders to set colour in ActionScript is reasonably easy thanks to Bitwise Operators but colour is not set with standard decimal numbers. Web languages such as HTML and ActionScript use a Hexadecimal colour system. This tutorial will look at how to calculate these numbers using Bitwise operators. Thankfully this is reasonably easy to do in ActionScript.

Creating the Slider

The slider is simply a type of control button. Once you have made a slider you can reuse it as many times as you want to control different types of settings. So although we will use it here to change an objects colour you can reuse your slider in other Movies. The slider is created through placing a series of symbols one inside another (nesting). The first of these is the button that you moves from left to right.

Step one: The button

1. Go to: Insert > New Symbol
   Name: My Button
   Behavior: Button
   Click: OK
2. Draw a rectangle.
   The size and position is important.
   
   
   

   (Click to enlarge)
   
   Note: My Slider button is wider than it is high: Width 16, Height 12. This is because the slider has to be made very long and you squash it down latter. That means that although my button starts off wide, it will end up tall and thin as it is in the example above.
   
   Note: The center of the button is set exactly to the middle of the stage. Notice the X position: -8 (exactly half the width). The X axis is left to right as we are creating a horizontal slider the X position is important.
   
   
3. Once the position and size is correct go back to the main stage by clicking on the tab.

Step two: Dragable Movie Clip

1. Go to: Insert > New Symbol
   Name: Dragable MC
   Behavior: Movie Clip
   Click: OK
2. Open your Library and drag My Button into the centre of the stage.
   
   
   

   The button has been placed exactly centre stage. (Click to enlarge)
   
   
3. Attach the following ActionScript to the button:
   
   

   on (press) {         startDrag("", false, 0, 0, 255, 0);     }     on (release, releaseOutside) {         stopDrag();     }

   
   Most of this code is straight forward: While you hold the mouse button down you can drag the button and when you let go the button will stop moving. The only bit to look at is the settings on line 2:
   
   Line 2
   The "" enable you to name the object that you are going to drag ("myButton"). In this case it is not necessary.
   The false means that the button is not locked to the mouse position.
   
   The Numbers allow you to restrict the movement. For a slider this is important:
   
       The first 0 is the left position
       The second 0 is the top position
       The third number (255) is the is the right position
       The last number is the bottom position
   
   Colour values use a system of 0 through to 255. Thus we need to be able to drag the slider button from 0 to 255.
   If you were creating a slider for an objects opacity (alpha) you would use 0 to 100.
   
   If I wanted to create a vertical slider the numbers would read: 0, 255, 0, 0
   
4. Once the ActionScript is correct go back to the main stage by clicking on the tab.

Step three: The Slider

1. Go to: Insert > New Symbol
   Name: Slider
   Behavior: Movie Clip
   Click: OK
2. Draw a long thin rectangle on stage.
   Again the position and size is important. It needs to be exactly 255 pixels long and left aligned to the centre of stage as in the picture below:
   
   
   

   (Click to enlarge)
   
   
3. When bar is finished create a new Layer.
4. Open your Library and drag out the symbol: Dragable MC
   Again the position is critical. In this case it is aligned centre stage.
   
   
   

   (Click to enlarge)
   
   
5. The ActionScript needs to know the position of this knob. So give it an Instance name: knob
   You can see the Instance name in the property Inspector above.
   
   Note: If you did not want the slider to have a default setting of zero you would not centre align the knob. If you wanted the default position to be 100 you place the knob on: X 92. Why 92? Because this is: 100 - 8 (half the width of the knob). This means that the centre of the knob is on position 100 and left edge is on 92.
   
   
6. The slider is now complete so go back to the main sage by clicking on the tab.

Step four: The Main Stage - Sliders

1. Open your Library and drag out three instances of the slider.
2. They will almost certainly be too long, so use the Property Inspector to make them shorter.
   The width of mine is: 100 pixels
3. Give the Sliders text labels: Red, Green & Blue
4. Use the Property inspector to give your three sliders the following Instance names:
   
       myRedSlider
       myGreenSlider
       myBlueSlider
   
   
5. Attach the following ActionScript to each Slider, changing the Instance name (myRedSlider) each time:
   
   

   onClipEvent (enterFrame) {         _root.myRed = Math.round(_root.myRedSlider.knob._x);     }

   
   This does the following: When the play head enters the frame (enterFrame), normally 12 times per second, get the X position of the knob to the nearest whole number (Math.round) and remember it as a variable called myRed.
   
   This is most important part of the slider. As the knob is moved the information is then taken note of and remembered. It could then be used to set a whole range of different settings.

Step five: Testing the Sliders

The next step is not essential but it is a good idea to have a visual check to ensure that the slider is working. There are quite a lot of steps involved in building the sliders and all the details need to be correct. It is always better to test sections of work rather than build the whole thing and then test.

1. Get the text tool and drag out a text box on Stage.
2. With the text box selected go to the Property Inspector select: Dynamic Text
   
   
   
   
3. Still in the Property Inspector give the text box a Variable Name: myRed
   Not an Instance name !!
   
   
4. In the Property Inspector go to: Character > Only > Numerals
   This keeps your file size down.
   
   
   

   Settings for the text box with the variable name: myRed (Click to enlarge)
   
   The first slider is now ready to test.
   
   
5. Got to: Control > Test Movie
   
   You should be able to slide the button back and forth between 0 and 255. The number should be displayed in the text box you just created. It should display only whole numbers and the number should change as you slide the button back and forth.
   
   
6. If everything works as planned create a new text box for the remaining two sliders and test them. The chances are that if the first one worked ok the others will too.
   
   
   

   Testing the sliders.

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 colours 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: Web Safe Colours

Cross Ref: To see how to change an objects colour to a predefined colour see tutorial: 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  0000 0000  0000 0000  0000 0000

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