flex加载进度条的使用

1、

ModuleLoader 中有3个事件 ready为加载完成，loading为正在加载中，progress为进度事件，

ProgressBar必须放到ModuleLoader 的后面，不然显示的时候会被ModuleLoader 遮挡住。

mode="manual";这个属性一定要加上，不然不显示进度，百分比出不来。

代码可以这样

<mx:script>

      public function loading(e:ModuleEvent):void{

                   myProgressBar.setProgress(e.bytesLoaded,e.bytesTotal);

                   myProgressBar.label="模块已加载"+Math.round((e.bytesLoaded * 100 / e.bytesTotal)) + "%";

             }

</mx:script>

<mx:ModuleLoader ready="myProgressBar.visible=false" loading="myProgressBar.visible=true" progress="loading(event)"  id="module" />

<mx:ProgressBar id="myProgressBar" horizontalCenter="0" verticalCenter="0" mode="manual"  width="200"    barColor="#555566"/>

还可以如下操作：

  private var myProgressBar:ProgressBar;

   

   private function init():void{

    m1.url="MyModule.swf";

    m1.addEventListener(ModuleEvent.READY,getModule);

   }

   

   private function getModule(event:ModuleEvent):void{

    (m1.child as MyModule).getModuleSuccess();

   }

   

   private function loading(event:ModuleEvent):void{

    myProgressBar.setProgress(event.bytesLoaded, event.bytesTotal); 

    myProgressBar.label="模块已加载"+Math.round((event.bytesLoaded * 100 / event.bytesTotal)) + "%";

   }

   

   private function removeProgressBar(event:Event):void{

    //清除

    PopUpManager.removePopUp(myProgressBar);

   }

   

   private function popUpProgressBar(event:Event):void{

    //弹出

    myProgressBar= new ProgressBar();

    myProgressBar.mode="manual";

    myProgressBar= PopUpManager.createPopUp(this, ProgressBar, true) as ProgressBar;  

    PopUpManager.centerPopUp(myProgressBar);  

   }

   

  ]]>

 </fx:Script>

 

 <mx:ModuleLoader id="m1" width="100%" height="100%" loading="popUpProgressBar(event)" progress="loading(event)" ready="removeProgressBar(event)"/>

2、

<?xml version="1.0"?>
<!-- Simple example to demonstrate the ProgressBar control. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" height="272"
 width="489">
    <mx:Script>
        <![CDATA[
            private function LoadImage():void{
img.load("http://hiphotos.baidu.com/guowenlong111/pic/item/
ff81f91521b7435ab9127bce.jpg");
                progBar.label="图片大小 %2字节 已加载%1字节加载百分比%3%%";
            }
        ]]>
    </mx:Script>
    <mx:Panel title="ProgressBar Control Example" height="216" width="429"
        layout="absolute">
        <mx:ProgressBar y="142" x="10" source="img" width="389" id="progBar"
             fontSize="12" height="24" label="%3%%" labelPlacement="center"/>
        <mx:Image x="10" y="10" width="245" height="124" id="img"/>
        <mx:Button x="263" y="10" label="加载" click="LoadImage()"
             fontSize="12"/>
    </mx:Panel>
</mx:Application>

 简要说明：source属性指ProgressBar正在进行度量的的控件。labelPlacement属性指ProgressBar控件label属性中文字显示的位置，有效值为 "right"、"left"、"bottom"、"center" 和 "top"。label属性中特殊文本的含义如下：

• %1 = 当前加载的字节数
• %2 = 总字节数
• %3 = 已加载的百分比数
• %% =“%”字符