如何使用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>