How to Create a Flash Slide Show

Although I hardly ever implement flash files on my web sites, there are times when a flash slide will do a better job than using javascript. In this case I liked the fade effect plus the ease with which the slide show can be created without much knowledge of flash.


Here’s a church web site where I used several images in the flash header.
http://www.worldimpactcc.org

Description of flash slide show

The loader is a 1k “shell” swf (ActionScript only) that loads all images as external jpgs — one at a time — and cross-fades between them after a configurable amount of time. It uses XML to handle file names, directory structure, and other playback preferences. You can control the amount of seconds each image “holds” before moving to the next, speed up / slow down the cross-fade speed, and decide whether to show the images sequentially, or in random order.

Here are the steps for creating the slide show using flash:

1. Download the flash file
http://whatdoiknow.org/archives/001629.shtml

2. Unzip the files in the site folder of your computer.

You should have all these files in your folder:

images folder
.DS_Store
images.xml
slideshow_as2.fla
slideshow_as2.html
slideshow_as2.swf

If you open slideshow_as2.html it will show you an example flash slide within the folder.

3. Create new image files

Replace the files in the image folder with your own. If you want to save time make them the same size as the ones
you are replacing. If using different sized images make sure they are all the same size otherwise they will not appear correctly.

4. Edit the XML file

Replace the names of the files with the names of your own files. ie image1, image2 image3 etc.

5. Edit the size of the stage in the .fla file.

-If you need to edit the width and height of your images you will need to edit the .fla file.
-You will need FlashMX 2004 software or higher.
-The flash software also allows you to change the background of the stage to match the background color of your web page.
-Make sure you save and publish the edited file by replacing slideshow_as2.fla

Here’s a lesson on how to edit the .fla file
http://animation.about.com/od/2danimationtutorials/ss/2d_fla_lesson1_2.htm

6. Create a container tag on your web page.

Use CSS or table tags to contain your slide show.

7. Upload files to the server.

Remember to upload all flash files and web page to the server.

8. Test your slide show.

Check that your flash slide show is functioning correctly. You can adjust rotation time of the images, their fade speed and whether to show the images sequentially, or in random order by editing the XML file.

Here’s the flash slide show in action.

