Web Design Discussion

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

This entry was posted on Wednesday, July 19th, 2006 at 3:08 pm 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.