Hi, I recently started working on a photoshop-like hue-based color picker in Actionscript 3. Here's a link to the current state of the color-picker : http://dl.dropbox.com/u/4597114/color-picker.swf
Basically, I draw the colorBox (the box on the left) using a nested loop in order draw it pixel by pixel. I did so because I didn't find a way to properly draw it using beginGradientFill() instead of beginFill(). Its not really the main problem here, but if someone knows a proper way to draw it using the beginGradientFill() I would really appreciate it. Here's the code I use to draw it :
private function drawColorBox ():void {
_colorBox = new Shape();
var vSteps = 100 / _height; // brightness multiplyer for each pixel
var hSteps = 100 / _width; // saturation multiplyer for each pixel
// the HSB class is used to store a color's information
// HSB(hue, saturation, brightness) between 0 and 360 for hue, between 0 and 100 for saturation/brightness
var hsb:HSB = new HSB(0, 100, 100); // start color (pure red)
for (var i:uint = _height; i > 0; i--) {
// Change this row's brightness
hsb.brightnessValue = (_height - i) * hSteps;
// draw a rectangle for each pixel, forming the row
for (var c:uint = 0; c < _width; c++) {
// Change this pixel's saturation
hsb.saturationValue = c * vSteps;
// Draw the pixel
_colorBox.graphics.beginFill(hsb.hexCode); // the hexCode property returns the color in the hexademical form
_colorBox.graphics.drawRect(c, i, 1, 1);
_colorBox.graphics.endFill();
}
}
this.addChildAt(_colorBox, 0);
}
Now to the real problem : using the ColorMatrixFilter in order to modify the hue of the box. I've already succeeded in doing so, but the problem I have is that the colors seem to blend so that they do not result in the color they're supposed to (the color selected on the hue bar to the right). This problem is pretty visible in the demo I posted.
Finally, here's the code I use to modify the color of the box on the left :
internal function modifyCurrentColor (pHueValue:uint):void {
// Converts hue from degrees to radians
var convertedHue:Number = pHueValue*(Math.PI/180);
var c:Number = Math.cos(convertedHue); // cosinus of hue
var s:Number = Math.sin(convertedHue); // sinus of hue
// Conversion constants for RGB -> Luminance conversion
var f1:Number = 0.213; // Red
var f2:Number = 0.715; // Green
var f3:Number = 0.072; // Blue
// Define and array containing the new color information
var cm:Array = new Array( (f1 + (c * (1 - f1))) + (s * (-f1)), (f2 + (c * (-f2))) + (s * (-f2)), (f3 + (c * (-f3))) + (s * (1 - f3)), 0, 0, // Red
(f1 + (c * (-f1))) + (s * 0.143), (f2 + (c * (1 - f2))) + (s * 0.14), (f3 + (c * (-f3))) + (s * -0.283), 0, 0, // Green
(f1 + (c * (-f1))) + (s * (-(1 - f1))), (f2 + (c * (-f2))) + (s * f2), (f3 + (c * (1 - f3))) + (s * f3), 0, 0, // Blue
0, 0, 0, 1, 0); // 100% alpha
// Applies the filter to the box and overwrites any existing filter
_colorBox.filters = new Array(new ColorMatrixFilter(cm));
}
I would appreciated any suggestions that would get me closer to make color picker functional.