ColorPicker Component

ColorPicker Component

Flash CS4 ActionScript 3.0 Tutorial

 

How to Add Pre-Built ColorPicker Component to Your Flash File

 

 

Flash ships with several Components. Components are pre-packaged objects that allow you to quickly add elements, such as scroll bars, text boxes and buttons.

Components can be added to the stage using the drag and drop method from the Components panel or added with ActionScript. The Component parameters are altered with the Component Inspector or ActionScript.

This example shows how to add a ColorPicker Component using the drag and drop method and with ActionScript. It also describes changing the Component parameters with the Component Inspector and ActionScript. To talk to a Component with ActionScript, it must first be added to the Library.

Components are actually Movie Symbol objects regardless of the Component. If you are developing in ActionScript 2.0, you will see a different set of Components available.

For more information on the other Components, see topics, Button Component, CheckBox Component, ComboBox Component, DataGrid Component, Label Component, List Component, NumericStepper Component, ProgressBar Component, RadioButton Component, ScrollPane Component, Slider Component, TextArea Component, TextInput Component, TileList Component, UILoader Component and UIScrollBar Component.

Tutorial Elements

ColorPicker Component with instance name colorPicker01_mc

 

Step One

Open a new Flash document and add a new layer.

Step Two

Name the upper layer Actions and the lower one Content.

Step Three

Select the first frame of the Content layer and open the Components panel (Window > Components).

Step Four

Double-click the ColorPicker Component icon to a add a ColorPicker to the center of the stage. The CheckBox and it's assets are also added to the Library.

Step Five

With the ColorPicker selected open the Properties panel and change it's x and y settings to 100 and 100.

Step Six

With the CheckBox still selected, open the Component Inspector (Window > Component Inspector).

Step Seven

Click the selectedColor value and change it to #CCCCCC.

Step Eight

With the ColorPicker still selected, open the Properties panel and assign it an instance name of colorPicker01_mc.

Step Nine

Using the Rectangle tool, draw a rectangle below the color swatch.

Step Ten

Select the rectangle and press F8 to convert it to a Movie Symbol.

Step Eleven

With the rectangle selected, open the Properties panel and assign it an instance name of box01_mc.

Step Twelve

Option-drag (PC - Alt-drag) the Movie Symbol to the right to create a duplicate.

Step Thirteen

With the new rectangle selected, open the Properties panel and assign it an instance name of box02_mc.

Step Fourteen

Open the ActionScript panel for the only keyframe in the Actions layer by Option double-clicking (PC - Alt double-clicking) the keyframe.

Step Fifteen

Copy/Paste the following code in the ActionScript Panel:

import fl.controls.ColorPicker;

import fl.events.ColorPickerEvent;

var newColor01:ColorTransform = new ColorTransform();

var newColor02:ColorTransform = new ColorTransform();

var colorPicker02_mc:ColorPicker=new ColorPicker();

colorPicker02_mc.selectedColor=0xCCCCCC;

colorPicker02_mc.x=300;

colorPicker02_mc.y=100;

addChild(colorPicker02_mc);

colorPicker01_mc.addEventListener(ColorPickerEvent.CHANGE, onChange01);

function onChange01(e:ColorPickerEvent):void {

newColor01.color=e.target.selectedColor;

box01_mc.transform.colorTransform=newColor01;

}

colorPicker02_mc.addEventListener(ColorPickerEvent.CHANGE, onClick02);

function onClick02(e:ColorPickerEvent):void {

newColor02.color=e.target.selectedColor;

box02_mc.transform.colorTransform=newColor02;

}

Step Sixteen

Click the Auto Format button to format the code

Step Seventeen

Test your movie by pressing Cmd/Return (PC - Ctrl/Enter). The two color pickers and rectangular objects appear on the stage. Whenever a picker is selected, a palette appears for you to select a color. The selected color is assigned to the corresponding rectangle.

Dissecting the Code

The first two lines of the code at Step Ten import the code necessary to talk to the ColorPicker class. Lines three and four establish a new ColorTransform variables named newColor01 and newColor02. These variables allow us to change the color of the rectangular objects.

Line five establishes a new ColorPicker variable named colorPicker02_mc. Remember that the first color picker was added to the stage by dragging it from the Components panel. This one is introduced with ActionScript.

Lines six through nine set the picker's starting color, stage position and add it to the stage.

Line ten adds an event listener to colorPicker01_mc. Whenever a color is selected, the function onChange01 is run. This is where the selected color is assigned to the rectangular Movie Symbol.

The final block of code repeats the process for the second picker.

More Component Options

In this example we showed how to change the ColorPicker selectedColor. You can use this same method to change the other ColorPicker values shown in the Component Inspector (i.e., enabled, showTextField and visible). You can also alter the size by changing the width or height properties (i.e., colorPicker01_mc.width=200;).