Over the past year or so, I have been responsible for developing and maintaining a JavaScript Slideshow component for our internal CMS. With the similarities between JavaScript and Actionscript, I have wanted to implement this slideshow in a manner consistent with the flexibility and usage of the JavaScript version. The biggest difference is that the JS one is focused on content, and the AS3 version will be focused on pictures – since AS3 does not fully support markup and CSS yet. This being said, I have had opportunity to attack my project and have the first phase completed. As with so many of my other personal projects, I’m tackling it in phases rather than having a defined spec list ready to go. In this case, I have the slideshow reading an image list from an XML document, loading the individual pictures and setting them on a timed rotation.

This is an example of the slideshow in action. Here is a breakdown of how I approached the show, keeping in mind that I wanted the most flexibility and customization possible:

1. First, I wrote a simple PHP file that generates an XML document with five random images from a bank of ten available slides. This XML file can be viewed directly and refreshed to see the randomization of the document.
2. Next, I wrote an extremely generic AS3 object to act as the loader GUI for each image that is loaded. This object is instantiated within each slide and updated to show that slide’s progress as it loads it image.
3. Then, we have the actual Slide object itself. Each slide instantiates a loader GUI, receives the path to an image and proceeds to load the image, updating the loader GUI with its progress. Each slide has an API to be able to be hidden and shown to aid in transitioning.
4. Finally, we have the Slideshow object, which also compiles into our actual SWF file. By setting the stage to no scale and setting the alignment to top left, we can use this same SWF for any size and shape of images through which we want to rotate, simply by changing the height and width of the object tag and setting the slide XML to correlating images.

So, with these things in mind, have a look at the source code and see if you can follow along with the logic of what’s happening. I would recommend reviewing the source code of the Slideshow object first and following along as the Event.COMPLETE is called after the XML document is loaded. From there, you will hopefully be able to easily follow the flow and see how the individual slides are both loaded and set into motion in the main show. Also take special note of how the slides are sized according to the stage size of the show (thus keeping with the dynamic nature of the application). Also, notice that the loader GUI is dynamically centered within each slide as well.

One concept I did throw into this application that I haven’t covered elsewhere in my posts is creating custom callback functions. After getting everything running successfully, I noticed that the first slide was rotating out way too fast, even though I had set the transition delay to six seconds. I realized that, though the slides were being displayed when they were loaded, the slideshow timer was actually being started as soon as the XML document was finished loading. To counteract this issue, I created a setLoadedCallback() method in the Slide class that allows you to pass a callback to be executed once the slide is fully loaded. By doing so, when the first slide (complete with loader) is set to visible, we can also set a callback for that first slide to start the timer as soon as it is complete. This way, we have the full transition delay accounted for, and the rotation of the slides begins right on schedule.

With building the transition APIs into the slides themselves, I am hoping to move on and build a navigation tool that will allow for standard slideshow functionality while still allowing for customization of view. Ultimately, my goal is to be able to set all the variables that define the behavior and even visuals of the slideshow via the XML document so that it is entirely customizable and could even be updated by a web application interface.

I hope this is of some help to you. If you find the techniques helpful, please contact me and let me know what was the most help for you. Also, just a personal disclaimer and shameless self-promotion: in case anyone wonders, all the images used in my slideshow demo are pictures I have personally taken, so there are no copyright issues there. For more of my photography, you can visit me on Flickr.

Full Source Code