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+")";
}
|
|
Comments
|
