<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
viewSourceURL="srcview/index.html"
width="300" height="195">
<s:VGroup x="10" y="15">
<s:Group>
<s:Label text="Start:" baseline="15"/>
<mx:ColorPicker id="startColor" selectedColor="0xffffff"
width="30" x="60"/>
</s:Group>
<s:Group>
<s:Label text="End:" baseline="15"/>
<mx:ColorPicker id="endColor" selectedColor="0x080808"
width="30" x="60"/>
</s:Group>
<s:VGroup>
<s:Label text="Rotation:"/>
<s:HSlider id="rotationSlider" width="90" value="0"
minimum="-180" maximum="180" snapInterval="5"/>
</s:VGroup>
<s:VGroup>
<s:Label text="Focal Pt Ratio:"/>
<s:HSlider id="ratioSlider" width="90" value="0"
minimum="-1" maximum="1" snapInterval=".1"/>
</s:VGroup>
<s:CheckBox id="guidesVisibleCB" label="Show Guides"/>
</s:VGroup>
<s:Group x="110" y="5">
<s:Ellipse id="circle" width="180" height="180">
<s:fill>
<s:RadialGradient rotation="{rotationSlider.value}"
focalPointRatio="{ratioSlider.value}">
<s:GradientEntry color="{startColor.selectedColor}"/>
<s:GradientEntry color="{endColor.selectedColor}"/>
</s:RadialGradient>
</s:fill>
</s:Ellipse>
<s:Group visible="{guidesVisibleCB.selected}" y="85"
transformX="90" transformY="5" rotation="{rotationSlider.value}">
<s:Line xTo="180" y="5">
<s:stroke>
<s:SolidColorStroke color="red" weight="3"/>
</s:stroke>
</s:Line>
<s:Ellipse width="10" height="10" x="{ratioSlider.value * 90 + 85}">
<s:fill>
<s:SolidColor color="cyan"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="black"/>
</s:stroke>
</s:Ellipse>
</s:Group>
</s:Group>
</s:Application>