Yahoo! Developer Network - Flash Developer Center - ASTRA Flex Components

ASTRA ColorPlaneAndSliderPicker

ColorPlaneAndSliderPicker is a user interface component for Flex that allows the user to pick a color value. It combines a one-dimensional color slider with a two-dimensional color plane.

Using ColorPlaneAndSliderPicker in Flex 3

In Getting Started, the ColorPlaneAndSliderPicker picker uses the default RGB color space. A color space is a way to represent a color value using multiple subvalues. An RGB color has a red value, a green value, and a blue value. A few more color space options are available, including HSB, CMY, and CMYK.

The following simple application demonstrates each of the available color space "components" for the slider. A RadioButton exists for each, and selecting a new value will automatically update the ColorPlaneAndSliderPicker.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:yahoo="http://www.yahoo.com/astra/2006/mxml" layout="vertical">
	<yahoo:ColorPlaneAndSliderPicker selectedColor="0x0000ff" sliderComponent="{colorComponents.selectedValue}"/>

<mx:RadioButtonGroup id="colorComponents"/>
	<mx:HBox>
		<mx:VBox styleName="colorSpaceList">
			<mx:Label styleName="colorSpaceTitle" text="RGB" width="100%"/>
			<mx:RadioButton groupName="colorComponents" label="Red" value="red" selected="true"/>
			<mx:RadioButton groupName="colorComponents" label="Green" value="green"/>
			<mx:RadioButton groupName="colorComponents" label="Blue" value="blue"/>
		</mx:VBox>
		<mx:VBox styleName="colorSpaceList">
			<mx:Label styleName="colorSpaceTitle" text="HSB" width="100%"/>
			<mx:RadioButton groupName="colorComponents" label="Hue" value="hue"/>
			<mx:RadioButton groupName="colorComponents" label="Saturation" value="saturation"/>
			<mx:RadioButton groupName="colorComponents" label="Brightness" value="brightness"/>
		</mx:VBox>
		<mx:VBox styleName="colorSpaceList">
			<mx:Label styleName="colorSpaceTitle" text="CMY" width="100%"/>
			<mx:RadioButton groupName="colorComponents" label="Cyan" value="cyan"/>
			<mx:RadioButton groupName="colorComponents" label="Magenta" value="magenta"/>
			<mx:RadioButton groupName="colorComponents" label="Yellow" value="yellow"/>
		</mx:VBox>
	</mx:HBox>
</mx:Application>

As you can see, both the slider and the 2D plane change for the selected color space. The components displayed in the 2D plane are automatically determined based on the value passed to sliderComponent.

Screen capture of ColorPlaneAndSliderPicker Color Space Example

To see a live example, please install Adobe Flash Player version 9 or higher.

Download the MXML example file.

For additional information, please take a look at the Examples section for functional demonstrations and the ActionScript 3.0 Class Reference for full details on every property, method, and style available to the ColorPlaneAndSliderPicker component.