Home · Web Design · SWFObject

SWFObject

SWFObject is the new (and probably best) way of inserting flash movies. Not only does it include a built-in mechanism to detect if the client has support for flash, but it is also the most efficient way to get around IE's Click to activate and use this control crap.

It was created by Geoff Stearns, and honestly, I think no one can explain what SWFObject is better than him. Here's a quote from his blog.

SWFObject is a small Javascript file used for embedding Adobe Flash content. The script can detect the Flash plug-in in all major web browsers (on Mac and PC) and is designed to make embedding Flash movies as easy as possible. It is also very search engine friendly, degrades gracefully, can be used in valid HTML and XHTML 1.0 documents*, and is forward compatible, so it should work for years to come.

Some of you may be wondering, "Why should I care? What does SWFObject have thats better than using the good old <object> and <embed> tags?"

Well, consider this.

Not only does SWFObject provide a built-in mechanism for detecting if the user has flash support, but it also has a built-in fallback mechanism for users who do not have flash installed or enabled. It will display the content within the specified div tag if no flash support is present! And since SWFOject is JavaScript based, it also allows you to easily pass (dynamic) variables directly into the flash movie.

The syntax

Setting up SWFObject to use on your site is quite simple. The first step, is to call to "swfobject.js" via a <script> element in your head section.

<script src="swfobject.js" type="text/javascript"></script>

Next, insert this small script in your code where you wish for the flash movie to be inserted.

<script type="text/javascript">
var so = new SWFObject();
<script>

Next, the SWFObject object requires six parameters. And these are: swf, id, width, height, version#, and background-color. There are other optional parameters too, but I am not mentioning these here. See the example below.

<script type="text/javascript">
var so = new SWFObject("optusout-movie.swf", "optusout-movie", "640", "161", "7", "#BDE376");
<script>

And to have the flash movie display on screen, we will use the JavaScript write() method.

<script type="text/javascript">
var so = new SWFObject("optusout-movie.swf", "optusout-movie", "640", "161", "7", "#BDE376");
so.write("flashcontent");
<script>

And note—we inserted a parameter called "flashcontent". This is literally the ID value of the div tag where our flash movie will display. This parameter can be whatever you wish, just make sure it matches the ID value of the div where you want your movie to be placed.

And last but not least, if you place content inside of this div tag SWFObject automatically uses it as alternative content, if flash is not supported on the users current machine.

<div id="flashcontent">
<img src="images/homepage10.jpg" alt="OptUsOut slpash image" /<
<br />
<p>This web site requires Flash player version 9.
<a href="http://www.adobe.com/go/getflashplayer" onclick="target='_blank';">Download it here</a>.</p>
</div>

<script type="text/javascript">
var so = new SWFObject("optusout-movie.swf", "optusout-movie", "640", "161", "7", "#BDE376");
so.write("flashcontent");
<script>

I have to say, I'm impressed.

Want to see this in action? Here is a design that I worked on a while back, which never got put into production. If you click on the "products" page, you'll see that it shows alternative content for the flash movie. And this is only because the script can't locate the flash movie, I purposely commented out the SWFObject variables.

Related Articles

Related URLs

Oct 15, 2007

Comments

Sheetal Varma Apr 02, 2008

What if swfobject embeds a akamaizer videos, flash files and we need to display No FLash if flash is not available on user machines?

Write a comment

* = required field

:

:

:


4 + 3 =