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>