使用 ColorPicker 组件

ColorPicker 组件允许用户从样本列表中选择颜色。ColorPicker 的默认模式是在方形按钮中显示单一颜色。用户单击按钮时,样本面板中将出现可用的颜色列表,同时出现一个文本字段,显示当前所选颜色的十六进制值。

可以通过将 colors 属性设置为要显示的颜色值,来设置出现在 ColorPicker 中的颜色。

与 ColorPicker 组件进行用户交互

ColorPicker 允许用户选择颜色,并将该颜色应用于应用程序中的另一个对象。例如,如果要允许用户个性化应用程序的某些元素,如背景颜色或文本颜色,那么可以包括一个 ColorPicker,并应用用户所选择的颜色。

用户通过单击面板中的颜色样本或在文本字段中输入颜色的十六进制值来选择颜色。用户选择颜色之后,您可以使用 ColorPicker 的 selectedColor 属性,将该颜色应用于应用程序中的文本或其他对象。

如果用户将鼠标指针移到 ColorPicker 实例上或通过 Tab 切换到该实例,则该实例将获得焦点。当 ColorPicker 的样本面板打开时,可以使用以下按键来控制它:

说明

主页

将选区移到样本面板中的第一种颜色。

向上箭头

在样本面板中将选区向上移动一行。

向下箭头

在样本面板中将选区向下移动一行。

向右箭头

将选区从样本面板中的一种颜色移到该颜色的右侧。

向左箭头

将选区从样本面板中的一种颜色移到该颜色的左侧。

End

将选区移到样本面板中的最后一种颜色。

ColorPicker 组件参数

您可以在“属性”检查器或“组件”检查器中,为每个 ColorPicker 实例设置以下创作参数: selectedColor showTextField 。其中每个参数都有对应的同名 ActionScript 属性。有关这些参数的可能值的信息,请参阅 《用于 Adobe® Flash® Professional CS5 的 ActionScript® 3.0 参考》 中的 ColorPicker 类。

创建具有 ColorPicker 组件的应用程序

以下示例在创作时将 ColorPicker 组件添加到应用程序。在此示例中,每当您在 ColorPicker 中更改颜色时, changeHandler() 函数将调用 drawBox() 函数,用您在 ColorPicker 中所选择的颜色绘制一个新的框。

  1. 创建一个新的 Flash (ActionScript 3.0) 文档。

  2. 将一个 ColorPicker 组件从“组件”面板拖到舞台的中央,然后为其指定实例名 aCp

  3. 打开“动作”面板,在主时间轴中选择第 1 帧,然后输入以下 ActionScript 代码:

    import fl.events.ColorPickerEvent; 
     
    var aBox:MovieClip = new MovieClip(); 
    drawBox(aBox, 0xFF0000);    //draw a red box 
    addChild(aBox); 
     
    aCp.addEventListener(ColorPickerEvent.CHANGE,changeHandler); 
     
    function changeHandler(event:ColorPickerEvent):void { 
        drawBox(aBox, event.target.selectedColor); 
    } 
     
    function drawBox(box:MovieClip,color:uint):void { 
                box.graphics.beginFill(color, 1); 
                box.graphics.drawRect(100, 150, 100, 100); 
                box.graphics.endFill();         
    }
  4. 选择“控制”>“测试影片”。

  5. 单击 ColorPicker,并选择要用于框的颜色。

使用 ActionScript 创建 ColorPicker

下面的示例使用 ColorPicker() 构造函数和 addChild() 在舞台上创建一个 ColorPicker。该示例将 colors 属性设置为红色 (0xFF0000)、绿色 (0x00FF00) 和蓝色 (0x0000FF) 的颜色值,以指定 ColorPicker 将显示的颜色。还会创建一个 TextArea 组件,每当您在 ColorPicker 中选择一种不同的颜色时,该示例将更改 TextArea 中文本的颜色,以与之匹配。

  1. 创建一个新的 Flash (ActionScript 3.0) 文档。

  2. 将一个 ColorPicker 组件从“组件”面板拖到“库”面板中。

  3. 将一个 TextArea 组件从“组件”面板拖到“库”面板中。

  4. 打开“动作”面板,在主时间轴中选择第 1 帧,然后输入以下 ActionScript 代码:

    import fl.controls.ColorPicker; 
    import fl.controls.TextArea; 
    import fl.events.ColorPickerEvent; 
     
    var aCp:ColorPicker = new ColorPicker(); 
    var aTa:TextArea = new TextArea(); 
    var aTf:TextFormat = new TextFormat(); 
     
    aCp.move(100, 100); 
    aCp.colors = [0xff0000, 0x00ff00, 0x0000ff]; 
    aCp.addEventListener(ColorPickerEvent.CHANGE, changeHandler); 
     
    aTa.text = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus quis nisl vel tortor nonummy vulputate. Quisque sit amet eros sed purus euismod tempor. Morbi tempor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Curabitur diam. Suspendisse at purus in ipsum volutpat viverra. Nulla pellentesque libero id libero."; 
    aTa.setSize(200, 200); 
    aTa.move(200,100); 
     
    addChild(aCp); 
    addChild(aTa); 
     
    function changeHandler(event:ColorPickerEvent):void { 
        if(TextFormat(aTa.getStyle("textFormat"))){ 
            aTf = TextFormat(aTa.getStyle("textFormat")); 
        } 
        aTf.color = event.target.selectedColor; 
        aTa.setStyle("textFormat", aTf); 
    }
  5. 选择“控制”>“测试影片”。