Learn Actionscirpt Techniques - ColorPicker Gradient

The ColorPicker component displays a list of one or more swatches from which the user can select a color.

By default, the component displays a single swatch of color on a square button. When the user clicks this button, a panel opens to display the complete list of swatches.

// Here is the Source Code

var startHex;
var endHex;
var spacing:int = 25;
var noOfBoxes:int = 13;

function fadeHex(ratio) {
var r = startHex >> 16;
var g = startHex >> 8 & 0xFF;
var b = startHex & 0xFF;
r += ((endHex >> 16 & 0xFF)-r)*ratio;
g += ((endHex >> 8 & 0xFF)-g)*ratio;
b += ((endHex & 0xFF)-b)*ratio;
return (r << 16 | g << 8 | b);
}
function drawSquare(x, y, color) {
graphics.beginFill(color);
graphics.moveTo(x,y);
graphics.lineTo(x+50,y);
graphics.lineTo(x+50,y+50);
graphics.lineTo(x,y+50);
graphics.lineTo(x,y);
}
function colorChange(e:Event) {
var cp:ColorPicker = e.target as ColorPicker;
if (cp==cp1) {
startHex = "0x"+e.target.hexValue ;
} else {
endHex = "0x"+e.target.hexValue;
}
for (var i = 0; i
var ratio = i/noOfBoxes;
var xx = spacing+(i*50);
var yy = 70;
var nowColor = fadeHex(ratio);
drawSquare(xx,yy,nowColor);
}
}
cp1.selectedColor = 0x990000;
cp2.selectedColor = 0x000000;
cp1.addEventListener(Event.CHANGE, colorChange);
cp2.addEventListener(Event.CHANGE, colorChange);
cp1.addEventListener(Event.RENDER, colorChange);
cp2.addEventListener(Event.RENDER, colorChange);