Sunday, September 26, 2010

Using the ColorPicker component: Part 1

Today we will learn how to use the ColorPicker component.

ColorPicker on stage is a small square, that throws out a color panel when you click on it. The color panel lets the user select a color (you can pre-define which colors would you like for this ColorPicker to have) and the color is passed to this component's selectedColor property. There are also visible, showTextField, enabled, editable, colors, hexValue properties.

An example of the ColorPicker component in an application:


You can navigate around the color sample panel using Home (first color), End (last color), Arrow keys and Page up/Page down.

You can create a ColorPicker by dragging it to stage from the components menu, or dynamically:

import fl.controls.ColorPicker;

var myColorPicker = new ColorPicker();
addChild(myColorPicker);

Below is the code for the example, that was shown in the beginning of the tutorial. I simply listen for a CHANGE event of the ColorPicker and pass its selectedColor property to a ColorTransform object. After that I apply the ColorTransform object to my rectangle on screen.

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

var myColor:ColorTransform = mySample.transform.colorTransform

myColorPicker.addEventListener(ColorPickerEvent.CHANGE, changeColor);

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

Check out my previous tutorials on how to create spectrum color picker and a slider color picker (these are not made using components).

Next time we will learn more about color pickers. Thanks for reading!

Related:

Using ColorPicker component: Part 2

No comments:

Post a Comment