Progress Bar being loaded as the image being loaded

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml” width=”400″ height=”300″>
<mx:Script>
 <![CDATA[
  import mx.controls.Alert;
  public function initApp():void
  {
   img.addEventListener(ProgressEvent.PROGRESS,loadingData);
      img.load("DSC01779.JPG");
  }
  public function loadingData(event:ProgressEvent)
  {
   pb.setProgress(event.bytesLoaded,event.bytesTotal);

  }
 ]]>
</mx:Script>
 <mx:ProgressBar id=”pb” source=”img” mode=”manual” x=”100″ y=”10″>
  
 </mx:ProgressBar>
 <mx:Image id=”img”  x=”120″ y=”120″ />
 <mx:Button click=”initApp()”  y=”80″ x=”160″/>
  <mx:Button click=”pb.setProgress(0,100)”  y=”160″ x=”191″/>
</mx:Canvas>