Search Flex Components Free

Custom Search

December 25, 2007

Flex Misc Control Zoom example using HSlider Source Code

Flex Sample Source Code:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0">

<mx:Script>
<![CDATA[

import mx.events.SliderEvent;

private function changeZoom(event:SliderEvent) : void
{
img.scaleY = event.target.values[0]/100;
img.scaleX = event.target.values[0]/100;
}

private function adjustDefaultZoom() : void
{
img.scaleX = slider.values[0]/100;
img.scaleY = slider.values[0]/100;
}
]]>
</mx:Script>

<mx:Panel title="Zoom Demo" width="100%" height="100%">

<mx:Canvas id="canvas" width="100%" height="100%">

<mx:Image id="img" x="{canvas.width/2 - img.width/2}"
y="{canvas.height/2 - img.height/2}"
source="@Embed('../assets/products/Nokia_6630.png')"
creationComplete="adjustDefaultZoom()"
/>

</mx:Canvas>

<mx:ControlBar horizontalAlign="center">
<mx:HSlider id="slider"
width="400"
minimum="0"
maximum="100"
labels="['0%','100%']"
values="[50]"
tickInterval="10"
snapInterval="1"
liveDragging="true"
change="changeZoom(event)" />

</mx:ControlBar>

</mx:Panel>

</mx:Application>

Related Flex Tutorials