在 Flex 中设置进度条(ProgressBar)完成时效果的例子

下面的实例演示了如何设置进度条（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(10);
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>