tileexplorer.mxml

QS我也没用过

<?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();updateControl();"
	viewSourceURL="srcview/index.html" xmlns:f="flash.filters.*" >	
	
	<Script>
		<![CDATA[
			[Bindable] public var textItems:Array;
			[Bindable] public var images:Array;
			[Bindable] public var currentDP:Array;
			[Bindable] public var mar: Boolean = true;
			
			private function createData():void
			{
				var words:Array = ("The quick brown fox jumped over the lazy dog").split(" ");	
				textItems= [];
				var images:Array = [];
				for(var j:int=0;j<16;j++)
				{
					textItems = textItems.concat(words);
					for(var i:int=1;i<=14;i++)
					{
						images.push("img/img"+i+".jpg");
					}
				}
				this.images = currentDP = images;
			}
			
			private function updateControl():void
			{
				fisheye.setStyle("horizontalAlign",hAlign.selectedValue);
				fisheye.setStyle("verticalAlign",vAlign.selectedValue);
				fisheye.setStyle("defaultSpacing",spacing.value);
				fisheye.setStyle("defaultScale",dscale.value);
				fisheye.setStyle("hilightSpacing",hspacing.value);
				fisheye.setStyle("hilightMinScale",mscale.value);
				fisheye.setStyle("hilightMaxScale",maxscale.value);
				fisheye.setStyle("hilightScaleRadius",srad.value);
				fisheye.setStyle("hilightScaleSlope",sslope.value);
				fisheye.setStyle("animationSpeed",aspeed.value);
				fisheye.setStyle("zoomMode",zoomMode.selectedValue);
			}

			private function updateData():void
			{
				if(content.selectedItem == "images")
				{
					currentDP = images;
					fisheye.itemRenderer = imageRenderer;					
				}
				else
				{
					currentDP = textItems;
					fisheye.itemRenderer = testSquare;					
				}
			}
		]]>
	</Script>
	
	<Style>
		FisheyeTile {
			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="testSquare">						
		<HBox width="100" height="100" backgroundColor="#FFFFFF">
			<states>
				<State name="selected" />
				<State name="hilighted" />
			</states>
		</HBox>							
	</Component>
	
		<Binding source="sel.value" destination="fisheye.selectedIndex" />
		<Binding destination="sel.value" source="fisheye.selectedIndex" />
		
		<RadioButtonGroup id="hAlign" selectedValue="center" change="updateControl();"/>
		<RadioButtonGroup id="vAlign" selectedValue="center" change="updateControl();"/>
		<RadioButtonGroup id="zoomMode" selectedValue="scale" change="updateControl();"/>
		
		<Form height="100%" backgroundColor="#565656">
			<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"/>
			</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"/>
			</FormItem>
			<HRule width="100%"/>
			<FormItem label="spacing">
				<NumericStepper id="spacing" stepSize="1" value="20" maximum="150" change="updateControl();" />
			</FormItem>
			<FormItem label="defaultScale">
				<NumericStepper id="dscale" stepSize=".1" value=".3" change="updateControl();" />
			</FormItem>
			<HRule width="100%" />
			<FormItem label="hilight spacing">
				<NumericStepper id="hspacing" stepSize="1" value="30" maximum="150" change="updateControl();" />
			</FormItem>
			<FormItem label="hilight 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="4" change="updateControl();" />
			</FormItem>
			<FormItem label="scale slope">
				<NumericStepper id="sslope"  stepSize=".1" minimum="0" value=".3" 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','test squares']}" change="updateData();" />
			</FormItem>
			<FormItem label="zoom mode">
				<RadioButton selected="true" groupName="zoomMode" label="Scale" value="scale" />
				<RadioButton groupName="zoomMode" label="Resize" value="resize" />
			</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:FisheyeTile id="fisheye" width="100%" height="100%" dataProvider="{currentDP}" 
				stateProperty="currentState" rolloverValue="hilighted" defaultValue="" selectedValue="selected"
				>			
				<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">
										<value>
											<Array>
												<f:GlowFilter color="#FFFFFF" blurX="8" blurY="8" />
											</Array>
										</value>
									</SetProperty>
								</State>
							</qs:states>						
						</qs:BitmapTile>
					</Component>
				</qs:itemRenderer>
				
			</qs:FisheyeTile>
		</HBox>
</Application>