Grabbing FlashVars from the embedding HTML template in Flex 4 (SWFObject Edition)

In a previous entry, “Grabbing FlashVars from the embedding HTML template”, we saw how you could access FlashVars in your Flex application by passing a name/value pair string to the AC_FL_RunContent() method and <object>/<embed> tags from your HTML template.

The following example shows how you can pass FlashVars from your HTML template to your Flex applications using the Flex 4 SDK (which uses SWFObject now, by the way).

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex 4 SDK installed in your Flex Builder 3. For more information on downloading and installing the Flex 4 SDK into Flex Builder 3, see “Using the beta Flex 4 SDK in Flex Builder 3″.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/04/grabbing-flashvars-from-the-embedding-html-template-in-flex-gumbo-swfobject-edition/ -->
<FxApplication name="SWFObject_flashvars_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        backgroundColor="white"
        applicationComplete="init();">
    <layout>
        <BasicLayout />
    </layout>

    <Script>
        import mx.utils.ObjectUtil;

        private function init():void {
            textArea.text = ObjectUtil.toString(this.parameters);
        }
    </Script>

    <FxTextArea id="textArea"
            selectable="true"
            left="20"
            right="20"
            top="20"
            bottom="20" />

</FxApplication>

And my [slightly modified] HTML template code is as follows:

View HTML template

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<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" />
        <style type="text/css" media="screen">
            html, body    { height:100%; }
            body { margin:0; padding:0; overflow:hidden; text-align:center; }
            #flashContent { display:none; }
        </style>

        <script type="text/javascript" src="swfobject.js"></script>
        <script type="text/javascript">
            var swfVersionStr = "10.0.12";
            var xiSwfUrlStr = "playerProductInstall.swf";
            var flashvars = {};
            flashvars.userAgent = navigator.userAgent;
            flashvars.userLanguage = navigator.userLanguage;
            flashvars.onLine = navigator.onLine;
            flashvars.name = "peter";
            flashvars.team = "Flex SDK";
            flashvars.twitter = "http://twitter.com/pdehaan";
            var params = {};
            params.quality = "high";
            params.bgcolor = "#ffffff";
            params.allowscriptaccess = "sameDomain";
            var attributes = {};
            attributes.id = "SWFObject_params_test";
            attributes.name = "SWFObject_params_test";
            attributes.align = "middle";
            swfobject.embedSWF(
                "SWFObject_params_test.swf", "flashContent",
                "100%", "100%",
                swfVersionStr, xiSwfUrlStr,
                flashvars, params, attributes);
            swfobject.createCSS("#flashContent", "display:block;text-align:left;");
        </script>
    </head>
    <body>
        <div id="flashContent">
            <p>
                To view this page ensure that Adobe Flash Player version
                10.0.12 or greater is installed.
            </p>
            <a href="http://www.adobe.com/go/getflashplayer">Get Adobe Flash Player</a>
        </div>
   </body>
</html>

And the generated output from the code is:

(Object)#0
  name = "peter"
  onLine = "true"
  team = "Flex SDK"
  twitter = "http://twitter.com/pdehaan"
  userAgent = "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; GTB5; .NET CLR 2.0.50727; .NET CLR 1.1.4322; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648)"
  userLanguage = "en-us"

This entry is based on a beta version of the Flex Gumbo SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex Gumbo SDK.

7 thoughts on “Grabbing FlashVars from the embedding HTML template in Flex 4 (SWFObject Edition)

  1. i need basic coding to develop the web page
    and how to insert picture …..etc……..

  2. How can you pass in values from HTML input fields?

    var flashvars = {};
    flashvars.userAgent = document.getElementById('username').value;

    —-HTML—

    <input type='hidden' id='username' name='username' value='dynamic' />
  3. The formatting of this post sucked ass

    Also, who calls their appcomplete event “init”. Maybe the initialize method should be called that.

    This whole thing could have been explained in literally 3 lines of code. What a waste.

Comments are closed.