The Problem with Flash

The problem with Flash...

Many of PixelMill’s templates include some sort of Flash animation or Flash components. Some of our customers have asked, “What if some of my visitors can’t view Flash – what do they see?” Unfortunately, they would see a big, blank space! This happens if your visitor doesn’t have the Flash player installed on their system. It may also happen if they have their security settings set to block ActiveX components. Another issue with Flash movies is that the code used to embed a Flash file into your web page does not validate according to the W3C HTML or XHTML specifications. That’s a huge concern for web developers who are trying to meet standards.

“What can I do?”

Other than deleting all that beautiful Flash work off your web site, you can venture into the arena of Flash detection. And the great news is never before has it been easier to work with Flash detection than it is now. Geoff Stearns has put together an elegant solution, FlashObject for detecting the Flash plugin and embedding it into your web page. If you’re concerned about your web site’s code validating as HTML or XHTML, his solution takes care of that problem as well!

Using FlashObject:

FlashObject is easy – and free – to use. Download FlashObject and import the flashobject.js file into your web site. Open the page that has the Flash movie. To import the javascript file, add this to the <head>…</head> area of your page:

Now find the code that embeds the Flash movie. Don’t delete it yet, because you’ll want to grab some of its parameters:

Add this code after the last </object> tag.

<div id="flashcontent">
This text is replaced by the Flash movie.
</div>

You can keep the div’s ID (“flashcontent”) or call it something else. Then, put your alternate content in between the <div id=”flashcontent”> and </div> tags. This can be simple text, or it can be HTML code for a replacement image… whatever you want! This even allows search engines to index that alternate content as well, which you couldn’t really do with just a plain Flash movie.

Add this code underneath your flashcontent div:
<script type="text/javascript">
var fo = new FlashObject("movie.swf", "mymovie", "500", "100", "6", "#003399");
fo.addVariable("variable", "varvalue");
fo.write("flashcontent");
</script>

This short bit of Javascript is what passes in the Flash movie parameters – from the original code, above - so that the FlashObject script can display the Flash movie properly. Here’s the breakdown:

new FlashObject(
"movie.swf", < the file name of the Flash movie
"mymovie", < this matches the “ID” from your Flash movie parameters
"500", < the width of the Flash movie
"100", < the height of the Flash movie
"6", < the version of the Flash Player that is required
"#003399"); < the background color
fo.addVariable("variable", "varvalue"); < this is only necessary if you are passing in variables to the Flash movie through the HTML code. You can duplicate this line if you are passing in several variables.
fo.write("flashcontent"); < replace “flashcontent” with the name of the div ID, if you’ve changed it

At this point, you can delete the original Flash code (the <object>…</object> tags and everything in between).

And that’s it! Visit Geoff's Site to learn more about the FlashObject’s specifications and additional variations, details, and examples.