SimpleViewer is a great, easy to impliment, polished little gallery written in flash that lets you tie your photos and thumbnails in with XML. It’s got a decent feature set as far as changing the aesthetic of the viewer, but no option for an automated slideshow.

One of my clients wanted this option, and it took me a while to figure it out – so for those of you who are wondering how to incorporate a slideshow into simpleviewer, here’s how!

My finished project can be seen at SixEightyThreePhoto.com

(note – if you’re going for the free version of SimpleViewer this won’t help you – you need access to the source code, so you will need SimpleViewer Pro for this)

Step one – simpleviewer.fla

  1. Open simpleviewer.fla
  2. Create a new layer in the timeline.
  3. Create a keyframe by selecting frame 30 on your new timeline and hitting F6.
  4. Create your start/stop button and put it here, on this keyframe, on this layer. I’m calling mine ssButton. (for those in the know, I’m not really using a “button” element… I find them awkward to work with… I’m using a MovieClip as a button… but really, either way should work)
  5. Now we’re going to need a bit of code. This is all pretty simple stuff. A setInterval to iterate the slideshow, and instead of having a boolean to look at to determine whether or not the slideshow is playing, I’m just looking at whether the “play” layer of the button is visible. Open up the actions panel (F9) and copy this…

var nInterval:Number;

ssButton.onRelease = function():Void {
    ssButton.mcPlay._visible = !ssButton.mcPlay._visible;

    clearInterval(nInterval);

    if(!ssButton.mcPlay._visible) {
        nInterval = setInterval(slideshow, 3000);
        sm.ssNext();
    }
}

function slideshow():Void {
    sm.ssNext();
}

Step two – StageManager.as
I wish I knew a better way to do this, but I guess it’s not too painful… What we’re going to do here is pass our function call right on to another class instance. So at the bottom of StageManager, right before the last close brace, add this function…

public function ssNext() {
    mImageArea.ssNext();
}

Step three – ImageArea.as
Here’s where we actually, finally, DO something. Place this function right before the last close brace at the end of the file…

public function ssNext():Void {
    var nStart:Number = mCurrentImageIndex;
    mThumbArea.selectedThumbIndex++;

    if(nStart == mCurrentImageIndex)
        mThumbArea.selectedThumbIndex = 0;
}

Ta-Da!! If you built your button right, you now have working slideshow button in SimpleViewer! You’ll have to publish the simpleviewer.fla file again to get the updated version of your viewer.swf, and then you’ll probably have to tinker a bit to get the button in the right place – but that’s kid stuff.