Unobtrusive Flash Objects (UFO) v3.22

UFO is officially deprecated. SWFObject 2.0 is UFO's successor and can be downloaded from Google Code.

UFO is a DOM script that detects the Flash plug-in and embeds Flash objects (files with the .swf extension). It has its roots in the Web Standards community and is designed to support W3C standards compliant, accessible and search engine friendly web design. It also contains several features and best practice techniques that other scripts currently don't have. UFO is free, licensed under the CC-GNU LGPL and an Open Source Flash Project.

Download

UFO v3.22 JavaScript file and sample page or UFO v3.22 ZIP file (required if you enable the Macromedia express install feature). New features and changes are listed in the change history document.

Features: 13 reasons why you should use UFO

  • UFO enables you to create accessible and search engine friendly Flash content. UFO follows the principles of progressive enhancement, which means that you design and build a web page with multiple user scenarios in mind. You start with creating a web page for the biggest target audience possible, by including accessible and search engine friendly replacement content (like text, links and images in (X)HTML) for both users who don't have the appropriate Flash plug-in or JavaScript support (e.g. text browsers, mobile devices) and automated tools like web crawlers. UFO automatically enhances your web page by swapping the replacement content for a Flash movie in all cases where Flash and JavaScript support is sufficient. Please note that UFO also fully supports Flash's built-in accessibility features.
  • UFO is as standards compliant as it can be; it uses the valid object element over the proprietary and invalid embed element, it prefers W3C DOM methods over proprietary methods like innerHTML, but both as long as a fully functioning feature set allows it to:
    • UFO uses W3C DOM methods to insert the object element for all Gecko based browsers (e.g. Firefox, Mozilla, Netscape) and all other browsers that use both the Netscape plug-in API (e.g. Opera and Safari) and an XML MIME type.
    • UFO uses innerHTML to insert the object element for Internet Explorer.
    • In all other cases (e.g. Safari, Opera using MIME type text/html, especially to ensure that older versions work correctly using all parameters) UFO uses innerHTML to insert the proprietary embed element. Please note that in this last case your pages will not contain valid (X)HTML code, but will pass the W3C validation tests because UFO generates the Flash object's (X)HTML code with JavaScript.
  • UFO supports MIME type application/xhtml+xml. Please note that browser support for MIME type application/xhtml+xml itself may vary and that Internet Explorer doesn't support MIME type application/xhtml+xml at all.
  • UFO follows JavaScript best practices and is completely unobtrusive, which means that all (X)HTML, CSS and JavaScript code is fully separated from each other (no inline JavaScript). All replacement and load actions happen as soon as the Document Object Model of a page is available. UFO's domLoad function uses Mozilla's and Opera's DOMContentLoaded event listener and a timer to simulate this behavior for all other browsers. UFO also uses dynamic style sheets to temporarily hide content and avoid a possible short Flash of visible replacement content before the content is replaced (e.g. in Internet Explorer).
  • UFO supports most modern web browsers, including Firefox, Mozilla, Netscape 7+, Opera and Internet Explorer 5+ on Windows and Firefox, Mozilla, Netscape 7+, Opera and Safari on the Mac. Please note that UFO has dropped its support for Internet Explorer 5 on the Mac. All unsupported browsers show the default replacement content.
  • UFO supports automatic ActiveX control activation in the latest versions of Internet Explorer which handle plug-ins differently as a result of the Eolas patent ruling.
  • UFO supports HTTPS without the display of a confusing Security Information popup in Internet Explorer 6.
  • UFO uses encapsulated, reusable functions to avoid naming collisions with other functions that you may include in your web pages. You can just add UFO to your existing pages without having to worry to overwrite existing onload events.
  • You can reuse UFO to embed multiple Flash movies, that are published for different Flash player versions and with a different set of parameters.
  • UFO automatically performs major and release version tests based on the Flash movie's publish settings. All tests comply with Adobe's best practices for future-proofing Flash Player detection scripts and use JavaScript only (no sniffer SWF or VBScript).
  • UFO supports Adobe's express install feature. When express install is enabled and a user doesn't have the required Flash plug-in version, but does have a Flash player version 6.65 or higher, a modal window will overlay the web page and offer the possibility to express install the Flash plug-in. Please note that express install is disabled by default and that you can enable it by adding xi:"true" to your Flash Object definition and by placing ufo.swf either in the same directory as the (X)HTML file calling it, or in a directory of choice and specifying its location with the optional ximovie parameter. In case the express install process is cancelled or fails, the modal window is automatically removed and the replacement content is shown. You can use the optional xiurlcancel and xiurlfailed parameters to route express install cancellations and failures to separate URLs. You also have the option customize the express install Flash movie (you can find the ufo.fla file in the ufo.zip file).
  • UFO offers you the option to automatically add dynamic style sheets to set the width and the height of the UFO container element by using the optional setcontainercss parameter. To make things even easier, in case a width of 100% is specified, this parameter will also set the margin-left, margin-right, padding-left and padding-right of the body element to 0. In case a height of 100% is specified, it will set the margin-top, margin-bottom, padding-top and padding-bottom of the body element to 0, set the overflow of the html element to hidden (to avoid scrollbars) and ensure Firefox'/Mozilla's height to be 100% instead of the default height of around 100px, by setting the height of both the html and the body element to 100%. These last features are especially aimed for those who like to create Full Browser Flash the easy way, while not being bothered by conflicting CSS rules for a possible alternative (X)HTML version of the website.
  • UFO is easy to use. It only takes 4 simple steps to build a web page that contains an unobtrusive Flash movie.

