The following example shows how you can apply an effect that plays once a Flex ProgressBar control completes (reaches 100%).
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/15/setting-a-complete-effect-on-a-progressbar-control-in-flex/ -->
<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>
View source is enabled in the following example.





No compiled SWFs anymore?
BTW, great blog!!
Thanks,
Michael
Michael,
Sorry, I’ve been too busy, I’ll try and upload the files later today.
Peter
SWF added.