Web Design Discussion

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.