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.

This entry was posted on Thursday, April 19th, 2007 at 11:56 am and is filed under Web Design . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

« Themed Search Engine Directories - Increase Incoming Links to Your Web Site
Web Site Content Guidelines »

27 Responses to “How to Create a Flash Slide Show”

  1. Eduard Says:
    May 1st, 2007 at 8:26 pm

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

  2. Ashley Says:
    October 3rd, 2007 at 3:48 pm

    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. Ashley Says:
    October 28th, 2007 at 2:58 pm

    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. Jordan Beckett Says:
    April 28th, 2008 at 10:38 am

    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. H. Yudha Says:
    August 28th, 2008 at 12:09 am

    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. Chad c Says:
    September 16th, 2008 at 1:53 pm

    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. Andrea Says:
    October 3rd, 2008 at 10:11 pm

    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. Bolaji Says:
    December 23rd, 2008 at 12:20 pm

    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. Sam Says:
    December 31st, 2008 at 7:30 pm

    @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. Enno Says:
    April 27th, 2009 at 12:07 pm

    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. Enno Says:
    April 27th, 2009 at 12:10 pm

    Sorry here is the code ive been try to use.

    ”

    “

  12. Enno Says:
    April 27th, 2009 at 12:11 pm

    Sorry here is the code ive been try to use.

    —

    –

  13. Greg Says:
    June 4th, 2009 at 9:38 am

    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. Jenny Says:
    July 19th, 2009 at 1:11 am

    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. Pat Says:
    July 21st, 2009 at 1:12 pm

    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:
    August 25th, 2009 at 1:28 am

    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. How to Create Multiple Flash Slide Shows on the Same Page Says:
    August 26th, 2009 at 8:23 pm

    [...] 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 [...]

  18. Herman Says:
    August 26th, 2009 at 8:29 pm

    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!

  19. Matthew Goodrich Says:
    September 3rd, 2009 at 3:30 pm

    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.

  20. Matthew Goodrich Says:
    September 3rd, 2009 at 3:48 pm

    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. :)

  21. Herman Says:
    September 4th, 2009 at 7:54 am

    Thanks Mathew for taking the time to provide your solutions.

  22. Donald Tan Says:
    September 10th, 2009 at 9:56 am

    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

  23. Felix Says:
    September 18th, 2009 at 9:44 pm

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

  24. Looking into flash slideshows… « amys blog Says:
    November 10th, 2009 at 3:45 pm

    [...] 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): [...]

  25. Geraldine Says:
    December 2nd, 2009 at 5:01 am

    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?

  26. Camnio Media Says:
    January 8th, 2010 at 9:25 pm

    thanks for the tutorial

  27. Technista Says:
    January 23rd, 2010 at 3:01 pm

    Thank you for the very helpful tutorial.

Leave a Reply

Links