Wednesday, April 29, 2009

FlashVars - passing parameters into Flash/Flex

I'm sure most people are familiar with how to pass parameters into Flex using FlashVars. If you edit your project's html-template/index.template.html file and add in the flashVars parameter into the JavaScript like this:

...
} else if (hasRequestedVersion) {
// if we've detected an acceptable version
// embed the Flash Content SWF when all tests are passed
AC_FL_RunContent(
"src", "FlashVarsTest",
"width", "100%",
"height", "100%",
"align", "middle",
"id", "FlashVarsTest",
"quality", "high",
"bgcolor", "#ffffff",
"name", "FlashVarsTest",
"allowScriptAccess","always",
"type", "application/x-shockwave-flash",
"flashVars", "hello=world&another=one",
"pluginspage", "http://www.adobe.com/go/getflashplayer"
);
}...

This adds two parameters which can be accessed from inside Flex using the Application.application.parameters variable. E.g. Application.application.parameters.hello gives you the value "world".

But if you don't want to use JavaScript (which I wouldn't recommend, but is necessary in a few cases) then you can use the old loading method (also included in the index.template.html file) like this. The important thing to note is that Internet Explorer loads the parameters in differently than all other browsers (that I've tested).

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="FlashVarsTest" width="100%" height="100%"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value="FlashVarsTest.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="flashVars" value="FlashParameters=Internet Explorer only"/>
<param name="allowScriptAccess" value="always" />
<embed src="FlashVarsTest.swf" quality="high" bgcolor="#ffffff"
width="100%" height="100%" name="FlashVarsTest" align="middle"
play="true"
loop="false"
allowScriptAccess="always"
type="application/x-shockwave-flash"
flashVars="FlashParameters=FireFox,Safari,Chrome"
pluginspage="http://www.adobe.com/go/getflashplayer">
</embed>
</object>
And the same thing applies to the other tags: bgcolor, width, height. Internet Explorer reads in the values that are in the <object> tag, while all other browsers (FireFox, Chrome, Safari, ...) read in the values from inside the <embed> tag. So you have to make sure to duplicate all the values.

9 comments:

Robert said...

Can't get this to work. Compiles fine. Throws no runtime errors. But when I set a watch on Application.application.parameters I get "No such variable: Application".

I'm checking it in my application's "onCreationComplete()" method.

Using Flex Builder 3.

Chris Callendar said...

Here's my sample (with source code):
http://keg.cs.uvic.ca/flexdevtips/flashvarstest/FlashVarsTest.html

I would guess that you are getting the "No such variable: Application" error because your index.template.html file doesn't contain something like this:
"flashVars", "Application=test",

Whatever you put in the flashVars property in the html is what gets put into the Application.application.parameters object. You can check what parameters are available like this:
for (var key:String in application.parameters) {
trace(key + " = " + application.parameters[key]);
}

Robert said...

Hmmmm... Your template file doesn't seem to contain a line like that either. It does contain:

"flashVars", "hello=world&another=one",

Is that what you mean? My template does have a line like that. It's the only one I added to the Flex Builder generated html.

Here are the pertinent sections in my template.

...

AC_FL_RunContent(
"src", "playerProductInstall",
"FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",
"width", "400",
"height", "300",
"align", "middle",
"id", "pharmethod",
"quality", "high",
"bgcolor", "#869ca7",
"name", "pharmethod",
"allowScriptAccess","sameDomain",
"type", "application/x-shockwave-flash",
"pluginspage", "http://www.adobe.com/go/getflashplayer"
);

...

AC_FL_RunContent(
"src", "pharmethod",
"width", "400",
"height", "300",
"align", "middle",
"id", "pharmethod",
"quality", "high",
"bgcolor", "#869ca7",
"name", "pharmethod",
"allowScriptAccess","sameDomain",
"type", "application/x-shockwave-flash",
"flashVars", "name=Robert",
"pluginspage", "http://www.adobe.com/go/getflashplayer"
);

Am I still missing something?

The trace code:

for (var key:String in application.parameters) {
trace(key + " = " + application.parameters[key]);
}

...gets skipped because application.parameters doesn't exist.

With Flex Builder generating all that code it's hard to know what's missing. You seem to have some additional stuff in your file. Maybe there was something in project set up I missed about application parameters. Not sure. Still digging. I'll definitely post the answer when I get it.

Is it possible it's a Flash player 10 issue, like this guy says?

http://elromdesign.com/blog/2009/02/17/passing-flashvars-using-flex-template-html/

Chris Callendar said...

Hmm that is weird. So you tried the method that Elad Elrom suggests on that blog post?

E.g. changing to this:
"src","pharmethod?name=Robert",

I've never had a problem with the javascript flashVars method not working.

Just for the record what Operating System and browser are you using?

Robert said...

IE 8 and FF 3.5.2.

Have tried his method to no avail.

I'm probably missing something really stupid but for the life of me I just can't figure it out.

I'm stumped as to why even the Flex Builder generated parameters don't show up in my variable debugging list. There is a line in the Flex Builder generated code that goes:

"FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",\

Those are parameters being passed. Where are they in the variable dumps? Don't see them.

Still digging...

Robert said...

Sorry, forgot to leave the OS version.

WinXP

Robert said...

This guy got it to work. I'm trying his class right now. All compiles well. Just not sure how to get my parameters through in the html. Still digging...

http://www.abdulqabiz.com/blog/archives/2006/03/06/how-to-get-url-query-string-variables-within-flex-application/

Robert said...

I was right. Did something stupid.

The gentleman here has it correct:

http://elromdesign.com/blog/2009/02/17/passing-flashvars-using-flex-template-html/

I just made an error when testing (edited the html in the release directory instead of debug) DOH!!!

Specifically, this worked for me:

"src","pharmethod?name=Robert",

My apologies and thanks much for your assistance.

Chris Callendar said...

Easy thing to do! I've done that many times too. Always make sure to edit the html-template/index.template.html file and that way it will automatically go into the bin-debug (and bin-release when you do a release build) when Flex builds the project.