Creating an application with the ColorPicker

The following example adds a ColorPicker component to an application while authoring. In this example, each time you change the color in the ColorPicker, the changeHandler() function calls the drawBox() function to draw a new box with the color you selected in the ColorPicker.

To create an application with the ColorPicker component:

Create a new Flash file (ActionScript 3.0) document.
Drag a ColorPicker from the Components panel to the center of the Stage and give it an instance name of aCp.

Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:

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();        
}

Select Control > Test Movie.
Click the ColorPicker and select a color to color the box.

The following example uses the ColorPicker() constructor and addChild() to create a ColorPicker on the Stage. It sets the colors property to the color values for red (0xFF0000), green (0x00FF00), and blue (0x0000FF) to specify the colors that the ColorPicker will display. It also creates a TextArea and each time you select a different color in the ColorPicker, the example changes the color of the text in the TextArea to match.

To create a ColorPicker using ActionScript:

Create a new Flash file (ActionScript 3.0) document.
Drag the ColorPicker component from the Components panel to the Library panel.
Drag the TextArea component from the Components panel to the Library panel.

Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:

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);
}

Select Control > Test Movie.