Needed a little color picker for a project and wanted entirely scripted, so came up with this (the color picker class needs the Grid class, so I’ll put both here):
OBO_ColorPicker.as:
[AS]import com.onebyonedesign.utils.Grid;
import flash.filters.DropShadowFilter;
import flash.display.BitmapData;
import flash.geom.ColorTransform;
import flash.geom.Transform;
class com.onebyonedesign.utils.OBO_ColorPicker {
private var _displayWidth:Number;
private var _displayHeight:Number;
private var _currentColor:Number;
private var _displaySwatch:MovieClip;
private var _swatches:MovieClip;
private var __parent:MovieClip;
private var _swatchBmp:BitmapData;
private var _cxf:ColorTransform;
private var _xf:Transform;
public var onColorSelected:Function;
public var onColorHover:Function;
/**
- @author Devon O. Wolfgang
- @date 3/2/2007 5:46 PM
- @description Creates a “color picker” for user to choose a custom color from a palette of 216 web safe choices.
-
Broadcasts onColorHover() event when mouse is moved over swatch palette. -
Broadcasts onColorSelected() event when a color is selected. -
Requires class com.onebyonedesign.utils.Grid. - @param w Number: width of color display
- @param h Number: height of color display
- @param defaultColor Number: default color color picker
- @param parent MovieClip: the parent of the color picker (could be _root of .swf, but an empty MovieClip is recommended).
-
@usage import com.onebyonedesign.utils.OBO_ColorPicker;
var cp_mc:MovieClip = this.createEmptyMovieClip(“cp”, this.getNextHighestDepth());
cp_mc._x = 200;
cp_mc._y = 200;
var my_cp:OBO_ColorPicker = new OBO_ColorPicker(30, 30, 0x000000, cp_mc);
my_cp.onColorSelected = function(col:Number) {
trace(col);
};
*/
// Public
function OBO_ColorPicker(w:Number, h:Number, defaultColor:Number, parent:MovieClip) {
_displayWidth = w;
_displayHeight = h;
__parent = parent;
_currentColor = defaultColor;
init();
}
public function set enabled(bool:Boolean):Void {
_displaySwatch.enabled = bool;
}
public function get color():Number {
return _currentColor;
}
public function get colorString():String {
var col:String = _currentColor.toString(16);
var colArray:Array = col.split("");
var len:Number = colArray.length;
if (len < 6) {
for (var i = len; i < 6; i++) {
colArray.unshift(“0”);
}
}
return colArray.join("").toUpperCase();
}
// private
private function init():Void {
createDisplaySwatch();
createSwatches();
initDisplaySwatch();
}
private function createDisplaySwatch():Void {
_displaySwatch = createMovieClip(_displayWidth, _displayHeight, _currentColor, __parent);
_xf = new Transform(_displaySwatch);
_cxf = new ColorTransform();
}
private function createSwatches():Void {
_swatches = __parent.createEmptyMovieClip(“s”, __parent.getNextHighestDepth());
var swatchWidth:Number = 10;
var swatchHeight:Number = 6;
var colorArray:Array = makeColorArray();
var grid:Grid = new Grid(12, 18, swatchHeight, swatchWidth, 0, 0);
var len:Number = grid.length;
for (var i = 0; i < len; i++) {
var swatch:MovieClip = createMovieClip(swatchWidth, swatchHeight, colorArray*, _swatches);
swatch._x = grid*.x;
swatch._y = grid*.y;
}
initSwatches();
}
private function initDisplaySwatch():Void {
var cp:OBO_ColorPicker = this;
_displaySwatch.onRelease = function() {
cp.showSwatches();
this.enabled = false;
}
}
private function createMovieClip(w:Number, h:Number, c:Number, par:MovieClip):MovieClip {
var mc:MovieClip = par.createEmptyMovieClip(“s” + par.getNextHighestDepth(), par.getNextHighestDepth());
with (mc) {
beginFill©;
moveTo(0, 0);
lineTo(w, 0);
lineTo(w, h);
lineTo(0, h);
endFill();
}
return mc;
}
private function makeColorArray():Array {
var hArray:Array = new Array(“00”, “33”, “66”, “99”, “CC”, “FF”);
var cArray:Array = new Array();
var len:Number = hArray.length;
for (var r = 0; r < len; r++) {
for (var g = 0; g < len; g++) {
for (var b = 0; b < len; b++) {
cArray.push(Number(“0x” + hArray[r] + hArray[g] + hArray**));
}
}
}
return cArray;
}
private function initSwatches():Void {
var cp:OBO_ColorPicker = this;
_swatchBmp = new BitmapData(_swatches._width, _swatches._height);
_swatchBmp.draw(_swatches);
_swatches.filters = [new DropShadowFilter(4, 90, 0x000000, .6, 5, 5, 1, 3)];
_swatches.useHandCursor = false;
_swatches.onRollOver = function(){
this.onMouseMove = function() {
cp._cxf.rgb = cp._swatchBmp.getPixel(this._xmouse, this._ymouse);
cp._xf.colorTransform = cp._cxf;
cp.onColorHover(cp._cxf.rgb);
}
}
_swatches.onRollOut = _swatches.onDragOut = function() {
delete this.onMouseMove;
}
_swatches.onRelease = function() {
cp._currentColor = cp._swatchBmp.getPixel(this._xmouse, this._ymouse);
this._visible = false;
cp.onColorSelected(cp._currentColor);
cp._displaySwatch.enabled = true;
}
_swatches._visible = false;
}
private function showSwatches() {
// position swatches
_swatches._x = _displayWidth + 5;
_swatches._y = -(_swatches._height) + _displayHeight;
var pt:Object = {x:_swatches._x, y:_swatches._y};
__parent.localToGlobal(pt);
if (pt.y < 0) _swatches._y = 0;
if (pt.x + _swatches._width > Stage.width) _swatches._x = -(_swatches._width) - 5;
_swatches._visible = true;
}
}[/AS]
Grid.as
[AS] /**
-
Grid class
-
@author: Devon O.
-
@date: 15JAN06
/
class com.onebyonedesign.utils.Grid extends Array {
private var _cols:Number;
private var _rows:Number;
/*- Grid returns an array of objects with x and y coordinates (properties) based on the number of columns,
- rows, height and width of cells, and the x and y value of the upper left corner.
- @usage myGrid=new Grid (columns, rows, cellHeight, cellWidth, topLeftCornerX, topLeftCornerY)
- @param cols: The number of columns
- @param rows: The number of rows
- @param cellHeight: The height of the grid cell
- @param cellWidth: The width of the grid cell
- @param x: The x position of the top left corner of the grid
- @param y: The y position of the top left corner of the grid
-
@return Grid (an array of objects each containing two properties: x and y)
*/
public function Grid (cols : Number, rows : Number, cellHeight : Number, cellWidth : Number, x : Number, y : Number) {
_cols = cols;
_rows = rows;
var numCells : Number = cols * rows;
var curx : Number = x;
for (var i = 0; i < numCells; i ++)
{
this * = new Object ({x : curx, y : y});
curx += cellWidth;
if ( ! ((i + 1) % cols))
{
curx = x;
y += cellHeight;
}
}
}
//
/**- The shuffle method will return the array of grid coordinates in a random order.
- @usage myGrid.shuffle()
-
@return Void
*/
public function shuffle () : Void {
var len : Number = this.length;
var temp : Object = new Object ();
for (var i = 0; i < len; i ++)
{
var rand : Number = Math.floor (Math.random () * len);
temp = this *;
this * = this [rand];
this [rand] = temp;
}
}
// Getters
public function get columns():Number {
return _cols;
}
public function get rows():Number {
return _rows;
}
}[/AS]
A quickie example: http://www.onebyonedesign.com/flash/colorPicker
