![[AS3编程教学]Flash颜色选择器ColorPicker组件](/upload/jingyan/2025/0917/e25cd6f6.jpg)
本节继续学习Flash自带的组件，其实组件本身继承了非常多的属性和方法，而本教程壮士也是把一个组件最基本最常用的一部分呈现给大家，那些生僻的不常用的功能可以自己摸索或者单独请教。本节向大家展示颜色选择器ColorPicker的使用方法！学会这个东西，以后妈妈再也不担心你做一些颜色选择变颜色的项目了:)
本节我们所有的对象都用代码创建，不再舞台上绘制对象，一来比较干净，二来看着比较牛。当然首先按下Ctrl+F7,从组件库里拖一个颜色选择器ColorPicker到舞台上，然后删除，你会发现这时库里有这个组件，而舞台上没有：
我们在文档类里创建一个Sprite对象mcShpe，这个对象的作用就是在舞台上现实一个元件，我们每次单击选择了颜色后重绘改变它的颜色来观看我们修改了什么颜色：
/**创建颜色对象 */
private function createShape():void
{
mcShape = new Sprite();
mcShape.graphics.beginFill(0x000000);
mcShape.graphics.drawRect(0, 0, 100,100);
mcShape.graphics.endFill();
mcShape.x = 400;
mcShape.y = 100;
addChild(mcShape);
}
你会看到我们在舞台上绘制了一个黑块。
接下来我们创建一个颜色选择器并添加到舞台上：
/**创建颜色选择器 */
private function createColorPicker():void
{
mcColorSelect = new ColorPicker();
mcColorSelect.move(100, 100);
addChild(mcColorSelect);
}
按下Ctrl+Enter执行前面两个函数，会发现舞台上有了一个颜色选择器，一个黑块，而且颜色选择器可以单击切换颜色。
不过，看到这里你不要激动，因为虽然你可以选择颜色，但是你的颜色还无法改变右侧名叫mcShape的黑块颜色。所以我们面临的艰巨任务是改变黑块的颜色。为此我们需要坚挺颜色选择器的一个ColorPickerEvent事件，这个事件变化会附带一个新的颜色值，我们可以取到这个颜色值；取到这个颜色值后，需要重新绘制mcShape，用取到的颜色值绘成相应的颜色，所以我们修改createColorPicker（）方法如下：
private function createColorPicker():void
{
mcColorSelect = new ColorPicker();
mcColorSelect.move(100, 100);
addChild(mcColorSelect);
mcColorSelect.addEventListener(ColorPickerEvent.CHANGE,colorChangeHandler);
}
private function colorChangeHandler(e:ColorPickerEvent):void
{
updateColor(e.color);
}
这里e.color就是这个事件所携带的颜色切换值；同时我们新增了一个updateColor（）方法，这个方法如下，重绘黑块mcShape,使其变色：
/**改变颜色 */
private functionupdateColor(color:uint):void
{
mcShape.graphics.clear();
mcShape.graphics.beginFill(color);
mcShape.graphics.drawRect(0, 0, 100,100);
mcShape.graphics.endFill();
}
现在按下Ctrl+Enter测试，你会发现大功告成，可以选择并修改颜色了：
拓展1：自定义颜色选择器的颜色范围值。当这个颜色选择器ColorPicker被创建出来时，默认显示所有的颜色，如果你只需要显示某一部分颜色活某一个色系的颜色怎么办呢？办法就是修改颜色选择器对象的colors值，这个属性是一个数组，你传入多少个0x开头的16进制颜色值，最终的颜色选择器就有多少种颜色。我们举例来创建一个只有绿色系的颜色选择器如下：
/**创建绿色的颜色选择器 */
private functioncreateGreenColorPicker():void
{
greenColorSelect = new ColorPicker();
greenColorSelect.colors = [ 0x001100,
0x003300,
0x005500,
0x007700,
0x009900,
0x00BB00,
0x00DD00,
0x00FF00 ];
greenColorSelect.move(100, 200);
addChild(greenColorSelect); greenColorSelect.addEventListener(ColorPickerEvent.CHANGE,colorChangeHandler);
}
我们同样给它监听了颜色变化事件ColorPickerEvent，并调用同一个监听函数，这样可以看到黑块被重绘：
拓展2：鼠标经过时就打开颜色选择器。我们知道默认颜色选择器是你单击打开，然后选择了就关闭。我们这里再添加一个鼠标经过就展开的颜色选择器，我想这个会比较实用，方法就是给颜色选择器对象增加一个鼠标经过事件，在事件监听函数里调用颜色选择器的open方法即可。
privatevar overColorPicker:ColorPicker;
/** 创建鼠标经过时打开的颜色选择器 */
private functioncreateOverShowColorPicker():void
{
overColorPicker = new ColorPicker();
overColorPicker.move(100, 300);
addChild(overColorPicker);
overColorPicker.addEventListener(ColorPickerEvent.CHANGE,colorChangeHandler);
overColorPicker.addEventListener(MouseEvent.MOUSE_OVER,openColorPicker);
}
private functionopenColorPicker(e:MouseEvent):void
{
overColorPicker.open();
}
我们按下Ctrl+Enter方法测试就能看到第三个颜色选择器，实用很方便：
本教程的源代码可以到下面链接下载：
http://pan.baidu.com/s/1mg5Ga3Q
严格按照我的教材做就没问题。
