# Color Picker class

**URL:** <https://forum.kirupa.com/t/color-picker-class/217873>\
**Category:** open source\
**Created:** [March 2, 2007, 4:18pm UTC](https://forum.kirupa.com/t/color-picker-class/217873 "2007-03-02T16:18:04Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![devonair](https://avatars.discourse-cdn.com/v4/letter/d/3be4f8/32.png) [@devonair](https://forum.kirupa.com/u/devonair)\
**Post date:** [March 2, 2007, 4:18pm UTC](https://forum.kirupa.com/t/color-picker-class/217873/1 "2007-03-02T16:18:04Z")

</div>

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;  
/_\*

// 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](http://www.onebyonedesign.com/flash/colorPicker)