How to use

STEP 1: Create an (X)HTML page with a placeholder element (any block element) for your Flash movie. Give this element a unique id and add replacement content.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>Unobtrusive Flash Objects (UFO) | Sample page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  </head>
  <body>
    <div id="ufoDemo">
      <p>Replacement content</p>
    </div>
  </body>
</html>

STEP 2: Link the UFO script in the head of your (X)HTML page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>Unobtrusive Flash Objects (UFO) | Sample page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="ufo.js"></script>
  </head>
  <body>
    <div id="ufoDemo">
      <p>Replacement content</p>
    </div>
  </body>
</html>

STEP 3: Per Flash movie, create a Flash movie definition object that contains all required and needed optional Flash movie parameters.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>Unobtrusive Flash Objects (UFO) | Sample page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="ufo.js"></script>
    <script type="text/javascript">
    var FO = { movie:"swf/myMovie.swf", width:"300", height:"120",
      majorversion:"6", build:"40" };
    </script>
  </head>
  <body>
    <div id="ufoDemo">
      <p>Replacement content</p>
    </div>
  </body>
</html>

Please ensure that there is no comma behind the last name:value pair. UFO uses a JavaScript object literal notation. The advantage of this approach is that you have more visibility in the property name:value pairs and that it is a user-friendly mechanism to pass any amount of parameters you need in any order you want.

STEP 4: Per Flash movie, call the UFO.create function with the Flash movie definition object and the id of the placeholder element as parameters.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>Unobtrusive Flash Objects (UFO) | Sample page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="ufo.js"></script>
    <script type="text/javascript">
    var FO = { movie:"swf/myMovie.swf", width:"300", height:"120",
      majorversion:"6", build:"40" };
    UFO.create(FO, "ufoDemo");
    </script>
  </head>
  <body>
    <div id="ufoDemo">
      <p>Replacement content</p>
    </div>
  </body>
</html>

Parameters

UFO uses Macromedia's Flash OBJECT and EMBED tag attributes as parameters. The following parameters are required:

  • movie
  • width
  • height
  • majorversion
  • build

The following parameters are optional:

