如何使用Flex HSlider

拖动水平滚动条来改变图片大小。

<?xml version="1.0"?>
<!--
	Simple example to demonstrate the HSlider control. 
	水平拖动条。
	MyShareBook.cn 翻译
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[

          private var imageWidth:Number=0;
          private var imageHeight:Number=0;

          // Event handler function to change the image size.
          private function changeSize():void
	      {
	         phoneImage.width=uint(imageWidth*hSlider.value/100);
	         phoneImage.height=uint(imageHeight*hSlider.value/100);
	      }
        ]]>
    </mx:Script>

    <mx:Panel id="panel" title="HSlider Control Example" height="100%" width="95%" 
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

        <mx:HBox height="100%" width="100%">
            <mx:Image id="phoneImage" source="@Embed('assets/Nokia_6630.png')" 
                creationComplete="imageWidth=phoneImage.width; imageHeight=phoneImage.height;" />
        </mx:HBox>

        <mx:Label color="blue" text="拖动slider来改变图片大小."/>

        <mx:HSlider id="hSlider" minimum="0" maximum="100" value="100" 
            dataTipPlacement="top" 
            tickColor="black" 
            snapInterval="1" tickInterval="10" 
            labels="['0%','100%']" 
            allowTrackClick="true" 
            liveDragging="true"
            change="changeSize();"/>
    </mx:Panel>
</mx:Application>