Monday, September 27, 2010

Using the ColorPicker component: Part 2

Today we will learn more about the ColorPicker component.

Let's find our what all the properties mean.

The property selectedColor is used to retrieve the selected color, or select a color manually. For example, we want our default color be red (0xFF0000) in the beginning:

myColorPicker.selectedColor = 0xFF0000

User is able to enter his own hex code into the textfield in our color panel. If we don't want to let the user do that, we can make the ColorPicker uneditable:

myColorPicker.editable = false

We can simply hide the Text Field too:

myColorPicker.showTextField = false

We can also set a pre-defined array of colors for our ColorPicker.

myColorPicker.colors = [0xFF0000, 0x00FF00, 0x0000FF, 0xFFFF00, 0x00FFFF, 0xFF00FF]

And here's what we get:


Full code:

import fl.controls.ColorPicker;
import fl.events.ColorPickerEvent;
import flash.geom.ColorTransform;

var myColor:ColorTransform = mySample.transform.colorTransform

myColorPicker.addEventListener(ColorPickerEvent.CHANGE, changeColor);
myColorPicker.selectedColor = 0xFF0000
myColorPicker.editable = false
myColorPicker.showTextField = false
myColorPicker.colors = [0xFF0000, 0x00FF00, 0x0000FF, 0xFFFF00, 0x00FFFF, 0xFF00FF]

function changeColor(ColorPickerEvent):void{
myColor.color = myColorPicker.selectedColor;
mySample.transform.colorTransform = myColor
myTextfield.text=myColorPicker.hexValue
}

Play around with the properties to find the settings that match your needs the most.

Thanks for reading!

Related:

Using ColorPicker component: Part 1

2 comments:

MODE said...

Thx...but what mySample is?

MODE said...

Sorry...I've got it! A movie clip instance...cool.

Post a Comment