Flex中的ProgressBar

1.下面的例子展示了如何设置进度条（ProgressBar）完成（100%）时的效果

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            private var timer:Timer;
 
            private function init():void {
                timer = new Timer(100);
                timer.addEventListener(TimerEvent.TIMER, timer_timer);
            }
 
            private function timer_timer(evt:TimerEvent):void {
                progressBar.setProgress(progressBar.value + 1, 100);
            }
 
            private function progressBar_complete(evt:Event):void {
                timer.stop();
            }
 
            private function resetProgressBar():void {
                progressBar.setProgress(0, 100);
                progressBar.scaleX = 1.0; // 100%
                progressBar.scaleY = 1.0; // 100%
                progressBar.alpha = 1.0; // 100%
            }
 
            private function playProgressBar():void {
                resetProgressBar();
                timer.start();
            }
        ]]>
    </mx:Script>
 
    <mx:Parallel id="progressBar_completeEffect">
        <mx:Fade alphaTo="0.0" />
        <mx:Zoom zoomHeightTo="0" />
    </mx:Parallel>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Play"
                click="playProgressBar();" />
        <mx:Button label="Reset"
                click="resetProgressBar();" />
    </mx:ApplicationControlBar>
 
    <mx:ProgressBar id="progressBar"
            complete="progressBar_complete(event);"
            completeEffect="{progressBar_completeEffect}"
            mode="manual"
            labelPlacement="center"
            width="80%"
            height="60%"
            creationComplete="init();" />
 
</mx:Application>

 

2.

下面的例子演示了Flex中如何通过设置barSkin风格，设定进度条(ProgressBar)的自定义皮肤(Skin)。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;
 
            private function init():void {
                var c:Class = progressBar.getStyle("indeterminateSkin");
                progressBar.setStyle("barSkin", c);
                progressBar.setProgress(15, 100);
            }
 
            private function progressBar_change(evt:SliderEvent):void {
                progressBar.setProgress(evt.value, 100);
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="value:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="100"
                        value="15"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="10"
                        dataTipPrecision="0"
                        change="progressBar_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:ProgressBar id="progressBar"
            mode="manual"
            labelPlacement="center"
            height="50"
            creationComplete="init();" />
 
</mx:Application>

3.加载图片进度条

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*" creationComplete="init()">
<mx:Script>
 <![CDATA[
 import mx.controls.Image;
 import flash.net.URLLoader;
 import flash.net.URLRequest;
 import mx.controls.Alert;
 import mx.managers.PopUpManager;
 

 private var time:Timer = new Timer(1000,1);
 private function init():void
 {
  img.addEventListener(ProgressEvent.PROGRESS,pbRun);
  img.addEventListener(Event.COMPLETE,pbCMPLT);
 }
 
 private function pbCMPLT(e:Event=null):void
 {
  //Alert.show("ok","ok");
 
  time.start();
 }
 
 
 
 private function pbRun(e:ProgressEvent):void
 {
  var j:Number;
  j = int(img.bytesLoaded/img.bytesTotal*10000)/100;
  pb.setProgress(j,100);
  pb.label = "DownLoad "+j+"%";
  //pb.label = "";
 
 }
 ]]>
</mx:Script>
 <mx:Image id="img" source="Totolo.jpg" width="600" height="520" initialize="init()" y="39"/>
 <mx:ProgressBar id="pb" x="0" y="0" labelPlacement="center" width="800" height="20"  minimum="0" maximum="100" mode="manual" themeColor="#ff0000" color="green"/>
</mx:Application>

转载于:https://www.cnblogs.com/yuanq_20/archive/2012/12/09/2810333.html