Well though absence of a free AS3.0 colour picker componet I decided to make my own. Its not mathematicaly perfect but it gets the job done.
package {
import flash.display.Sprite;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.GradientType;
import flash.events.MouseEvent;
import flash.geom.Matrix;
import flash.display.SpreadMethod;
import flash.display.BlendMode
import flash.geom.Point
import flash.geom.Rectangle
import flash.text.TextField;
import fl.motion.Color
public class ColourPicker extends Sprite {
private var bmp:Bitmap = new Bitmap();
private var img:Sprite = new Sprite();
private var img2:Sprite = new Sprite();
private var colourDisplay:Sprite = new Sprite();
private var colourHex:uint = 0xFFFFFF
private var mouseDown:Boolean = false;
private var txtHex:TextField = new TextField()
private var bmpBrightness:Bitmap = new Bitmap();
private var colourBoard:Sprite = new Sprite();
private var brightnessContainer:Sprite = new Sprite();
private var arrow:Sprite = new Sprite();
private var colourBreaker:Color = new Color(); // Quick and easy breakdown of colour hex
public function ColourPicker() {
// Gradient of colour spectrum
var fillType:String=GradientType.LINEAR;
var colors:Array=[0xFF0000,0xFFFF00,0x00FF00,0x00FFFF,0x0000FF,0xFF00FF,0xFF0000];
var alphas:Array=[1,1,1,1,1,1,1];
var ratios:Array=[0,43,85,128,171,213,255];
var matr:Matrix = new Matrix();
matr.createGradientBox(100, 100, 0, 0, 0);
var spreadMethod:String = SpreadMethod.PAD;
img.graphics.beginGradientFill(fillType, colors, alphas, ratios, matr, spreadMethod);
img.graphics.drawRect(0,0,100,100);
img.graphics.endFill()
// brightness gradient for main display
matr.rotate(Math.PI/2)
img2.graphics.beginGradientFill(fillType, [0xFFFFFF, 0xFFFFFF, 0x0, 0x0],[1, 0, 0,1],[0, 127,129,255], matr);
img2.graphics.drawRect(0,0,100,100);
img2.graphics.endFill()
// Draw gradients to bitmap
bmp.bitmapData = new BitmapData(100,100, true, 0xFF000000);
bmp.bitmapData.draw(img,null,null,BlendMode.NORMAL)
bmp.bitmapData.draw(img2,null,null, BlendMode.NORMAL)
colourDisplay.graphics.lineStyle(1);
colourDisplay.graphics.drawRect(0,0,20,20);
colourDisplay.y = bmp.height + 5;
txtHex.border = true;
txtHex.x = colourDisplay.x + colourDisplay.width + 5
txtHex.y = colourDisplay.y
txtHex.width = bmp.width - (colourDisplay.width + 5);
txtHex.height = 20
// Brightness on selected colour
img2.graphics.beginGradientFill(fillType, [0xFFFFFF, 0xFFFFFF, 0x0, 0x0], [1, 0, 0, 1], [0, 127, 129, 255], matr)
bmpBrightness.bitmapData = new BitmapData(10, 100)
bmpBrightness.bitmapData.fillRect(new Rectangle(0, 0, 10, 100), 0xFFFFFFFF);
bmpBrightness.bitmapData.draw(img2)
bmpBrightness.x = bmp.width + 5
arrow.graphics.lineStyle(1);
arrow.graphics.beginFill(0)
arrow.graphics.lineTo(4, -2)
arrow.graphics.lineTo(4, 2)
arrow.graphics.lineTo(0, 0)
arrow.x = bmpBrightness.x + bmpBrightness.width + 1
arrow.y = bmpBrightness.height / 2
colourBoard.addChild(bmp);
brightnessContainer.addChild(bmpBrightness)
addChild(colourDisplay)
addChild(colourBoard)
addChild(txtHex)
addChild(brightnessContainer)
addChild(arrow)
colourBoard.addEventListener(MouseEvent.MOUSE_MOVE, colourBoardOnClick);
addEventListener(MouseEvent.MOUSE_DOWN, colourBoardOnMouseDown)
addEventListener(MouseEvent.MOUSE_UP, colourBoardOnMouseUp)
brightnessContainer.addEventListener(MouseEvent.MOUSE_MOVE, brightnessBoardMouseMove)
}
private function colourBoardOnClick(e:MouseEvent):void {
if (mouseDown) {
colourHex = bmp.bitmapData.getPixel(bmp.mouseX, bmp.mouseY);
txtHex.text = colourHex.toString(16);
bmpBrightness.bitmapData = new BitmapData(10, 100, false, colourHex)
bmpBrightness.bitmapData.draw(img2)
colourDisplay.graphics.clear()
colourDisplay.graphics.lineStyle(1);
colourDisplay.graphics.beginFill(colourHex)
colourDisplay.graphics.drawRect(0, 0, 20, 20);
colourDisplay.graphics.endFill()
arrow.y = brightnessContainer.height / 2;
}
}
private function brightnessBoardMouseMove(e:MouseEvent) {
if (mouseDown) {
colourHex = bmpBrightness.bitmapData.getPixel(bmpBrightness.mouseX, bmpBrightness.mouseY);
txtHex.text = colourHex.toString(16);
colourDisplay.graphics.clear()
colourDisplay.graphics.lineStyle(1);
colourDisplay.graphics.beginFill(colourHex)
colourDisplay.graphics.drawRect(0, 0, 20, 20);
colourDisplay.graphics.endFill()
arrow.y = mouseY
}
}
private function colourBoardOnMouseDown(e:MouseEvent):void {
mouseDown = true;
}
private function colourBoardOnMouseUp(e:MouseEvent):void {
mouseDown = false
}
public function get colour():uint {
return colourHex
}
public function get red():int {
colourBreaker.color = colourHex
return colourBreaker.redOffset
}
public function get green():int {
colourBreaker.color = colourHex
return colourBreaker.greenOffset
}
public function get blue():int {
colourBreaker.color = colourHex
return colourBreaker.blueOffset
}
}
}
I used getters insead of a function because I prefer to use them as a variable (it makes my code look better :P). Though I haven't added any setters to you actualy modify them. This colour picker is also scalable but I haven't added that in yet, just change the size of bmp's bitmapData and the size of the gradient fills.
Have fun people. [LINK]