Actionscript color picker - actionscript-3

Question

I am trying to create a Colorpicker control for my application. I prefer pure actionscript. Does someone know how to create a picker like this: http://parasolarchives.com/tools/colorpicker/
Most interestingly I am interested how to draw the gradient because the gradient has a saturation,

Answer 1

this is a picker i use myself, hope it'll be useful:
package lazylib.ui.generated
{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.display.GradientType;
import flash.events.MouseEvent;
import flash.geom.ColorTransform;
import flash.geom.Matrix;
import lazylib.broadcast.evts.ColorEvent;
import lazylib.broadcast.Radio;
/**
* ...
* #author www0z0k
*/
public class Picker extends Sprite
{
private var bmpc: Bitmap;
private var bmp:BitmapData;
private var id:String;
private var w:int;
private var h:int;
public static const COLOR_PICKED_EVT_TYPE: String = 'picked by picker';
public function Picker(_id:String, _w:int = 256, _h:int = 256, _x:int = 0, _y:int = 0)
{
id = _id;
w = _w;
h = _h;
x = _x;
y = _y;
bmp = new BitmapData(w, h);
bmpc = new Bitmap(bmp);
addChild(bmpc);
refillBmp(0x7f7f7f);
}
public function get ID():String { return id; }
private function refillBmp(overColor:int = 0x7f7f7f, alphaStep:Number = 0.006):void {
var rtspr:Sprite = new Sprite();
var spr:Sprite = new Sprite();
var colors:Array = new Array(0xff0000,0xff7f00,0xffff00,0x7fff00,0x00ff00, 0x00ff7f, 0x00ffff,0x007fff,0x0000ff, 0x7f00ff,0xff00ff, 0xff007f, 0xff0000);
var alphas: Array = new Array(1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1);
var ratios: Array = new Array(10, 30, 50, 70, 90, 110, 130, 150, 170, 190, 210, 230, 250);
var matrix:Matrix = new Matrix();
matrix.createGradientBox(w, h);
spr.graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, matrix);
spr.graphics.drawRect(0, 0, w, h);
spr.graphics.endFill();
rtspr.addChild(spr);
var spr2:Sprite = new Sprite();
rtspr.addChild(spr2);
var startA: Number = 1;
for (var i:int = 0; startA > 0; i++) {
startA -= alphaStep;//orig 0.004!!!
spr2.graphics.lineStyle(1, overColor, startA);
spr2.graphics.moveTo(0, h - i);
spr2.graphics.lineTo(w, h - i);
}
bmp.draw(rtspr, new Matrix());
graphics.beginFill(0, 0);
graphics.drawRect(0, 0, w, h);
graphics.endFill();
buttonMode = true;
addEventListener(MouseEvent.CLICK, onClick);
}
public function adjustDarkness(percent:int):void {
var colorValue: int = int(255 * percent / 100);
var currentGray:int = colorValue + colorValue << 8 + colorValue << 16;
refillBmp(colorValue);
}
private function onClick(e:MouseEvent):void {
var col: int = bmp.getPixel(e.localX, e.localY);
Radio.broadcast(new ColorEvent(COLOR_PICKED_EVT_TYPE + id, col));
dispatchEvent(new ColorEvent(COLOR_PICKED_EVT_TYPE + id, col));
}
}
}
Radio is a global dispatcher class (posted here if you need it), ColorEvent is just an event with an int color field, adjustDarkness is usually called from an external scrollbar. Let me know if a working example is needed.

Answer 2

I'm not sure this would be too accurate, but I think I can give you a few ideas:
You could grab that same squared image you are showing (or photoshop's for that matter) and change it's hue to get the whole color range.
If you want to draw it, mathematically I don't think it's too hard to do... for the cyan, for instance, the Y axis should control the maximum amount of color in all channels, and the X axis should control the proportion of red in the mix.