Cool

Update: Since this was written, SWFObject2.0 has become the recommended method for embedding Flash files. Learn more at "Embedding YouTube Videos the Standards Compliant Way—SFWobject 2.0." (This method can be used for a variety of .swf files, not just video.)

If you've ever tried to include a flash animation in your Web site you may have found that either your movie doesn't show up, your code doesn't validate, or both. Or perhaps you have found that while your movie appears on your page when viewed in Browser X, it does not when viewed in Browser Y.

Sometime ago I encountered the same problem and after searching around the Web for various solutions I came across the following. It works in a variety of browsers and is much simpler than the code generated by Flash or Dreamweaver.

To use this simply replace the code you are currently using with the following and change filename.swf and filename.jpg to the appropriate names for your animation and image files, and change the dimensions to those of your movie. Users who can't use Flash will see your .jpg file instead, so it is important to include this extra element*.

HTML code for including a Flash animation

<object type="application/x-shockwave-flash" data="filename.swf" width="360" height="324" > <param name="movie" value="filename.swf" /> <img src="filename.jpg" width="360" height="324" alt="slideshow" /> </object>

*Creating the alternative image

If your animation is a simple slide show, you probably already have an image to use. Just make sure to resize it to the same proportions as your movie. If your Flash file was created from vector drawings and you don't have a still image you can create one by taking a screen capture while viewing the animation itself.

Screen capture for Windows

While viewing the animation, click "ctrl" and "print screen" at the same time. This will take a picture of your window and store it on your clipboard.

Open a new file in Photoshop or your favorite image editor and paste (ctrl-v) in your image. Crop out any extra bits, resize the image to match your .swf, flatten layers, then save to create a .jpg.

Screen capture for Macintosh OS X

Open the "Grab" application found under utilities in your applications directory. Under the capture menu choose "window," the click the blue "choose window" button in the pop-up box.

Go to your animation, and when you come to the part you would like to use for your image, just click anywhere in the window. This will take a picture of your window and open it as an unnamed .tiff file in the Grab program. Save the file with your name of choice.

Open the .tiff file in Photoshop or your favorite image editor. Crop out any extra bits, resize the image to match your .swf, flatten layers, then save it as a .jpg file.