There’s just something about high quality photos fading in and out that always seem to take the feel of a site up a notch or two. Good examples are AMO’s very own Arizona Medical Group Management Association (AZMGMA) and Metro Atlantic Relocation Council (MARC). Both of these sites use a custom XML-driven Flash slide show, developed internally a couple of years ago. The ease of updates from using XML, and the aforementioned Flash flashy-ness make it a perfect solution for breathing life into an otherwise static page.

Click the photo to see the slideshow in action, using recent photos from Montana and Yellowstone, or read on to learn more …

I recently decided it was time to create an ActionScript 3 version of this simple slide show, with a few key objectives:

1. Abstract as many variables from the .fla as possible, controlling settings within the xml
2. Maintain flexibility and ease of customization
3. Keep things clean, simple and easy to implement

I figured the best way to handle this was through a custom class, rather than a “template” .fla. The resulting SlideShow class can be implemented “as is” with the 4 easy lines of code (the constructor also accepts an optional autoStart:Boolean argument, default is true):

import com.arcstone.display.SlideShow;
import com.arcstone.events.SlideShowEvent;

var slideshow:SlideShow = new SlideShow(”mySlides.xml”);
someDisplayObjectContainer.addChild(slideshow);

The XML file controls the following variables:

• directory - the directory where all images will be stored, relative to the swf (with or without the trailing “/”)
• delay - the timer delay (seconds) - how long to display the images
• transition - the duration of the fade transition
• randomize - whether or not to randomize the display of images (accepts ‘0′, ‘no’, ”, and false for a sequential display, everything else is interpreted as “true”)
• randomstart - whether or not to randomize the starting index (accepts ‘0′, ‘no’, ”, and false, everything else is interpreted as “true”)

Each ’slide’ node in the xml is made into a Slide instance, with title, image, link, and caption properties. The current slide’s properties are accessible through your slideshow instance via composition .. bla bla bla… basically:

var currentSlidesTitle:String = slideshow.slide.title;

Your SlideShow instance then dispatches the following events:
SlideShowEvent.SLIDES_READY;
SlideShowEvent.LOAD_START;
SlideShowEvent.LOAD_PROGRESS; (includes bytesLoaded and bytesTotal)
SlideShowEvent.LOAD_ERROR;
SlideShowEvent.TRANSITION_START;
SlideShowEvent.TRANSITION_COMPLETE;

And that’s it! Click here to see it in action, using photos from my August trip through Bozeman, MT & Yellowstone National Park…

This entry was posted on Tuesday, September 16th, 2008 at 11:41 am and is filed under General. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.