Flash Slideshow Tutorial

Step 1

The slideshow at the left was created using Flash. However, you don't need to know how to develop in Flash to download and configure this Flash slideshow to display your own images! That's because the slideshow utilizes an easy to edit text-based XML file to configure the file names of the images that it displays. It is easy to configure the XML file and customize this slide show for your own website.

Download the .zip file that contains the .swf, the sample images, and the XML file: slideshow.zip (right-click).

Step 2

Extract the files and image folder shown below into your web site directory.
View the slideshow.htm page in a browser to get an idea of how the slideshow works.
The images folder contains the images the slideshow will display. The myimages.xml file lists the name of the image files. The slideshow.htm is a test demo page of the slideshow. The slideshow.swf is the Flash movie that is placed on the web page to play the slideshow.

Step 3

Open the images folder to view the names of the demo image files it contains. Copy your own images into the images folder. (You can delete the demo images if you like). Your slide show will work best if all your images have been optimized for the Web, are the same size, and have landscape orientation.

Step 4

View the XML file myimages.xml in a text editor, Notepad, or Adobe Dreamweaver. You'll notice some comments at the top of the file. These explain how to customize the timing and display of the slideshow. You can read these later if you need to change these functions. However, most often you will only need to configure the images displayed in the slideshow. Look below the comments and you'll see the XML code, shown below:

  Display Your Images

To configure the slideshow to display your images you will need to modify the image elements. Each image you want to display in the slide show must have a corresponding image element in the XML file. The image element denotes the path to the image file.

Edit your XML file to correspond to the images you saved in the images folder. Change the path value on each image element to indicate the path to your file name.

For example, if you have an image called flower.jpg in your images folder, modify the first image element in the XML file as follows:

If you have fewer image files, delete the extra image element(s). If you have more image files, add additional image elements. When you are done editing, save the myimages.xml file in the same folder as the slideshow.swf file. Do not change the name of the myimages.xml file.

Step 5

Test the slideshow.htm file saved on your computer. If you saved your images in the images folder and edited the myimages.xml XML file correctly, your very own slideshow will display!

Step 6

Add the slideshow to your own web page. If you are using Dreamweaver, select Insert > Media > Flash and navigate to the slideshow.swf file. If you are using a text editor, use the following code:

When you upload your files to the Web, be sure to upload the images folder (and the images contained within), slideshow.swf, and myimages.xml in addition to your web page files.

Have fun with your very own slideshow!!

FAQs

What size is the slideshow?
      The slideshow is 215 x 165. Resize your images to fit these dimensions for the best results.