<?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:magnifier="ardisia.components.magnifier.*"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
public function creationComplete():void
{
}
protected function removedFromStageHandler(event:Event):void
{
}
]]>
</fx:Script>
<fx:Declarations>
<magnifier:Magnifier id="mag"
displacementScale="{zoomStrengthSelect.value}"/>
</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="Magnifier Description"
description="Creates a magnification effect over any visual element that is a UIComponent or extends UIComponent. Can either zoom in or zoom out depending on the strength property."
currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
<containers:expandingContainerContent>
<!--- expanding container #1 -->
<data:ExpandingContainerData>
<data:label>API</data:label>
<data:content>
<s:FormHeading label="Properties"/>
<s:FormItem label="Zoom Strength:">
<s:HSlider id="zoomStrengthSelect"
width="100"
minimum="-100" maximum="100" value="75"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Positive values will zoom in and negative values will zoom out. Think of it as a strength indicator for the zoom."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Zoom Width:">
<s:HSlider id="zoomWidthSelect"
width="100"
minimum="1" maximum="200" value="100"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Width of the magnified region."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Zoom Height:">
<s:HSlider id="zoomHeightSelect"
width="100"
minimum="1" maximum="200" value="100"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Height of the magnified region."/>
</s:helpContent>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Image Example</data:tabLabel>
<data:exampleDescription>Mouse over the image below to apply the magnification to an image. For this example, the mouse cursor is hidden when the magnification is applied.</data:exampleDescription>
<data:primaryContent>
<s:Image id="laikaToysImg"
horizontalCenter="0" verticalCenter="0"
source="@Embed(source='images/laika-toys.jpg')"
rollOut="mag.remove();Mouse.show();"
rollOver="mag.magnify(laikaToysImg, zoomWidthSelect.value, zoomHeightSelect.value, event.stageX, event.stageY);Mouse.hide();"
mouseMove="mag.magnify(laikaToysImg, zoomWidthSelect.value, zoomHeightSelect.value, event.stageX, event.stageY);"/>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #2 -->
<data:PrimaryContentData>
<data:tabLabel>Text Example</data:tabLabel>
<data:exampleDescription>Magnification can be applied to any UIComponent, not just images. Mouse over the components below to observe the magnification effect over text and buttons. For this example, the mouse cursor is hidden when the magnification is applied.</data:exampleDescription>
<data:toolbarContent>
<s:FormItem top="10">
<s:TextArea id="textSelect"
text="Mouse over this text to see the magnification. Adjust this text in the textarea in the controlbar to see how the magnification can dynamically update. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Use this field to set the text that appears below. The magnification can be applied to dynamic content."/>
</s:helpContent>
</s:FormItem>
</data:toolbarContent>
<data:primaryContent>
<s:BorderContainer id="test"
horizontalCenter="0" verticalCenter="0"
rollOut="mag.remove();Mouse.show();"
rollOver="mag.magnify(test, zoomWidthSelect.value, zoomHeightSelect.value, event.stageX, event.stageY);Mouse.hide();"
mouseMove="mag.magnify(test, zoomWidthSelect.value, zoomHeightSelect.value, event.stageX, event.stageY);">
<s:Rect top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor color="#000000"
alpha="0.1"/>
</s:fill>
</s:Rect>
<s:VGroup top="10" right="10" bottom="10" left="10">
<s:Button label="Button " />
<s:RichText id="textDisplay"
maxWidth="300"
horizontalCenter="0" verticalCenter="0"
text="{textSelect.text}"/>
<s:HGroup>
<s:Button label="Button " />
<s:Button label="Button " />
</s:HGroup>
</s:VGroup>
</s:BorderContainer>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>