WEB DEVELOPMENT BLOG

The Web Development Blog has moved to http://www.heidicool.com/blog/. Please visit me there to read the latest entries and to update your bookmarks and RSS feeds.

July 31, 2006

Valid code for using Flash animations on the Web

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.

Stumble It!

Posted by: Heidi Cool July 31, 2006 04:10 PM | Category: Heidi's Entries , Heidi's Entries , Heidi's Entries , How-to , XHTML

Posted by: hac4 (Heidi Cool) July 31, 2006 04:10 PM | Comments (1) | Trackback

© 2004-2008 Heidi Cool • Kevin Adams • Case Western Reserve University