Sam's Blog

Flash Slideshow with Captions via XML

Posted by rumi on August 15th, 2006 — Posted in Flash, Web

I have been working on a flash slideshow on and off and a couple of days ago I found http://whatdoiknow.org/archives/001629.shtml which does almost everything I wanted but not quite, so I got action-scripting. To see a demo of what I have done click the play button below.
 

The original slideshow by Dominey has a nice feature of loading the image location and various fade-out and timer values from and XML file so that the user can control most things from the XML instead of going into Flash to change things. What I needed was a way of displaying a caption for each photo and then to fade-out these captions with the photos.

I have extended the XML schema for the slideshow to include the text for each caption and also the position where the text is to be displayed and its alignment in the textfield. There are also variables for controlling the font-size,font-colour and the width and height of the textfields that display the captions. Here is the XML file which controls the above slideshow:

<!-- 'timer' :: number of seconds between each image transition 'order' :: how you want your images displayed. choose either 'sequential' or 'random' 'looping' :: if the slide show is in sequential mode, this stops the show at the last image (use 'yes' for looping, 'no' for not) 'fadeTime' :: velocity of image crossfade. Increment for faster fades, decrement for slower. Approximately equal to seconds. 'xpos' :: _x position of all loaded clips (0 is default) 'ypos' :: _y position of all loaded clips (0 is default) 'fontSize' :: Font Size of the captions (16 is default) 'fontColour' :: Font Colour of the captions in hex (0xffffff is default, white) 'textfieldWidth' :: Width of textfield containing the caption (200 is default) 'textfieldHeight' :: Height of textfield containing the caption (100 is default) --> <gallery timer="3.2" order="sequential" fadetime="1" looping="yes" xpos="0" ypos="0" fontSize="16" fontColour="0xffffff" textfieldWidth="120" textfieldHeight="80"> <image path="http://rumi.studio2pi.com.au/gallery2/d/2102-2/dsc_2751.jpg" text="Organic Switzerland" text_align="left" x="20" y="540"/> <image path="http://rumi.studio2pi.com.au/gallery2/d/2088-2/DSC_1695.jpg" text="Sunflowers Spain" text_align="right" x="250" y="540"/> <image path="http://rumi.studio2pi.com.au/gallery2/d/2080-2/DSC_0983.jpg" text="Windy Holland" text_align="left" x="22" y="540"/> <image path="http://rumi.studio2pi.com.au/gallery2/d/2095-2/_dsc2428.jpg" text="Riding in Germany" text_align="right" x="250" y="540"/> <image path="http://rumi.studio2pi.com.au/gallery2/d/2152-2/DSC_4512.jpg" text="Monkey Do India" text_align="left" x="22" y="540"/> <image path="http://rumi.studio2pi.com.au/gallery2/d/2134-2/DSC_4023.JPG" text="Cycling India" text_align="right" x="250" y="540"/> <image path="http://rumi.studio2pi.com.au/gallery2/d/2143-2/DSC_4187.JPG" text="Indian Mahoot" text_align="left" x="22" y="540"/> <image path="http://rumi.studio2pi.com.au/gallery2/d/2105-2/DSC_3040.jpg" text="Indian Tailor" text_align="right" x="250" y="540"/> </gallery>

It would be nice to be able to also specify the font from the XML file but since the font has to be embedded into the swf I don’t think that can be done. It would also be nice to have a way of masking/resizing the frame to better handle different size images, right now the slideshow is assuming the images are all the same size as the stage size in the fla, it still works for different size images but it will crop images or leave unsightly blank spaces around images.

Download the source: slideshow_rumi.fla.zip

5 Comments