Loading... Please Wait...
Loading... Please Wait...

Search Support

Search our knowledgebase? Enter keywords or article id:

> go to search support


Support Index


Help and Support

PixelMill Live Help

Search

Enter keyword or id#:




Browse


Promotions


Quick Links

Printable Article

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.)


Was this helpful?

Please rate this article:

Not helpful Very helpful
1 2 3 4 5 6 7

Email address: (not required)

(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. Your 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://shop.pixelmill.com/support/al0/kb101619.htm
permalink to this article: http://shop.pixelmill.com/support/kb101619.htm

Back to top



PixelMill EDU

Introducing...

PixelMill EDU™ is an innovative and proprietary online training series designed to aid the do-it-yourself Web builder in transitioning to new Web editors, coding standards, and Web technologies.

Webinars and Seminars:

FrontPage to SharePoint Designer Series
This is a 6-Week series designed to give you strong exposure to the new SharePoint Designer web editor and interface, along with examples of working with Windows SharePoint Services and tips for transitioning from FrontPage.
Register Now!

Tables to Tableless CSS Series
This is a 6-Week series designed to help you transition from building Tables-based Web site layouts to working with CSS to edit and build Tableless Web site layouts. For all Web builders using Dreamweaver, Expression Web, or any other web editor.
Register Now!

FrontPage to Expression Web Series
This is a 6-Week series designed to give you strong exposure to the new Expression Web software and interface, along with tips for transitioning from FrontPage.
Register Now!

Learn more and register!

ADVERTISEMENT
adventisement

Social


Contact Us

Phone: (866) PIXELMILL
(866) 749-3564
Int'l phone: 1 (530) 297-3662

105 E St, Suite 310
Davis, CA 95616 USA

Payment Methods

Visa Mastercard American Express Discover PayPal Personal check Purchase Order