<?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>