UFO specific optional parameters:

  • xi:"true"
  • ximovie:"[URL of express install Flash movie]"
  • xiwidth:"[width of customized express install Flash movie]"
  • xiheight:"[height of customized express install Flash movie]"
  • xiurlcancel:"[URL of cancel page]"
  • xiurlfailed:"[URL of failed page]"
  • setcontainercss:"true"

Test & sample pages

Test pages using MIME type text/html:

Test pages using MIME type application/xhtml+xml:

FAQ

Adobe Flash player tech notes you should be aware of:

Q Does UFO fix the Active Content issues in the new Internet Explorer update?
A Yes, it does.

Q How do I fix a "Line 56: Out of Memory" error, when unloading a page in Internet Explorer using Flash Player 9 and multiple SWFs using ExternalInterface?
A This is a Flash Player 9 bug, a more detailed description can be found here. You can fix this issue by adding the following JavaScript code in the head of your (X)HTML page under your UFO definition:

<script type="text/javascript">
function cleanupFP9IELeaks() {
  __flash_unloadHandler = function() {};
  __flash_savedUnloadHandler = function() {};
}
if (typeof window.attachEvent != "undefined" && UFO.uaHas("ieWin")) {
  window.attachEvent("onbeforeunload", cleanupFP9IELeaks);
}
</script>

Q Why doesn't fscommand work in Internet Explorer?
A In order to make fscommand work in Internet Explorer Adobe recommends to add a block of VBScript to capture and forward the FSCommand calls to JavaScript. However VBScript doesn't work anymore when a Flash movie is inserted using innerHTML, like UFO does. Fortunately you can also use JavaScript instead of VBScript to catch the FSCommand calls. A small downside is that it uses proprietary attributes, however wrapped in conditional comments you will keep your code valid. A sample page can be found here.

Q How do I prevent Internet Explorer from crashing when a <base> tag is defined?
A Including a closing </base> tag will prevent this bug in IE being triggered. For HTML 4 compliant pages (a closing BASE tag is forbidden under HTML 4), you could use IE conditional comments to keep your HTML valid and still include a closing BASE tag for HTML 4 documents: <base href="http://www.yourdomain.com/"><!--[if IE]></base><![endif]-->

Q Why doesn't Firefox/Mozilla show my Flash movie with a 100% height?
A Firefox/Mozilla in standards compliant mode (or: using a valid DOCTYPE) interprets percentages in a very strict way, to be precise, the percentage of the height of its parent container, which has to be set explicitly. To enable a 100% height, add the following CSS style rules to your web page: body, html { height:100%; }. UFO also offers a handy shortcut, just add the setcontainercss="true" parameter to your Flash definition object.

Q UFO is currently around 10.7 Kb, why don't you provide a smaller, compressed version of UFO?
A These days most web servers will deliver UFO using a compress/decompress mechanism like gzip, which reduces the size of UFO to a respectable 3.4 Kb. Using a mechanism like gzip, the gains of JavaScript compression are minimal. Besides this, UFO's source code is deliberately kept uncompressed to keep it readable, so developers can easily modify UFO's source code to their needs.

Q Now Macromedia is acquired by Adobe, shouldn't you update UFO's URLs, e.g. the ones used for express install?
A No, no official statement has been made by Adobe to update URLs yet.

Q Why doesn't UFO support Internet Explorer 5 on the Mac?
A It has unsufficient DOM scripting capabilities to support UFO, Microsoft has discontinued its support declaring it a dead browser, its users are on the endangered species list, its users can experience the alternative content (if you have applied the principles of progressive enhancement).

Q Who uses UFO?
A UFO is used in thousands of websites all around the world. A few examples are London fashion Week, Yahoo! Tech and TomTom. UFO is recommended by many people and organizations, amongst them are The Web Standards Project, Jeffrey Zeldman and UltraShock.

Archived versions

Feedback

I would like to thank everybody who has sent feedback on UFO, it is greatly appreciated. Any comments, bugs or suggestions, please feel free to send me an email.