Grabbing FlashVars from the embedding HTML template

What if you built a nice, custom FLV player in Flex and wanted to embed the player in an HTML page and have it star playing a specific video? How could you easily do that without tweaking the MXML each time with the path to the FLV or calling a server-side script to somehow determine the video you wanted to play? Well, one of the easiest solutions is to tweak the generated embed code and pass in any custom variables you wanted using “FlashVars”.

No idea what I’m talking about? Well, check out the following Flex 2.0.1 docs for more of a background: “Using flashVars” and “Using the Application.application.parameters object”.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init()">

    <mx:Script>
        <![CDATA[
            private function init():void {
                // The FlashVars
                var obj:Object = Application.application.parameters;
                var item:String;

                arrColl = new ArrayCollection();

                /* Populate the ArrayCollection object with the FlashVars. */
                for (item in obj) {
                    arrColl.addItem({key:item, value:obj[item]});
                }

                dataGrid.dataProvider = arrColl;
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl" />

    <mx:DataGrid id="dataGrid" />

</mx:Application>

Next, open the generated *.html template in the /bin/ directory and add the “FlashVars” key and a string of name/value pairs, as shown in the following snippet:

AC_FL_RunContent(
    "src", "main",
    "width", "100%",
    "height", "100%",
    "align", "middle",
    "id", "main",
    "quality", "high",
    "bgcolor", "#869ca7",
    "name", "main",
    "allowScriptAccess","sameDomain",
    "type", "application/x-shockwave-flash",
    "pluginspage", "http://www.adobe.com/go/getflashplayer"
    "FlashVars", "name=peter&site=flexexamples.com"
);

And then you need to change the <object /> and <embed /> tags in the <noscript /> block, as seen in the following snippet:

<noscript>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            id="${application}" width="${width}" height="${height}"
            codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
            <param name="movie" value="${swf}.swf" />
            <param name="quality" value="high" />
            <param name="bgcolor" value="${bgcolor}" />
            <param name="allowScriptAccess" value="sameDomain" />
            <param name="flashVars" value="url=woo" />
            <embed src="${swf}.swf" quality="high" bgcolor="${bgcolor}"
                width="${width}" height="${height}" name="${application}" align="middle"
                play="true"
                loop="false"
                quality="high"
                allowScriptAccess="sameDomain"
                flashVars="url=woo"
                type="application/x-shockwave-flash"
                pluginspage="http://www.adobe.com/go/getflashplayer">
            </embed>
    </object>
</noscript>

Save the HTML document and open it in a browser and you should see your name/value pairs parsed and displayed nicely in your DataGrid control. Of course, the Flex code used a loop and ArrayCollection object to nicely display the data in the DataGrid control. You could just as easily referenced the variables like Application.application.parameters.name and Application.application.parameters.site.

View source is enabled in the following example.

16 thoughts on “Grabbing FlashVars from the embedding HTML template

  1. Application.application.parameters.name can show the actuall value of the parameters

    but how to show the valuse from array collection ? i put Alert.show("arr "+ arrColl) , it can jsut show [object object]… so i would like to know that how to get the actuall value(peter) in the array collection? and also i can see the value “peter” amd “site” on the debug mode but i don’t know how to take it out

  2. Marco Lam,

    Try using the static ObjectUtil.toString() method to display the Object:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            layout="vertical"
            verticalAlign="middle"
            backgroundColor="white"
            applicationComplete="init();">
    
        <mx:Script>
            <![CDATA[
                import mx.utils.ObjectUtil;
    
                private function init():void {
                    var params:Object = Application.application.parameters;
                    txt.text = ObjectUtil.toString(params);
                }
            ]]>
        </mx:Script>
    
        <mx:Form>
            <mx:FormItem label="name:">
                <mx:Label id="nameLbl"
                        text="{Application.application.parameters.name}" />
            </mx:FormItem>
            <mx:FormItem label="site:">
                <mx:Label id="siteLbl"
                        text="{Application.application.parameters.site}" />
            </mx:FormItem>
        </mx:Form>
    
        <mx:Text id="txt" />
    
    </mx:Application>
    

    Peter

  3. Peter thank you for your reply. i still have one more quiestion

    i read that “arrColl = new ArrayCollection();” is array collection
    can i get the value directly like ‘arrColl[key][site]’?? is it work like array ??

    thx

  4. marco,

    You could probably do something like arrColl.source[key][site] to get what you wanted. The source property should contain the underlying Array object.

    Peter

  5. hello,

    Can you help me, please

    <mx:Script>
     // i have two variables
     var ref="AQ51";
     var article="motor";
    
     // is it possible to do something like that :
     [AQ51] = article
    </mx:Script>
    

    in order to call the article by the ref and to have this result

    <mx:Text 	text="{AQ51}"/>         // motor
    

    Regeards

  6. Hello,
    Your writing do help me lot.
    But, recently I face a guestion.
    I want to embed the swf file in my blog.
    And I don’t know which codes should I take.

    The file only run in html.
    If I open my swf ,it just can’t work.
    My embed code is just like below.

    <embed src="test.swf" flafVars="urlVar=emily" quality="high" bgcolor="#ffffff" width="150" height="350" name="logtest" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" >

    Best wishes,
    Emily

  7. Emily,

    The easiest way to embed the SWF file in your HTML page is probably using the following HTML code:

    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            id="test" width="100%" height="100%"
            codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
            <param name="movie" value="test.swf" />
            <param name="quality" value="high" />
            <param name="bgcolor" value="#ffffff" />
            <param name="allowScriptAccess" value="sameDomain" />
            <param name="flashVars" value="urlVar=emily" />
            <embed src="test.swf" quality="high" bgcolor="#ffffff"
                width="100%" height="100%" name="test" align="middle"
                play="true"
                loop="false"
                quality="high"
                allowScriptAccess="sameDomain"
                flashVars="urlVar=emily"
                type="application/x-shockwave-flash"
                pluginspage="http://www.adobe.com/go/getflashplayer">
            </embed>
    </object>
    

    Peter

  8. What if the swf that’s embedded on the page is a simple viewer.swf, and it seems it’s getting the text from elsewhere using flashvars. How would one extract this text?

  9. Guys i need you help
    i need and example on passing variable from MXML To MXML
    i tried every thing and every theory but none worked in application

    email me nsouki2@ccc.com.qa

  10. How to get the parameter in Flex 4? as the Application.application.parameters is not functional here.

    Flex 3:-
    private function getPlayerVars() : void
    {
    var parameters : Object = Application.application.paramters;

    vid = parameters.vid;
    mode = parseInt( parameters.mode );
    }

    1. @Qasim,

      Try using FlexGlobals.topLevelApplication.parameters

      And you may need to import the FlexGlobals class, if Builder doesn’t do that for you automatically:

      import mx.core.FlexGlobals;

      Peter

Comments are closed.