<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://www.adobe.com/2006/mxml" horizontalGap="0" xmlns:qs="qs.controls.*" horizontalAlign="left" paddingLeft="0" paddingTop="0" paddingBottom="0" paddingRight="0" layout="horizontal" backgroundColor="#343434" initialize="createData()"
viewSourceURL="srcview/index.html" xmlns:f="flash.filters.*" creationComplete="updateControl()">
<Script>
<![CDATA[
[Bindable] public var textItems:Array;
[Bindable] public var images:Array;
[Bindable] public var currentDP:Array;
private function createData():void
{
textItems = ("Now is the time for all good men to come to the aid of the party. The quick brown fox jumped over the lazy dog").split(" ");
var images:Array = [];
for(var j:int=0;j<1;j++)
{
for(var i:int=1;i<=14;i++)
{
images.push("img/img"+i+".jpg");
}
}
this.images = currentDP = images;
}
private function updateControl():void
{
fisheye.direction = String(direction.selectedValue);
fisheye.setStyle("horizontalAlign",hAlign.selectedValue);
fisheye.setStyle("verticalAlign",vAlign.selectedValue);
fisheye.setStyle("defaultSpacing",spacing.value);
fisheye.setStyle("defaultScale",dscale.value);
fisheye.setStyle("hilightMinScale",(mscaleSet.selected)? mscale.value:NaN);
fisheye.setStyle("hilightMaxScale",maxscale.value);
fisheye.setStyle("hilightScaleRadius",srad.value);
fisheye.setStyle("hilightScaleSlope",sslope.value);
fisheye.setStyle("animationSpeed",aspeed.value);
}
private function updateData():void
{
if(content.selectedItem == "images")
{
currentDP = images;
fisheye.itemRenderer = imageRenderer;
}
else
{
currentDP = textItems;
fisheye.itemRenderer = textRenderer;
}
}
]]>
</Script>
<Style>
Fisheye {
fontSize: 38;
}
RadioButton, CheckBox {
text-roll-over-color: #FFFFFF;
text-selected-color: #FFFFFF;
color: #FFFFFF;
}
.insetBox {
paddingBottom: 30;
paddingLeft: 30;
paddingRight: 30;
paddingTop: 30;
}
FormItemLabel {
color: #FFFFFF;
}
HRule, VRule {
strokeWidth: 1;
strokeColor: #FFFFFF;
}
</Style>
<Component id="textRenderer">
<qs:CachedLabel useCache="on" color="#FFFFFF">
<qs:states>
<State name="selected">
<SetProperty name="filters">
<value>
<Array>
<f:GlowFilter color="#888888"/>
</Array>
</value>
</SetProperty>
<SetStyle name="color" value="#E27C0E" />
</State>
<State name="hilighted">
<SetProperty name="filters">
<value>
<Array>
<f:GlowFilter color="#BBBBBB"/>
</Array>
</value>
</SetProperty>
</State>
</qs:states>
</qs:CachedLabel>
</Component>
<Binding source="sel.value" destination="fisheye.selectedIndex" />
<Binding destination="sel.value" source="fisheye.selectedIndex" />
<RadioButtonGroup id="direction" selectedValue="horizontal" change="updateControl();"/>
<RadioButtonGroup id="hAlign" selectedValue="center" change="updateControl();"/>
<RadioButtonGroup id="vAlign" selectedValue="center" change="updateControl();"/>
<Form height="100%" backgroundColor="#565656">
<FormItem label="direction">
<RadioButton groupName="direction" label="horizontal" value="horizontal"/>
<RadioButton groupName="direction" label="vertical" value="vertical" />
</FormItem>
<HRule width="100%"/>
<FormItem label="horizontal-align">
<RadioButton groupName="hAlign" label="left" value="left"/>
<RadioButton groupName="hAlign" label="center" value="center"/>
<RadioButton groupName="hAlign" label="right" value="right"/>
<RadioButton groupName="hAlign" label="justified" value="justified"/>
</FormItem>
<HRule width="100%"/>
<FormItem label="vertical-align">
<RadioButton groupName="vAlign" label="top" value="top"/>
<RadioButton groupName="vAlign" label="center" value="center"/>
<RadioButton groupName="vAlign" label="bottom" value="bottom"/>
<RadioButton groupName="vAlign" label="justified" value="justified"/>
</FormItem>
<HRule width="100%"/>
<FormItem label="spacing">
<NumericStepper id="spacing" stepSize="1" value="4" change="updateControl();" />
</FormItem>
<FormItem label="defaultScale">
<NumericStepper id="dscale" stepSize=".1" value=".5" change="updateControl();" />
</FormItem>
<FormItem label="min scale">
<CheckBox id="mscaleSet" label="set minscale" />
<NumericStepper id="mscale" stepSize=".05" value=".1" change="updateControl();" />
</FormItem>
<FormItem label="max scale">
<NumericStepper id="maxscale" stepSize=".05" value="1" change="updateControl();" />
</FormItem>
<FormItem label="scale radius">
<NumericStepper id="srad" stepSize="1" minimum="0" value="2" change="updateControl();" />
</FormItem>
<FormItem label="scale slope">
<NumericStepper id="sslope" stepSize=".1" minimum="0" value="1" change="updateControl();" />
</FormItem>
<FormItem label="animation speed">
<NumericStepper id="aspeed" minimum=".05" stepSize=".05" value=".3" change="updateControl();" />
</FormItem>
<HRule width="100%"/>
<FormItem label="content">
<ComboBox id="content" dataProvider="{['images','text']}" change="updateData();" />
</FormItem>
<FormItem label="selection">
<HSlider id="sel" liveDragging="true" width="100" minimum="-1" maximum="{currentDP.length}" snapInterval="1" />
</FormItem>
</Form>
<VRule height="100%" />
<HBox width="100%" horizontalGap="0" height="100%" styleName="insetBox" clipContent="true" >
<qs:Fisheye id="fisheye" width="100%" height="100%" dataProvider="{currentDP}"
stateProperty="currentState" rolloverValue="hilighted" defaultValue="" selectedValue="selected"
verticalAlign="top"
horizontalAlign="center" >
<qs:itemRenderer>
<Component id="imageRenderer">
<qs:BitmapTile>
<qs:states>
<State name="selected">
<SetStyle name="borderColor" value="#E27C0E" />
<SetStyle name="borderAlpha" value="1" />
<SetStyle name="borderWidth" value="3" />
<SetProperty name="filters" />
</State>
<State name="hilighted">
<SetProperty name="filters" />
</State>
</qs:states>
</qs:BitmapTile>
</Component>
</qs:itemRenderer>
</qs:Fisheye>
</HBox>
</Application>