Flash Detection Using SWFObject
Article ID: KB101619
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,
SWFObject
(formerly called 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 SWFObject:
SWFObject is easy – and free – to use. Download
SWFObject
and import the swfobject.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:
<script type="text/javascript" src="swfobject.js"></script>
Now find the code that embeds the Flash movie. Don’t delete it yet, because
you’ll want to grab some of its parameters:
<object classid="…” codebase="http://download.macromedia.com/...swflash.cab#version=6,0,0,0"
width="500" height="100" id="mymovie">
<param name="movie" value="movie.swf?variable=varvalue">
<param name="flashvars" value="variable=varvalue"> << Your code may not have
variables.
<param name="quality" value="high">
<param name="bgcolor"
value="#003399">
<embed …></embed>
</object>
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 so = new SWFObject("movie.swf", "mymovie", "500", "100", "6", "#003399");
so.addVariable("variable", "varvalue");
so.write("flashcontent");
</script>
This short bit of Javascript is what passes in the Flash movie parameters –
from the original code, above - so that the SWFObject script can display the
Flash movie properly. Here’s the breakdown:
new SWFObject(
"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
so.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.
so.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 SWFObject’s specifications and additional
variations, details, and examples. (For example, you can add on to the code if
you want wmode set to transparency, etc. -- Geoff's site explains it in more detail.)
Authors and Contributors:
Corrie Haffly
Was this helpful?
Please rate this article:
Email address: (not required)
(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. You're email address is NOT REQUIRED to submit a comment.)
Comments: (How can we improve this article?)
Clicking "Submit" will not clear this page.
link to this page:
http://www.pixelmill.com/support/al0/kb101619.htm
permalink to this article:
http://www.pixelmill.com/support/kb101619.htm
Back to top