<?xml version="1.0" encoding="utf-8"?>
<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:colorSpacePicker="ardisia.components.colorSpacePicker.*"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:colorPicker="ardisia.components.colorPicker.*"
xmlns:colorSpacePickerDemo="components.colorSpacePicker.*"
xmlns:separators="ardisia.components.separators.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
import spark.effects.easing.Bounce;
import spark.effects.easing.Elastic;
import spark.effects.easing.Linear;
import spark.effects.easing.Power;
import spark.effects.easing.Sine;
import ardisia.components.colorSpacePicker.ColorSpacePicker;
public function creationComplete():void
{
updateColorSpacePicker();
}
protected function updateColorSpacePicker():void
{
var picker:ColorSpacePicker = colorSpacePicker.colorSpacePicker;
picker.primarySpectrumResolution = primaryResolutionSelect.value;
picker.secondarySpectrumResolution = secondaryResolutionSelect.value;
picker.duration = animationDurationSelect.value;
picker.easer = animationEaserSelect.selectedItem.easer;
}
protected function removedFromStageHandler(event:Event):void
{
}
]]>
</fx:Script>
<fx:Declarations>
</fx:Declarations>
<s:states>
<s:State name="stockholm" />
<s:State name="london" />
<s:State name="spark" />
</s:states>
<containers:DemoApplicationWrapper id="demoAppWrapper"
width="100%" height="100%"
westRegionTitle="ColorSpacePicker Description"
description="Color picker that supports selection via the HSL, HSV, and RGB color spaces. This example adds sliders for each spectrum and the ability to set the color via hex values."
currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
<containers:expandingContainerContent>
<!--- expanding container #1 -->
<data:ExpandingContainerData>
<data:label>Styling</data:label>
<data:content>
<s:FormHeading label="Spectrum Resolution"/>
<s:FormItem label="Primary:">
<s:HSlider id="primaryResolutionSelect"
width="100"
minimum="1" maximum="10" value="3"
change="updateColorSpacePicker();" />
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The side length of the squares for the primary spectrum. Larger squares are more performant."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Secondary:">
<s:HSlider id="secondaryResolutionSelect"
width="100"
minimum="1" maximum="10" value="3"
change="updateColorSpacePicker();"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The side length of the squares for the secondary spectrum. Larger squares are more performant."/>
</s:helpContent>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
<!--- expanding container #2 -->
<data:ExpandingContainerData>
<data:label>Visual Properties</data:label>
<data:content>
<s:FormHeading label="Border"/>
<s:FormItem label="Secondary:">
<colorPicker:ColorPicker id="borderColorSelect"
showColorSpacePicker="false" showTransparency="false"
selectedColor="{colorSpacePicker.colorSpacePicker.getStyle('borderColor')}"
change="colorSpacePicker.colorSpacePicker.setStyle('borderColor', borderColorSelect.selectedColor);"/>
</s:FormItem>
<s:FormItem label="Alpha:">
<s:HSlider id="borderAlphaSelect"
width="80"
minimum="0" maximum="1" value="1" snapInterval="0"
change="colorSpacePicker.colorSpacePicker.setStyle('borderAlpha', borderAlphaSelect.value);"/>
</s:FormItem>
<separators:HSeparator width="100%" paddingTop="2" paddingBottom="4" />
<s:FormHeading label="Secondary Spectrum"/>
<s:FormItem label="Gap:">
<s:HSlider id="spectrumGapSelect"
width="80"
minimum="0" maximum="50" value="5" snapInterval="1" stepSize="1"
change="colorSpacePicker.colorSpacePicker.spectrumGap=spectrumGapSelect.value;"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The gap between the primary and secondary spectrums."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Width:">
<s:HSlider id="secondaryWidthSelect"
width="80"
minimum="5" maximum="50" value="14" snapInterval="1" stepSize="1"
change="colorSpacePicker.colorSpacePicker.secondarySpectrumWidth=secondaryWidthSelect.value;"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The width of the secondary spectrum."/>
</s:helpContent>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
<!--- expanding container #3 -->
<data:ExpandingContainerData>
<data:label>Animations</data:label>
<data:content>
<s:FormItem label="Duration:">
<s:HSlider id="animationDurationSelect"
width="100"
minimum="0" maximum="1000" value="150"
change="updateColorSpacePicker();"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Duration of the color marker bullseye animation."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Easer:">
<s:DropDownList id="animationEaserSelect"
width="100"
labelField="name"
selectedIndex="0"
change="updateColorSpacePicker();">
<s:ArrayCollection>
<fx:Object name="Sine" easer="{new Sine()}"/>
<fx:Object name="Linear" easer="{new Linear()}"/>
<fx:Object name="Power" easer="{new Power()}"/>
<fx:Object name="Bounce" easer="{new Bounce()}"/>
<fx:Object name="Elastic" easer="{new Elastic()}"/>
</s:ArrayCollection>
</s:DropDownList>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The easer to use with the color marker bullseye when it moves via animation."/>
</s:helpContent>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Basic Example</data:tabLabel>
<data:exampleDescription>Skinned for maximum user customization.</data:exampleDescription>
<data:primaryContent>
<colorSpacePickerDemo:ColorSpacePickerExample id="colorSpacePicker"
horizontalCenter="0" verticalCenter="0"/>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>