Create your own ColorPicker using a Bitmap

A while ago I did an application that required a colorpicker, I didn’t know much at the time so I chose to use the ColorPicker component that came with Flash CS3. That component is ok but it kinda is limited. After a little while I wanted more than what it was providing me.  I wanted to imitate a bit the colorpicker that you can find in Photoshop. It turns out that it is pretty easy to do so. All you need is a picture of a color gamut and you are all set.

ColorPicker component in Flash CS3

What we are going to do in short is transform this image of a color spectrum (bitmap) into a Sprite and when the mouse is over that Sprite, get the color that is right under the mouse. For the image of the color spectrum i’ll use a picture I found on wikipedia and just resize it a bit. All you need is a picture with enough color on it, you could also use a picture of your dog if you wanted but the goal is more a picture with some organisation in the color.

Here is the picture I used:

Color Spectrum for a ColorPicker

Now all you need to do is add a little bit of code to it and you have the basis of a color picker. The method that will do most of the work for us is a method from BitmapData called getPixel. You basically tell that method which pixel in the Bitmap, by providing it’s x and y coordinates, and getPixel will return you the color of that pixel. Now, this method returns the color as a unsigned integer that is not so legible, so we will have to convert that to an hexadecimal base so that we can relate to it.

But to be able to use this method (getPixel) we will need a BitmapData of the spectrum. In Flash, you can turn most MoviClip into BitmapData by using the method draw. I’ll do it in the following code snippet.

Here we go:

//Add the mouse funcitonality to the color picker
myColorPicker.addEventListener(MouseEvent.ROLL_OVER, onRollOver, false, 0, true);
myColorPicker.addEventListener(MouseEvent.ROLL_OUT, onRollOut, false, 0, true);
 
var myBitmapData:BitmapData = new BitmapData(myColorPicker.width, myColorPicker.height);
myBitmapData.draw(myColorPicker);
 
function onRollOver(event:MouseEvent):void{
	myColorPicker.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove, false, 0, true);
}
function onRollOut(event:MouseEvent):void{
	myColorPicker.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
}
 
function onMouseMove(event:MouseEvent):void{
	var myColor:uint = myBitmapData.getPixel(myColorPicker.mouseX, myColorPicker.mouseY);
	trace (myColor.toString(16)); //The toString(16) convert the uint into a legible hexadecimal representation ike in Photoshop
}
Now you have it, this is just the basis, but with that you can build a full fledged color picker.

, ,

  1. #1 by Ian Ford - April 28th, 2010 at 12:51

    What a clever idea!

  2. #2 by spidey - May 8th, 2010 at 13:58

    nice work!!!

  3. #3 by Liz - May 12th, 2010 at 13:15

    THANK YOU FOR THIS!! Such a clever & simple solution but I just couldn’t figure it out myself!

  4. #4 by Joe - January 12th, 2011 at 19:20

    Thanks this sample!
    Look color picker of my application!

    Cheers.

  5. #5 by a - March 20th, 2011 at 11:27

    Thank you!!

(will not be published)
Subscribe to comments feed
  1. No trackbacks yet.