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.
You can also embed a .swf
using SWFObject, an open source
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
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
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).
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
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.