What is it
Site using the Flash Slideshow
The Flash Slideshow is a very small flash/actionscript application that you can use to display an arbitrary number of pictures with a small description. The images slide in right-to-left, pausing for a few seconds into view; the images are preloaded/cached in background, allowing for a smooth experience.
The Slideshow is very easy to use, extend and integrate – and more importantly, it’s absolutely free.
Slideshow Features
The Slideshow was designed to be first and foremost easy to use and extendable for your needs.
- Very small size – just ~23Kb when a font is included;
- Clean AS3 (actionscript 3) class that can be included, reused or extended for your project;
- slides are loaded dynamically using a very simple XML file format;
- slides load in the background; the slideshow won’t advance until the next image has loaded;
- slides are shuffled when loaded – useful for large sets;
- free for commercial and non-commercial purposes;
- licensed under GPL.
Using it
HTML
To embed the flash movie in a html, the easiest way is by using SWFObject library (included).
Simply edit the parameters as below:
<div id="flashcontent">Alternative content for users without flash</div> <script type="text/javascript"> var so = new SWFObject("slideshow.swf", "slideshow", "500", "200", "9", "#ffffff"); so.addParam("wmode", "transparent"); so.addVariable("datasource", "list.xml"); so.write("flashcontent"); </script>
The first two parameters shown in bold (500 and 200) represent the width and height of the movie. You may edit them as you wish. As the movie sets the Stage mode to “No Scale”, the movie won’t stretch when you change its width and height.
The third parameter you may set is the datasource. This can be a simple xml file, or some script that outputs XML if you want the list to be generated dynamically.
XML data source
The XML format is very easy too:
<slideshow> <item src="1.jpg" title="Slide 1 title"/> <item src="2.jpg" title="Slide 2 title"/> <item src="3.jpg" title="Slid3 3 title"/> </slideshow>
You can load JPEGs, GIFs and PNGs.
Actionscript
If you want to include the slideshow in your own application, you only need two lines of code:
var slideshow:Slideshow = new Slideshow("list.xml"); addChild(slideshow);
You can easily change from code the animation speed & smoothness, the time the slideshow pauses, the embedded font and whether the images are shuffled or not.
Limitations
The code was not tested under extended circumstances. Particularly, you should be careful if there are very few images in the slideshow (try to have at least three items) or if they are either very wide or very narrow. Ideally the slideshow should always display three images, one in center and two on its sides.
Extending
I’d be happy to see how you’re extending the slideshow. There is room for improvement, for example in generating automatic reflection, or in making the images clickable or allowing the scroll direction to be reversed.
I think it also has the potential to be integrated in CMS and blog software, so feel free to experiment.
Download
Get the slideshow, including the source code:
AS3 Slideshow (148.4 KiB, 13,570 hits)