Comments

  1. Thank you very much! I was really looking for this…

  2. This is wonderful, and it works perfectly when I play the .swf file, but when i place it in an html page it doesn’t work – just the white background shows up, like the pictures aren’t loading. I tried changing the references to the jpgs and the xml file (in the swf) to include a / and I tried absolute urls, but nothing works. what am I missing? They aren’t progressive jpgs.

  3. For anyone having similar trouble, the slideshow and the html file it is imbedded in must be in the same directory. I was trying to have the slideshow in a subdirectory, and for some reason that won’t work – even if you change all the file references. Thanks for a geat, versitile program.

  4. Thanks so much! What a wonderful gift, and great tool to learn from.

    Did you develop the comments box and code yourself? I’d like to learn how to create one of these for my website!

    Thanks again,
    Ciao,
    Jordan Beckett

  5. Thank you very much, this script very best for my need…
    I hope God will give you much more ideas and happiness, because you always share the knowledge.

    1 question, why if the images in format .gif not shown in the flash?
    Thanks before.

    Best regards,
    H. Yudha

  6. I want to use this inside of an empty mc within a larger flash file so that when i roll over a button the slideshow will appear then disappear on roll out.
    Any help?

  7. I am having the same problem where I can play the swf file just fine, but when I try to embed it into an html page, I just get a blank box. The jpgs are not progressive, and I have the swf and xml file in the same directory as the html file. What am I doing wrong?

  8. The code works great on my computer but doesn’t load up when put on the server (not even the slideshow_as2.html or the slideshow_as2.swf). Please help.

  9. @Bolaji:

    I had the same problem, until I realized that it was calling for the “AC_RunActiveContent.js” java script. Once I put that on my server and directed the page to call that script, it started working fine. Hope this helps!

  10. OMG i have tried for 3 days straight to try and embed this with nooooo luck.

    here is the url for my sw file:

    http://coatofarmsnyc.com/images/flash/slideshow_as2/slideshow_as2.swf

    and here is the coded ive been playing with to try and embed the swf file. It totally works locally and even if opened directly in a browser but not if i try to embed. It prob a code issue… Can anyone PLS PLS PLS help me??????

  11. Sorry here is the code ive been try to use.

  12. Sorry here is the code ive been try to use.

  13. This is a great slideshow, but I too have the same problem that it won’t play when embedded in an html file. Is there a file I’m missing or a solution to this. Help is much appreciated.

  14. I am having this same problem. I’ve made sure the Script file is on my server, and that the code all points to where the script file is. It still will not play. HELP PLEASE????

  15. Please help. In Flash I changed the bgcolor and the size, then published the slideshow to get the updated html. All files work fine locally. But when embedded in a web page the images will not show. What am I missing?

  16. Prezicator says

    hy .. i have 1 problem..
    i changed the fla and the image and .swf file work fine but when i insert him in dreamweaver and make preview in broswer the flash dont work :(((( why ??? pls help :((

  17. Hi Prezicator,

    Read my new post on creating multiple flash slide shows on the same page..
    http://www.drostdesigns.com/how-to-create-multiple-flash-slide-shows-on-the-same-page/

    The flash image rotator I use there is much simpler to configure. Best Wishes!

  18. When serving a swf with xml data, it seems that the path is the issue when embedding your swf in an html document.

    Previewing a swf itself works fine because the xml and the swf reside in the same directory.

    Use the html file’s directory as the path to serve your data ( i.e. html in root, movie.swf is in the swfs folder (swfs/movie.swf), .xml is in the swfs folder. Path to xml from swf is now -> swf/yourfile.xml because the swf is loading data ‘from’ the html page where it now lives. 🙂 Hope this helps.

  19. FYI, when serving your images to the swf via the xml file, the path needs to change there too. Assuming the above is still true (html file in root, flash movie & xml file in ‘swfs’ folder and your images are in an images folder in the swfs directory ‘swfs/images’):

    calling the swf from the html file = swfs/yourmovie.swf

    calling the xml from the swf (embedded in hmtl page) = ‘swfs/yourfile.xml’

    calling the images from the xml file (served to the embedded swf) = ‘swfs/images/myimage.jpg’, etcetera

    Stumped me for hours on a couple of occasions in the past. 🙂

  20. Thanks Mathew for taking the time to provide your solutions.

  21. I prefer to use a flash 3rd software, i mean flash slideshow software such as Flash Slideshow Creator. Just with minites, a flash slideshow will be created.

    http://www.ipixsoft.com/flash-banner-tutorial.html

  22. Very useful. Just what I was looking for! Worked perfectly the first time.
    THANK YOU!

  23. This tutorial is exactly what I’m looking for but I need to add a description with the images, can anyone please assist me with that?

  24. thanks for the tutorial

  25. Thank you for the very helpful tutorial.

  26. i found an easy flash slideshow maker
    http://www.flash-slideshow-maker.com/
    free trial, about 50 free templates.
    to create slideshow, just need to add photos, select template, and publish. you can customize the template if you want.
    super easy!

  27. Thank you very much for your tutorial, easy to follow instructions are super clear! This is what I was looking for!

    God Bless You!

  28. Hi

    I replaced the images i wanted. So now its working. But i have to change the width, height. U infromed that i have to edit in .fla file ok. But how to open dat file. After adjusting all this. i want to add this flash images into html page. How to do that? Please send me an solution

  29. Which is principally particularly useful for what I’m search at now, thanks a bunch.

  30. Kelly Hoerner says

    For me the problem was a combination of proper Paths as mentioned above, and it only works when published to the server. I hate these little ‘technicality’ problems that cause wasted hours… 🙂

  31. it works very good. i need some help to contain this slideshow using table tags to be autoexcecute.

  32. Below link mentioned in the article does not work. Can you please re-post the link?

    http://whatdoiknow.org/archives/001629.shtml

  33. jully147 says

    Below link mentioned in the article does not work. Can you please re-post the link?

    http://whatdoiknow.org/archives/001629.shtml

    Thanks

  34. I don’t have knowledge about flash slides…where do I begin… I’ll keep on trying though. I’ll get there somehow I know.

  35. Good – I should certainly pronounce, impressed with your site. I had no trouble navigating through all tabs and related info ended up being truly easy to do to access. I recently found what I hoped for before you know it at all. Reasonably unusual. Is likely to appreciate it for those who add forums or anything, website theme . a tones way for your client to communicate. Nice task.

  36. This piece of writing is related to website programming is truly fastidious for me because I am website programmer. Thanks for sharing keep it up.

  37. Hi! Quick question that’s completely off topic. Do you know how to make your site mobile friendly? My weblog looks weird when browsing from my apple iphone. I’m trying
    to find a theme or plugin that might be able to resolve this issue.
    If you have any recommendations, please share. Appreciate it!

    • If your site uses WordPress install the WP Touch plugin at: http://wordpress.org/extend/plugins/wptouch/ it automatically transforms your WordPress website for mobile devices, complete with ajax loading articles and smooth effects when viewed from popular mobile web browsing devices like the iPhone, iPod touch, Android mobile phones, BlackBerry OS6+ mobile devices.

      Alternatively get a responsive design theme from Studiopress.com

Trackbacks

  1. […] 2007 I wrote an article on How to Create a Flash Slide Show. If you read the comments you’ll see some people ran into problems with […]

  2. […] have found this website that has gave me an insight into flash slideshows http://www.drostdesigns.com/how-to-create-a-flash-slide-show-2/ Category(s): […]

  3. […] Related articles How to create a flash slide show […]

Speak Your Mind

*