Flex 3: setting data using FlashVars

If you want to set any variables from html page to your Flex application. You can do it by setting FlashVars in the html page. This data can be read in Flex at runtime by accessing Application.application.parameter property.

Following example will demonstrate the steps to access the data in flex using FlashVars.

First create an Flex project in the flex builder. Now you have to set the required data in your html file in which the Flex application is reside. To do this you have to add the FlashVars property in your html.

Open your index.template.html form {project}/html-template/ folder. Why this file? Modifying this file will compile your actual html page with the latest changes you have made to this template file. Doing this you will have all your modification in the final compiled html file.

Next you have to set the FlashVars property. This you have to do it at two places. First within the <object> tag you will find <embed> tag.In this tag there are few properties set for the application swf file like.src, quality, bgcolor etc. you need to add one more property here i.e.FlashVars. Now identify the data which you want to pass to Flex application. And add that in above tag property(<object><embed>) as follow.

FlashVars="Name=Shailesh Makwana&Age=32&Qualification=B'Com&Experience=10 years"

Now your final code will look like this.

<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" />
   <embed src="${swf}.swf" quality="high" bgcolor="${bgcolor}"
    width="${width}" height="${height}" name="${application}" align="middle"
    play="true"
    loop="false"
    quality="high"
    allowScriptAccess="sameDomain"
    type="application/x-shockwave-flash"
    pluginspage="http://www.adobe.com/go/getflashplayer"
    FlashVars="Name=Shailesh Makwana&Age=32&Qualification=B'Com&Experience=10 years">
   </embed>
 </object>
</noscript>

Second place where you have to add the flash var is at javascript block. If you look above you will find javascript block with if an else if condition. in the else if condition block you will find some property is been set. Here you have to add flashVars.

Add following line of code as last parameter of AC_FL_RunContent function within else if block.
"FlashVars", "Name=Shailesh Makwana&Age=32&Qualification=B'Com&Experience=10 years"

You must have noticed that the snippet of FlashVars here is little different than the first step. Also make sure you add the comma after last parameter before adding this FlashVars. This is the common mistake everyone does.

Now your code will look like this.

AC_FL_RunContent(
   "src", "${swf}",
   "width", "${width}",
   "height", "${height}",
   "align", "middle",
   "id", "${application}",
   "quality", "high",
   "bgcolor", "${bgcolor}",
   "name", "${application}",
   "allowScriptAccess","sameDomain",
   "type", "application/x-shockwave-flash",
   "pluginspage", "http://www.adobe.com/go/getflashplayer",
   "FlashVars", "Name=Shailesh Makwana&Age=32&Qualification=B'Com&Experience=10 years"
 );

Now you are done with the html editing. When you will run the application from the builder. The output html file will have above changes.

Now, next we have to access these variables in the Flex. Open your main application MXML file. here you can access these flashVars using Application.application.parameters;. This parameter is of type object. Use these variable in your application wherever you need. I have accessed these variable in creationComplete event. And assigned the respective variable value to the text component as follow.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init();">
<mx:Script>
 <![CDATA[

  private function init():void
  {
   var flashVar:Object = Application.application.parameters;
   
   nameT.htmlText = "<b>Name :</b>" +flashVar.Name;
   ageT.htmlText = "<b>Age :</b>" +flashVar.Age;
   qualificationT.htmlText = "<b>Qualification :</b>" +flashVar.Qualification;
   experienceT.htmlText = "<b>Experience :</b>" +flashVar.Experience;
  }
 ]]>
</mx:Script>
 <mx:VBox width="300" height="100%">
  <mx:Text id="nameT" width="100%" />
  <mx:Text id="ageT" width="100%" /> 
  <mx:Text id="qualificationT" width="100%" />
  <mx:Text id="experienceT" width="100%" />  
 </mx:VBox> 
</mx:Application>

After compiling this project, you will see that all variable what we have set in the html is now displayed in the Flex application. I hope this will help you.