Flash CS3 新增组件——ColorPicker

Adobe Flash CS3 Professional组件比较少,增加了ColorPicker组件、TileList、Silder等组件。本教程将介绍ColorPicker组件。

早在Flash MX时代,ColorPicker组件就开始出现在FUI Components Set 4中。而现在,它已经在Adobe Flash CS3 Professional中自带了。该组件与DataField组件的功能有些类似,它会显示一个或多个色样列表供用户选择。默认情况下,该组件在方块按钮上显示单个的色样。当用户单击该按钮时,将弹出一个面板显示整个色样列表。

selectedColor是ColorPicker组件最重要的属性,该属性用来获取和设置ColorPicker组件色盘中当前选择(高亮显示)的色样,默认值为0x000000。

下面以一个简单实例来讲一讲ColorPicker的用法。

  • 选择Flash Flie(ActionScript 3.0),新建ColorPicker.fla 文档,拖曳一个?ColorPicker实例到舞台中,命名为cp。
  • 新增一个脚本层,添加以下代码:
//定义一个Shape对象 
var circle:Shape = new Shape(); 
circle.x = 80; 
circle.y = 80; 
//自定义函数初始化Shape实例并将其添加到舞台 
addChild(circle); 
//注册侦听器 
cp.addEventListener(Event.ENTER_FRAME, colorChange); 
//自定义侦听器函数 
function colorChange(e:Event):void { 
    var cp:ColorPicker = e.target as ColorPicker; 
    drawCircle(circle, cp.selectedColor); 
} 
//自定义drawCircle函数 
function drawCircle(circle:Shape, newColor:uint):void { 
    //清除graphics 
    circle.graphics.clear(); 
    //开始填充 
    circle.graphics.beginFill(newColor, 1); 
    //画圆 
    circle.graphics.drawCircle(0, 0, 50); 
    //结束填充 
    circle.graphics.endFill(); 
}

上述实例中,为方便对比,一方面我们用ActionScrip动态创建了Shape实例,另一方面又使用拖动库元件来实例化对象。下面我们加大一些难度,全部动态创建实例,并且将代码从时间线移出来,将它封装成自定义类。具体步骤如下:

  • 新建ColorPickerDemo.AS文档,添加如下代码,然后将其保存到com\riafan\tutorials目录下。
package com.riafan.tutorials { 
    import fl.controls.ColorPicker; 
    import fl.controls.ComboBox; 
    import flash.display.BlendMode; 
    import flash.display.Shape; 
    import flash.display.Sprite; 
    import flash.events.*; 
    public class ColorPickerDemo extends Sprite { 
        //定义一个Shape对象 
        var circle:Shape = new Shape(); 
        //定义一个ColorPicker对象 
        var cp:ColorPicker = new ColorPicker(); 
        public function ColorPickerDemo():void { 
            initCircle(); 
            initColorPicker(); 
            //添加事件监听器 
            cp.addEventListener(Event.ENTER_FRAME, colorChange); 
        } 
        //自定义侦听器方法 
        private function colorChange(e:Event):void { 
            var cp = e.target as ColorPicker; 
            drawCircle(circle, cp.selectedColor); 
        } 
        //自定义方法初始化Shape实例并将其添加到舞台 
        private function initCircle():void { 
            circle.x = 80; 
            circle.y = 80; 
            //动态将Shape的实例添加到舞台 
            addChild(circle); 
        } 
        //自定义方法初始化ColorPicker实例并将ColorPicker的实例添加到舞台 
        private function initColorPicker():void { 
            cp.x = 150; 
            cp.y = 60; 
            addChild(cp); 
        } 
        //自定义drawCircle方法 
        private function drawCircle(circle:Shape, newColor:uint):void { 
            //清除graphics 
            circle.graphics.clear(); 
            //开始填充 
            circle.graphics.beginFill(newColor, 1); 
            //画圆 
            circle.graphics.drawCircle(0, 0, 50); 
            //结束填充 
            circle.graphics.endFill(); 
        } 
    } 
}
  • 选择Flash Flie(ActionScript 3.0),新建ColorPickerDemo.fla 文档。
  • 拖曳ColorPicker组件到库中, 在属性面板中的文档类文本框中键入全限定类名称:com.riafan.tutorials.ColorPickerDemo。
  • 测试预览电影,效果和前面的一样。

注意:

  • Flash CS3 中的组件类都放到fl.controls包中,以前是mx.controls包。
  • 如果不是用在自定义类中,可以不用导入内置类。

发表评论