slideshow

Several months ago, I wrote a very simple Flash slideshow application for work. Shortly after that, I took some of my free time and built a similar application from the ground up. This time, I got to choose my own spec 😉 I’d always promised that I’d release the thing to the public, and last night, Peter asked for the source. Embarrassment ensued when I realized that I’d never gotten around to making that public release. Well… that changes now.

The whole application is about 130 lines of code plus Joey Lott’s ascb.util.Proxy class. I did this all back in AS2. When AS3 came along, I decided that I’d eventually rewrite the slideshow again and release it along with full source (GPL or similar). Haven’t had a chance to do the AS3 rewrite yet (even though I have written a different slideshow in AS3 since then… :P). Until the time comes for the AS3 rewrite, I’ll keep my ugly code to myself.

To view the slideshow in action, go here.

license issues

Obligatory disclaimer goes here. I’m not responsible if using this component causes your children to hate you, your dog to die, your house to burn down, or your hair to fall out. Or anything else for that matter. You have been warned.

I’m not releasing the source right now because I don’t feel like cleaning it up. Feel free to try to decompile the SWF if you really want to, but I’m warning you, it’s really probably a waste of time.

Please download the SWF to your own host and use it from there in stead of loading it from my machine. It’ll work better for everyone involved that way.

Otherwise, feel free to use the slideshow however you want. I’d appreciate a credit for it, but otherwise am not picky.

features

The slideshow will work on any computer with Flash 8 or newer installed. As of Sept of 2006, the numbers say that about 90% of net connected computers in the US, Europe, and Japan meet the requirement.

The application loads images externally. This means that the entire SWF is able to weigh in at under 4kb. The images you’re going to be rendering will likely be significantly larger than that. The slideshow begins once the second image is loaded, so even on slower connections, things will start rolling w/o a need to pre-load every image. If an image isn’t done downloading by the time the slideshow reaches it, it’ll just loop back to the beginning.

You can customize the delay between images in the HTML/Javascript you use to load the SWF. There are no fancy transitions to worry about choosing between and configuring, the images just cross-fade.

You can specify your list of images either via an external XML file or by embedding it in the HTML of the page itself (and using some Javascript magic that I’ll explain later).

instructions

First off, I have to make the disclaimer that I am a firm believer in FlashSWFObject. I will assume for now that you’re using it too if you have the chance. I’ll think about trying to explain how to make things work in MySpace and other crippled environments later (like not today).

  1. Make sure you have a modern version of SWFObject and the slideshow component.
  2. Build a list of the images you want to display.
  3. Put everything on the server.
  4. Mix it all together.
  5. Point people at your slideshow.

getting your stuff together

At the time of this writing, Geoff hasn’t made a SWFObject release in a while, but any time you’re planning on using it, it’s always worth looking to see if he’s somehow streamlined/upgraded the script since the last time. Download SWFObject.

I’m not planning on making any improvements to this version of my slideshow, so there isn’t any reason to check for updates from me. Download Slideshow. Unzip it. Yes, I realize that by zipping this file I have made it larger. I zip it in order to make downloading the file easier.

It’s generally recommended that you crop all of your images down to the same size. The slideshow just aligns everything to the top left corner of the SWF. So large images will be cropped and small images won’t fill the whole area.

Upload everything to the server. For my demo, I copied everything into a /slideshow folder and put the pictures in /slideshow/images.

write your image list

Whether you’re using an external image list (an XML file), or you want to embed the image list into your HTML and extract it with Javascript, you need to come up with a list of the images in question and the order in which they’re to be loaded. The format for an external file looks like this:

Painless enough, right? You can use relative paths (relative to wherever the SWF resides) or absolute URL’s, just as if they were image links in an HTML document. Now upload the XML file to somewhere that your SWF can see it (ideally on the same server, probably in the same directory). I put mine at /slideshow/images.xml in the example.

write your html

To put it all together, you want your html to look something like this:

Ok, that’s not the entire file, those are just the relevant bits. This is also not a SWFObject tutorial, so I won’t explain exactly what’s going on here. The important things to look at are the config variables at the beginning of the javascript block, which should be self explanatory. Load up the HTML file and if you did everything right, it should work quite happily.

extra credit – embedded image list

The data format for the image list is essentially identical if you’re embedding the list in your HTML, except you swap the images tag out for a div with an id (for html validity reasons, really):

This can go anywhere in the SWF, as long as it’s before the script tag where you do your SWFObject magic. Ideally, you’re just re-using the div that SWFObject is going to replace.

Then, you need to do some slightly different javascript when loading SWFObject. I did something more like this:

Again, I won’t explain exactly what’s going on here, but for those programmers out there, it should be pretty obvious. The one major difference between this embedded approach and the external one is that we’re using the slideshow div to hold the image list and are handling our error message manually.

Why go through the hassle to embed your image list? Well, it’s a tough call. But this way does load faster, especially if your server gets caught up trying to deliver the external XML file.

caveat – crossdomain security

I don’t really want to go into this whole issue, but should probably warn you about it. As of Flash 7, security improvements in the player make it a hassle to load files (images, xml, etc…) from remote servers. By remote, I mean somewhere other than wherever the SWF was loaded from. For more information on how to deal with this problem, take a look at Macrodobe’s tech note on the subject.

Leave a Reply

Your email address will not be published. Required fields are marked *