Programming Flex 3: Chapter 20, Embedding Flex Applications in a Browser
Pages: 1, 2, 3, 4, 5, 6, 7, 8, 9

Note: The Eolas patent is a patent awarded in 1998 to Eolas Technologies, a U.S. company. The patent ostensibly covers embedding content (such as Flash Player content) in HTML pages. Eolas sued Microsoft for infringement on the patent because Microsoft didn't license its embedding technology from Eolas.

Clearly, sometimes dynamic publishing is advantageous, and we encourage you to learn more about it by reading the SWFObject documentation. However, for most purposes static publishing is a better option, and it is the option we will look at in more detail in this chapter.


This excerpt is from Programming Flex 3. If you want to try your hand at developing rich Internet applications with Adobe's Flex 3, and already have experience with frameworks such as .NET or Java, this is the ideal book to get you started. Programming Flex 3 gives you a solid understanding of Flex 3's core concepts, and valuable insight into how, why, and when to use specific Flex features. Learn to get the most from this amazing and sophisticated technology.

buy button

To use static publishing follow these steps:

  1. Place the swfobject.js file in the same directory as your HTML page and .swf file.
  2. Use the nested object tag markup discussed earlier in this chapter to embed the Flex application.

    Your HTML page might look like the following:

    <!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>Flex Example</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>
    <body>
        <div>
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
                    width="400" height="400">
                <param name="movie" value="Example.swf" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="Example.swf"
                        width="400" height="400">
                <!--<![endif]-->
                    <p>This site is best viewed as a Flex application, which requires
                       Flash Player 9. For users who prefer not to use Flash Player
                       we have provided a <a href='textVersion.html'>text-only
                       version of the site</a/>.</p>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
        </div>
    </body>
</html>
  3. Next, you must set an id attribute for the outer object tag:
    <!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>Flex Example</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>
    <body>
        <div>
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
                    width="400" height="400" id="flexApplication">
                <param name="movie" value="Example.swf" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="Example.swf"
                        width="400" height="400">
                <!--<![endif]-->
                    <p>This site is best viewed as a Flex application, which requires
                       Flash Player 9. For users who prefer not to use Flash Player
                       we have provided a <a href='textVersion.html'>text-only
                       version of the site</a/>.</p>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
        </div>
    </body>
</html>
  4. Add a script tag to the head of the document. The script tag should include the SWFObject JavaScript file, as in the following code:
    <!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>Flex Example</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <script type="text/javascript" src="swfobject.js"></script>
    </head>
    <body>
        <div>
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
                    width="400" height="400" id="flexApplication">
                <param name="movie" value="Example.swf" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="Example.swf"
                        width="400" height="400">
                <!--<![endif]-->
                    <p>This site is best viewed as a Flex application, which requires
                       Flash Player 9. For users who prefer not to use Flash Player
                       we have provided a <a href='textVersion.html'>text-only
                       version of the site</a/>.</p>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
        </div>
    </body>
</html>
  5. Add a second script tag following the first, and inside this script tag add a line of code that calls swfobject.registerObject(). This method requires that you specify at least two parameters: the ID of the outer object tag and the minimum required Flash Player version in the form of major.minor.release. For example, if your application requires Flash Player 9 and it does not require any later releases, you can use the string 9.0.0:
    <!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>Flex Example</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">
            swfobject.registerObject("flexApplication", "9.0.0");
        </script>
    </head>
    <body>
        <div>
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
                    width="400" height="400" id="flexApplication">
                <param name="movie" value="Example.swf" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="Example.swf"
                        width="400" height="400">
                <!--<![endif]-->
                    <p>This site is best viewed as a Flex application, which requires
                       Flash Player 9. For users who prefer not to use Flash Player
                       we have provided a <a href='textVersion.html'>text-only
                       version of the site</a/>.</p>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
        </div>
    </body>
</html>
  6. You can also optionally use Express Install with SWFObject. If you want to use Express Install, you will need to specify a third parameter for registerObject(), indicating the location of the .swf to use. You can use playerProductIinstall.swf from the Flex SDK, or you can use the expressinstall.swf file that is included with SWFObject.

Pages: 1, 2, 3, 4, 5, 6, 7, 8, 9

Next Pagearrow