Embedding .swf Files into HTML Pages

Flash Builder automatically creates HTML wrappers for embedding Flash Player’s content. When you create a new project, it contains a directory called html-template that has an HTML wrapper index.template.html that Flash Builder uses as a container for your .swf and copies into the bin-debug (or bin-release) folder each time your Flex application is rebuilt.

If you’d like to embed your .swf into an HTML page that includes some content specific to one of your existing HTML pages, you’d need to merge your HTML page with the file index.template.html and keep it in the html-template folder.

If you need to embed this HTML code into another Flex application, you can create an iFrame, copy this generated HMTL, specify the coordinates and size of this iFrame, and your .swf is displayed next to other HTML content that was created in your organization using legacy techniques. Just remember that you are now dealing with two web pages in one, which technically turns it into a portal. The issues of the mixed HTML/Flex portals are described in Chapters 7 and 8.

Adding a .swf to HTML with SWFObject

You can also embed a .swf using SWFObject, an open source utility (just one small JavaScript file) that offers a simpler way to include .swf files into an HTML page. Using Adobe Express Install, SWFObject detects the version of Flash Player installed on the client’s machine. SWFObject can work in static HTML using the <object> element. It also supports dynamic publishing with JavaScript, which allows passing parameters to a .swf file as key/value pairs. Finally, it opens up opportunities for alternative content for the users who have web browsers without Flash Player plug-ins, as well as for added text to be picked up by the search engines.

A simple example contrasts the standard Flash Builder approach and SWFObject. Say you have this application called HelloSWFObject.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
   <mx:Text x="24" y="28" text="Hello" fontSize="20"/>
</mx:Application>

Flash Builder generates HelloSWFObject.swf and automatically embeds it into HelloSWFObject.html. Opening HelloSWFObject.html reveals more than 50 lines of code that take care of embedding the .swf.

Now try the solution offered by SWFObject. First, download and unzip into some folder the file swfobject_2_2.zip from http://code.google.com/p/swfobject/. Copy HelloSWFObject.swf there, too.

To generate an HTML wrapper, download swfobject_generator_1_2_air.zip, a handy AIR utility from SWFObject’s site. After unzipping, run the application swfobject_generator (Figure 4-2).

SWFObject’s HTML generator

Figure 4-2. SWFObject’s HTML generator

Select the “Dynamic publishing” method, enter HelloSWFObject.swf in the Flash (.swf) field, and the name of the HTML container ID that will be used as an ID of the <div> area where your .swf will reside. In the “Alternative content” section, enter some keywords that you want to expose to search engines, and click the Generate button.

In the lower portion of the window, you’ll find HTML that looks like Example 4-1.

Example 4-1. HTML wrapper generated by SWFObject

<!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></title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <script type="text/javascript" src="swfobject.js"></script>
      <script type="text/javascript">
         var flashvars = {};
         var params = {};
         var attributes = {};
         swfobject.embedSWF("HelloSWFObject.swf", "myAlternativeContent",
                 "200", "300", "9.0.0", false, flashvars, params, attributes);
      </script>
 </head>
 <body>
    <div id="myAlternativeContent">
       <a href="http://www.adobe.com/go/getflashplayer">
            <img
src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
    alt="Get Adobe Flash player" />
    Hello Flex O'Reilly Yakov Anatole Victor and other keywords for search engines
      </a>
   </div>
   <script type="text/javascript" src="swfobject.js"></script>
   <script type="text/javascript">
      var flashvars = {};
      var params = {};
      var attributes = {};
      swfobject.embedSWF("HelloSWFObject.swf", "myAlternativeContent",
                 "200", "300", "9.0.0", false, flashvars, params, attributes);
   </script>
 </body>
</html>

Moving the JavaScript to the bottom of the page results in better performance of the page. Look for more tips to improve the performance of a website at http://developer.yahoo.com/performance/index.html#rules.

You are ready to run your application. The only issue with this solution is that you’ve lost the history management that was taken care of by Flash Builder’s HTML wrapper. SWFObject 2.2, however, offers support for Flex history and deep linking; you can find an example of this solution published by Oleg Filipchuk at http://olegflex.blogspot.com/2008/06/swfobject-2-flex-template.html.

Get Agile Enterprise Application Development with Flex now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial