How to Create a Flash Slide Show

Recently I was asked to create a couple of banners that fade into each other. They would be placed at the top of a site I was
building to make it more interesting for visitors.

Normally I outsource my flash work to a flash developer but I decided to research the web to see if there was an alternative way to achieve this affect.


I was pointed to flash slide show source files where I could use static images (not flash images) to accomplish the fade effect.

See the effect of the flash slide show

Features

  • Rotate as many images as needed
  • Control amount of seconds each image rotates
  • Speed up or slow down cross-fade speed
  • Show images sequentially or randomly
  • Adjust width and height attributes of images
  • Don’t need to know flash
  • Use static images only

Steps to create flash slide show

1. Download zipped file from site
http://whatdoiknow.org/archives/001629.shtml

2. Unzip files (use free trial version of Winzip.com)

3. You will now have a folder named “slideshow_as2” that contains these files:

  • images folder (contains sample images)
  • images.xml file
  • slideshow_as2.html (you can rename this file to whatever you want)
  • .DS_Store file
  • slideshow_as2.fla file
  • slideshow_as2.swf file

4. Replace sample images in images folder with your own

5. Replace names/paths of image files with your own in the images.xml file

6. Adjust the width and height of your images in both the “param” and “embed” elements
in “slideshow_as2.html” (size of all images should be the same).

7. Adjust size of “slideshow_as2.fla” to the same size as your images.
You will need to open this file in Flash MX 2004 or higher and adjust the size settings in Properties.

8. Export “slideshow_as2.fla” and save the adjusted movie as slideshow_as2.swf file

9. Insert this html code where you want the flash slide show located on your web page
(in my case I placed it within the header div tags ie


<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="432" height="288" id="slideshow_as2" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="slideshow_as2.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
<embed src="slideshow_as2.swf" quality="high" bgcolor="#000000" width="432" height="288" name="slideshow_as2" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

Alternatively you could insert the html code inside a table cell.

10. Upload all files to your server.

11. Test your web page to make sure the flash slide show is working correctly.

Tip

If your customer doesn’t have the flash plug-in installed he will be prompted to do so when first viewing your web site containing the flash slide show.

It appeared correctly when I viewed it in Internet Explorer 6 but was prompted to download the flash plug-in when I viewed it in the Fire Fox browser.

Conclusion

If you need to create images that morph into each other and don’t know flash, then follow the steps above and you will “wow” your customers.

Resources

Javascript Slide Show

Random Image Rotator

Comments

  1. Hi

    Your slide show sample was good.
    How can I implement the following.
    1. A caption which would also appear by the side of the picture in the slide show.
    2. Each picture would have a specific caption.
    3. On the last slide, would like to redirect to a new page.

    Would highly appreciate your comments on this.

  2. Hi

    This is brilliant! Can one adapt the XML to point to an IMAGE folder instead of specifying each image and path?

    Or can this flash script get the images from a MySQL table using PHP?

    Any ideas/references will be appreciated.

    Anton

  3. is there any flash player that display a slide show using a certain folder of images as the source of display without renaming the images to 1.jpg 2.jpg 3.jpg … and just load the image automatically? cos if u have a lot of image u will have to rename them all 1.jpg up to 1000.jpg and that’s not easy. and also you will need to edit the xml every time you upload new image. any sugestions? thanks šŸ˜›

  4. Hi,

    I uploaded more images but the slide show gets stuck on one image and won’t complete the circuit or start over. I’ve checked to make sure Any suggestions? Thanks in advance.

  5. Hi, Your slide show sample was good.
    How can I implement the following.
    I want to embeeded in the same web page three swf (flash files.
    Any ideas/references will be appreciated.

    Angelos

  6. Magmatrix says:

    This version is much better:
    http://cyrilgodefroy.com/en/products/slidesimple.php

    – it scales images as needed
    – you don’t have to edit the fla file for it to load your images properly
    – you can add a title and description if you want, and it will roll down as an transparent overlay

  7. Hi

    I did all steps mentioned above. When i import flash file into html code. its not working.Please give an solution

  8. What’s up, its pleasant post about media print, we all know media is a fantastic source of facts.

Speak Your Mind

*