How to embed flash using U.F.O.

May 26th, 2007

This HowTo will explain the process of embedding flash elements that display placeholder content for flash-disabled browsers using U.F.O. while keeping your pages standards compliant… for noobs.

Everyone wants to use flash on their websites. But this can be very problematic. There are still a small percentage of users that have not installed the latest version of the flash plug-in, or have it enabled. This population usually consists of older people (on older machines), some company employee workstations, and school computers. The largest pitfall here is creating your main navigation in flash without a ‘backup’ navigation for those mentioned without flash.

It is almost NEVER a good idea to create any navigation in flash. Search engine bots cannot spider your site. This is critical if Search Engine Visibility is at all important to you or your client. Visitors cannot navigate beyond your landing page if they have flash disabled or not installed.

The very few occasions where it’s considered ok to use flash for any navigation in your site is:

• The fancy flash navigation is not the only way to click through your site (you have a visible html version of the same links somewhere else also).

• Your target audience is sure to have flash enabled, and you want to weed out those who don’t have flash at the same time.

• Your designing a site for a hard-headed client who doesn’t care about usability or if their visitors can navigate their site.

• You have an html version to seamlessly replace your fancy flash navigation in the case of those depraved visitors mentioned earlier.

Flash is best used as an attention catching apparatus that may hold the impression you were trying to create in your audiences’ memory through motion.

So you are sure you still want to use flash on your website? Then I’ll explain how to do it correctly using the UFO javascript library. U.F.O (or Unobtrusive Flash Objects) is a DOM script that helps you embed flash objects on your site, while displaying ‘non-flash’ content in its place when it detects a browser without flash… and it’s W3C Standards Compliant.

<div id=”header_placeholder”> </div>

<div id="header_placeholder"> <img src="/images/non-flash-header.png" alt="woot" /> </div>

<head> <title>woot</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="/js/ufo.js"></script> </head>

<head> <title>woot</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="/js/ufo.js"></script> <script type="text/javascript"> var FlashHeader = { movie:"swf/flash-header.swf", width:"650", height:"120", majorversion:"9", build:"0" }; </script> </head>

These parameters are required:

<head> <title>woot</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="/js/ufo.js"></script> <script type="text/javascript"> var FlashHeader = { movie:"swf/flash-header.swf", width:"650", height:"120", majorversion:"9", build:"0" }; UFO.create(FlashHeader, "header_placeholder"); </script> </head>

That’s it, now test it and enjoy sweet flashy standards compliant goodness.

*Other optional (flash) UFO parameters are:*

UFO specific optional parameters are:

More info here: http://www.bobbyvandersluis.com/ufo

Tags » flash javascript tutorial 12 comments »

12 Responses to “How to embed flash using U.F.O.”

Say Anything