Flash AS2 Colorpicker




  Tutorial Instructions



AS2 comes with a great library called BitmapData that reads colors off of your flash file and reports them respectively. To create a color picker, we will set up the file first.

Step 1: Create a blank 400 x 300 AS2 Flash File

In the first part of this tutorial we are going to create a flash file with the width set to 400 and the height set to 300. After this we want to import an image to stage and set it to the center. We want to import the Spectrum.jpg image so we have all colors available to choose from. It should look like this when you are done. (hint you can drag and drop images into flash)




Step 2: Add a dynamic text box called testo

We want to be able to retrieve the color so we create a dynamic text called "testo" and we place it near the bottom of the file like so...







Step 3: Add the code to the frame

Alright so we need to do a few things here. First we need to import the flash display so we are able to use the BitmapData function and then we want to set up the BitmapData object. 
import flash.display.*
var bmp:BitmapData = new BitmapData(this._width, this._height, false);
bmp.draw(this);
First you notice we import flash.display.* which will import all functions available in flash.display which includes Bitmapdata. The next part sets up the bmp variable as an instance of BitmapData. To do this we need a new BitmapData drawn which will include the enitre frame width, the entire frame height and the last part is a boolean that returns whether or not we want transparency to be included.

Now we need to add function for when the mouse moves. When the mouse moves we want to record where the pointer was over and return the color at the point where it is. The following function will let us do that. 
this.onMouseMove = function(){
    var pColor:Number = bmp.getPixel(_xmouse, _ymouse);
    var hexColor:String = pColor.toString(16).toUpperCase();
    while(hexColor.length < 6){
        hexColor = "0" + hexColor;
    }
    var r = Number("0x" + hexColor.substr(0,2));
    var g = Number("0x" + hexColor.substr(2,2));
    var b = Number("0x" + hexColor.substr(4,2));
    testo.text = "#" + hexColor + " (R:"+r+", G:"+g+", B:"+b+")";
}
If you notice the onMouseMove creates the function. pColor is a number which will get the specific pixel where the mouse is in the xDirection and yDirection. Now we need to conver that to a hex value which is in uppercase. So we convert it to a string and toUpperCase. If the hex color is empty we need to add 0's to fill it up so we have a while loop set to do that so the length gets pushed to 6. Then we set the RGB values. We take the substring of the length 6 string into three parts and convert it to a Number. Lastly we print everything out and set the testo.text to the hex and the RGB values we returned.

That should complete the tutorial. Your final result when testing should look like this:




Complete Source Code and Download

Here is the complete source code and a download for the source files: 
import flash.display.*
var bmp:BitmapData = new BitmapData(this._width, this._height, false);
bmp.draw(this);

this.onMouseMove = function(){
    var pColor:Number = bmp.getPixel(_xmouse, _ymouse);
    var hexColor:String = pColor.toString(16).toUpperCase();
    while(hexColor.length < 6){
        hexColor = "0" + hexColor;
    }
    var r = Number("0x" + hexColor.substr(0,2));
    var g = Number("0x" + hexColor.substr(2,2));
    var b = Number("0x" + hexColor.substr(4,2));
    testo.text = "#" + hexColor + " (R:"+r+", G:"+g+", B:"+b+")";
}


Download the Source Files