<?xml version="1.0" encoding="utf-8"?>
  <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
          <mx:Script>
                  <![CDATA[
                          
                          //import com.asfusion.controls.PhotoshowImage;
                          
                          //all the pictures
                          private var pictures:Array;
                          //the index of the array that corresponds to currently shown picture
                          private var currentIndex:int = 0;
                          
                          //actual picture object that is currently shown
                          [Bindable]
                          private var currentPicture:actionscript_application_photoshow_com_asfusion_controls_PhotoshowImage;
                          
                          // show the next picture in set
                          private function goNext():void
                          {
                              // status.text += currentIndex + " ";;
                                  if (currentIndex < pictures.length - 1){
                                          currentIndex++;
                                  }
                                  else {
                                          currentIndex = 0;
                                  }
                                  switchPictures();
                          }
                          
                          // show the previous picture in set
                          private function goPrevious():void
                          {
                                  if (currentIndex != 0){
                                          currentIndex--;
                                  }
                                  else {
                                          currentIndex = pictures.length - 1;
                                  }
                                  //set the current picture
                                  switchPictures();
                          }
                          
                          private function switchPictures():void{
                                  fadeIn.end();
                                  fadeOut.end();
                                  picture.visible = false;                        
                          }
                          
                          private function updateCurrentPicture():void{
                                  
                                  //set the current picture based on current index
                                  status.text = " " + currentIndex + " ";
                                  currentPicture = pictures[currentIndex];
                          }
                          
                                  
                          //this changes the set of pictures
                          public function set dataProvider(value:Array):void
                          {
                                  pictures = value;
                                  currentIndex = 0;
                                  updateCurrentPicture();
                          }
                          
                          public function  get dataProvider():Array
                          {
                                  return pictures;
                          }
                  ]]>
          </mx:Script>
          
          <!-- taken straight from the docs -->
          <mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0" effectEnd="updateCurrentPicture()"/>
      <mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
          
          <mx:Label id="status" text="..."/>
          <mx:Canvas styleName="imageHolder" horizontalScrollPolicy="off" verticalScrollPolicy="off"
                   width="{currentPicture.width}" height="{currentPicture.height}"  resizeEffect="Resize" >
                   <mx:ProgressBar id="progressBar" source="{picture}" visible="{progressBar.percentComplete != 100}" />
                   
                  <mx:Image width="{currentPicture.width}" height="{currentPicture.height}" id="picture" 
                          source="actionscript-application-photoshow-assets-photoshow-images-{currentPicture.name}" hideEffect="{fadeOut}" 
                          showEffect="{fadeIn}" complete="picture.visible = true" />
          </mx:Canvas>
          
          <mx:Button styleName="previous" click="goPrevious()"/>
          <mx:Button styleName="next" click="goNext()" />
          <mx:Text y="{currentPicture.height}" width="600" height="47" styleName="caption"
                  text="{currentPicture.caption}" moveEffect="Move" />
          
  
  </mx:Canvas>