Posts Tagged BitmapData

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.

, ,

5 Comments


Converting a RGB color and Alpha to ARGB in ActionScript 3

So I was using the color picker component that comes with the Flash IDE. When the user selects a color, the color picker fire a ColorPickerEvent.CHANGE event and from that event you can access the new color that was chosen. The format of this color is a uint; when working with colors I am more used to the hexadecimal format.  From the event you can also access to the hexadecimal value, but as a String which is not that useful if you want to do operation on the color.

The color you get from the color picker component is in the RGB format, so no transparency. If you want to add an alpha channel to that color (converting it to ARGB), let’s say to use the setPixel32 method of the BitmapData class  and produce Bitmap with transparency, you’re going to have to modify the uint you can do so using this simple function (AS3):

1
2
3
4
5
6
7
private function returnARGB(rgb:uint, newAlpha:uint):uint{
  //newAlpha has to be in the 0 to 255 range
  var argb:uint = 0;
  argb += (newAlpha<<24);
  argb += (rgb);
  return argb;
}

What this function does is that it bit shift the value of the Alpha you input and adds it to the original RGB color making it ARGB. You see, RGB format uses 8 bits for each color for each pixel (so 24 bits for each pixel), when you add transparency, the alpha channel takes up another 8 bits for each pixels (making it 32 bits for each pixel thus the 32 in setPixel32). That also explains why newAlpha has to be from 0 to 255, because 255 is the highest number you can store in 8 bits. The Blue color takes the bits from 1 to 8, the Green color takes the bits from 9 to 16, Red from 17 to 24 and finally Alpha from 25 to 32. This is why we bit shift alpha from 24 bits (newAlpha<<24);

I don’t use the color picker component often, but there seem to be missing the end of the sentence here.

, , , , , , ,

8 Comments