Grabbing FlashVars from the embedding HTML template

By Peter deHaan On August 7, 2007 · 16 Comments

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.

Tagged with: parameters

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

16 Responses to Grabbing FlashVars from the embedding HTML template

Marco Lam says:

May 5, 2008 at 8:03 pm

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

Reply

peterd says:

May 6, 2008 at 12:30 am

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

marco says:

May 6, 2008 at 6:56 pm

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

Reply
peterd says:

May 7, 2008 at 5:34 pm

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

Reply

pierre says:

July 12, 2008 at 11:23 am

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

Joshua says:

July 23, 2008 at 6:38 pm

Incredibly helpful!

.:Joshua

Reply
Emily says:

October 5, 2008 at 7:23 am

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

Reply

peterd says:

October 5, 2008 at 12:06 pm

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

Karthik says:

December 6, 2008 at 2:49 pm

Hi,

I have been wasting a lot of time figuring out this and your post has put an end to it! Thanks a lot!!

Karthik

Reply
Guy says:

January 3, 2009 at 10:07 pm

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?

Reply
Nizar says:

May 7, 2009 at 3:58 am

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

Reply
sam says:

October 27, 2009 at 1:30 pm

Thanks thanks thanks a load

Reply
Prasanna says:

August 26, 2010 at 11:37 pm

Hi,
Its really a neat blog and always helps me to the point.

Thanks

Reply
sreeja says:

December 16, 2010 at 3:08 am

Thanks a lot.

Ur post was a direct solution to my problem.It helped me alot.

Reply
Qasim Ali Khawaja says:

January 22, 2011 at 8:32 am

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 );
}

Reply
- Peter deHaan says:
  
  January 22, 2011 at 11:02 am
  
  @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
  
  Reply