Revised PhotoViewer

I just installed my Non-Commercial/Non-Institutional version of Flex today, and began to use the photoviewer sample app for a slideshow of my daughter Kaliope.  This is a really nice app, but there were a few features i wanted to add, so I modified it a bit.  This new version now supports an Audio track, pause/resume/restart from begining buttons, and more attributes specified in the xml for easier customization.   The final change was scrolling the Horizontal list so that the currently showing picture was always seen in the List.

Originally, the XML only had nodes for title and an array of photos.  I’ve added Interval (time to show each picture) as a node, as well as audio (a url of an mp3 file).

When my DNS propagates, you should be able to view this app here.  If its not yet available, chances are its just that its a DNS issue.

Changes are shown in red

photoviewer.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.macromedia.com/2003/mxml"
    xmlns="*"
    backgroundColor="#FFFFFF"
    horizontalAlign="left"
    initialize="initApp()">
    <mx:Style source="photoviewer.css"/>
    <mx:Script source="photoViewerScript.as"/>
    <mx:HTTPService id="albumSrv" url="{albumName}" result="albumSrvResult(event)"/>
    <mx:HBox width="100%" height="100%">
        <ImageMixer source="{currentPhoto.url}" height="100%"/>
        <mx:VRule height="100%"/>
        <mx:VBox verticalGap="2" width="100%" height="100%" visible="{photoCount>0}">
            <mx:Label text="{album.title}"/>
            <mx:Label text="Photo {list.selectedIndex+1} of {photoCount}"/>
            <mx:Text text="{currentPhoto.description}" width="100%" height="100%" />
        </mx:VBox>
    </mx:HBox>
    <mx:Panel width="100%" verticalGap="0" title="{album.title} [{photoCount} photos]">
        <mx:VBox width="100%" height="100%">
            <mx:HorizontalList id="list"
                dataProvider="{album.photo}"
                width="100%"
                cellRenderer="Thumbnail"
                itemWidth="108"
                height="100"
                selectionColor="#FFCC00"
                liveScrolling="false"
                showScrollTips="true"
                scrollTipFunction="scrollTipFunc"
                change="currentPhoto=album.photo

"/>
        </mx:VBox>
        <mx:ControlBar>
            <mx:Button id="startButton" label="Start Slide Show" click="slideShowStart()"/>
            <mx:Button id="stopButton" enabled="false" label="Pause Slide Show" click="slideShowStop()"/>
            <mx:Button id="restartBtn" enabled="false" label="Restart from begining" click="restart()" width="-1" visible="false"/>
            <mx:VBox marginTop="10" marginLeft="10">
                <mx:ProgressBar id="slideShowProgress" label="Slide Show %3%%" x="10" minimum="0" mode="manual" width="200"/>
            </mx:VBox>
        </mx:ControlBar>
    </mx:Panel>
 <!– plays audio –>
 <mx:MediaDisplay id="audio" contentPath="{album.audio}" autoPlay="false"/>
</mx:Application>

photoViewerScript.as

   var albumName: String="album/album.xml";
// The album XML node deserialized into an object graph by the HTTPService
   var album: Object;
// The total number of photos in the album
   var photoCount: Number=-1;
// A reference to the method called at regular interval to move through the photos in the slide show
   var call;
// time to spend on each photo
   var interval: Number;
// reference to the currently displayed photo object
   var currentPhoto: Object;
   var done:Boolean = true;
function initApp() {
   albumSrv.send();
}
function albumSrvResult(event) {
   album=albumSrv.result.album;
   photoCount=album.photo.length;
   interval = album.interval;
   list.selectedIndex=0;
   currentPhoto=album.photo

;
}
function slideShowStart() {
   if(done){
       audio.play(0);
       list.selectedIndex=0;
   } else {
       audio.play();
   }
   done=false;
   toggleRestart(false);

   startButton.enabled=false;
   stopButton.enabled=true;
   stopButton.setFocus();
   call=setInterval(this, "slideShowNext", interval);
}
function slideShowStop() {
   toggleRestart(true);
   startButton.enabled=true;
   stopButton.enabled=false;
   startButton.setFocus();
   audio.pause();
   clearInterval(call);
}
function slideShowNext() {
   if (list.selectedIndex<photoCount-1) {
      list.selectedIndex++;
      currentPhoto=album.photo;
      slideShowProgress.setProgress(list.selectedIndex+1, photoCount);
      list.hPosition = list.selectedIndex;
   } else {
      slideShowStop();
      audio.stop();
      toggleRestart(false);
      done=true;
   }
}
function toggleRestart(bool:Boolean){
   restartBtn.enabled=bool;
   restartBtn.visible = bool;
   if(bool){
      restartBtn.width = 200;
   } else {
    restartBtn.width = 0;
   } 
}
function restart(){
   done = true;
   slideShowStart();
}
       
function scrollTipFunc(dir : String, pos: Number) : String{
   return album.photo[pos].description;
}

album.xml

<album>
    <title>Slide show title</title>
    <audio>assets/music.mp3</audio>
    <interval>2700</interval>
    <photo>
        <url>assets/myPhoto.jpg</url>
        <thumb>assets/myPhoto.jpg</thumb>
        <description>Text Describing Photo</description>
    </photo>
</album>

There are no comments.

Leave a Reply