Jozef Chúťka's blog

For my next project, I needed some lightweight color picker that would be usable but not boring. Nice challenge. So I have created ColorCircle class that may work as a color picker while it dispatches all the necessary ColorCircleEvent-s. I made this class a little dynamic, so you can create custom color pickers on runtime using RGB palette, Black to White fade, solid color or current color with any defined radius (inner + outer) you want.

To create donut shapes I have used shape with lineStyle+drawCircle+cacheAsBitmap drawed over original graphics using BlendMode.ALPHA. To browse RGB pelette there is a paletteColor() method that crawls all color spectrum based on position (0 to 1).

Donut drawing:

var donut:Shape = new Shape();
donut.graphics.lineStyle(outerRadius - innerRadius, 0, 1);
donut.graphics.drawCircle(outerRadius, outerRadius, 
	(outerRadius + innerRadius) / 2);
donut.cacheAsBitmap = true;
bitmapData.draw(donut, null, null, BlendMode.ALPHA);

RGB palette by position (0..1) with light/shadow:

public static function paletteColor(position:Number, light:Number=0, dark:Number=0):uint
{
	var r:Number = Math.abs(.5 - position) * 6 - 1;
	r = r > 1 ? 1 : r < 0 ? 0 : r;
	r = (r + (1 - r) * light) * (1 - dark);
	
	var g:Number = (1 - Math.abs(1/3 - position)) * 6 - 4;
	g = g > 1 ? 1 : g < 0 ? 0 : g;
	g = (g + (1 - g) * light) * (1 - dark);
	
	var b:Number = (1 - Math.abs(2/3 - position)) * 6 - 4;
	b = b > 1 ? 1 : b < 0 ? 0 : b;
	b = (b + (1 - b) * light) * (1 - dark);
	
	return (r * 0xff) << 16 | (g * 0xff) << 8 | (b * 0xff);
}

Another RGB palette calculation (by radians):

var r:Number = (Math.sin(rad) + 1) / 2;
var g:Number = (Math.sin(rad + Math.PI / 2) + 1) / 2;
var b:Number = (Math.sin(rad + Math.PI) + 1) / 2;