Using FlashVars with SWFObject in ActionScript3

Flash June 21st, 2007

I use SWFObject to add Flash elements to any given page that I work on containing Flash elements. SWFObject is one of the most elegant ways of handling Flash content. It uses a single div with basic CSS and a slim JavaScript file to:

determine if the user has Flash and if so, which version they are running
upgrade the user’s version of Flash with ExpressInstall (optional)
quickly pass in external variables (from your page) to your Flash file.
easily configure requirements, and if the user has Flash (or was just upgraded) the Flash content is displayed; otherwise, alternate text or images are used.

To pass variables into a Flash file using SWFObject you add the following line of code to your SWFObject javascript block:

soFlash.addVariable("msg", "this data came from an external source");

Now that a variable has been passed in via SWFObject, we can access it in Flash using ActionScript 3. If you’ve just started your first ActionScript 3 project (or you're porting over AS2 code to AS3) and you’re scratching your head as to why your FlashVars are now undefined in the _root, it’s because they don’t live there anymore (in fact _root no longer exists! It is now just root without a leading underscore _).

The FlashVars are now available in the new LoaderInfo.parameters object. What you can do is create a single object that will store all external variables as properties of your object as demonstrated by the following code:

Here it is in action

It appears as though you don't have the required Flash player or you have JavaScript turned off.

Here's the full code from the above file.

Download the sample files (.zip)

Post any questions in the comments!

27 Responses

Diogo Baeder Says:
March 20th, 2008 at 2:44 pm
Man, thanks a lot for the tip! Now all variables in my movie are accessible!

Now, time to discover how to make LightWindow call from inside the movie… wish me luck!

Diogo
Jonathan Says:
March 21st, 2008 at 9:03 am
Glad you found the info useful! I’m not familiar with LightWindow but best of luck to you on the implementation! If you have any questions, just post them in the comments.

Cheers,
Jonathan
Lunaya Says:
September 5th, 2008 at 12:36 pm
YAY!!! thank you : you really helped me!
Bryant Says:
October 1st, 2008 at 12:47 pm
Very nice! This has helped me immensely!
Laura Says:
October 7th, 2008 at 11:58 pm
thanks! just what I needed.
Brian FitzGerald Says:
October 28th, 2008 at 11:12 am
This was really a huge hand — thanks a lot! After searching for a looonnng time, you seem to have the only post on the Web that hits on this
Kylie Says:
December 2nd, 2008 at 11:57 pm
Hi! have used something similar in an e-card movie, but can’t get it to work. Would love your feedback, can I send code?
DL Says:
January 8th, 2009 at 8:35 am
I looked for something that did this for ages. Thank you so much.
Can you tell me how to access the individual variables that get loaded in? It may be a very basic thing (I appologise if it is) but I can’t seem to figure it out.
Thanks again
DL Says:
January 8th, 2009 at 9:33 am
Ignore my last comment, I’ve found out how to do it… doh
Thanks again though.
Gil Says:
January 8th, 2009 at 10:25 am
ok so if i am tring to pass a var like this:
DL_AUTH_USERNAME on a sendVars object

It is sent like this DL%5FAUTH%5FUSERNAME

example:
var dataOut:LoadVars = new LoadVars();
function checkUser():Void {
dataOut.DL_AUTH_USERNAME = loginForm.userName_txt.text;
trace(dataOut); // is DL%5FAUTH%5FUSERNAME
}

How do you get the _ to pass correctly? Thanks for any insight
MikeTheVike Says:
January 26th, 2009 at 1:22 pm
Thank you! After clicking on multiple sites from a google search, this one finally made sense.
Josh Says:
April 13th, 2009 at 10:20 am
I am having a little trouble with the communication… Maybe you could look at some code and find my misstep. Thanks for the info, very helpful…

HTML:

var so = new SWFObject(”Hilti360.swf”, “Hilti360″, “540″, “360″, “8″, “#ffffff”);
so.addVariable(”myUrl”, “index.html”);
so.write(”flashcontent”);

AS3:
var xmlFile:String;
xmlFile = root.loaderInfo.parameters.myUrl
trace(myUrl);
trace(xmlFile);
var myUrl:String;
//trace(currenturl);
//var xmlFile:String;
if (myUrl == “index-FR.html”) {
xmlFile = “content/FR.xml”;
trace(”FR”);
} else if (myUrl == “index.html”) {
xmlFile = “content/EN.xml”;
trace(”EN”);
} else {
xmlFile = “content/PT.xml”;
trace(”PT”);
}
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();

xmlLoader.addEventListener(Event.COMPLETE, LoadXML);

xmlLoader.load(new URLRequest(xmlFile));

function LoadXML(e:Event):void {
trace(”LoadXML”);
xmlData = new XML(e.target.data);
ParseContent(xmlData);
}
Jonathan Says:
April 13th, 2009 at 11:19 am
@Josh: Your AS creates the string “xmlFile” which contains the value of the external variable “myUrl”. Your if statement then compares the value of a local variable named “myUrl”. As such, I’m assuming you’re always seeing “PT” in the output panel. So, I would think your code should look a little more like this (hope it helps!):

//Create a reference to the xml file to be loaded.
var xmlFile:String;
//Store a reference of the external URL passed in.
var myUrl:String;
myUrl = root.loaderInfo.parameters.myUrl

switch(myUrl){
case “index-FR.html”:
xmlFile = “content/FR.xml”;
break;
case “index.html”:
xmlFile = “content/EN.xml”;
break;
default:
xmlFile = “content/PT.xml”;
break;
}
Josh Says:
April 13th, 2009 at 12:33 pm
Thanks a lot!, yet with this code:

var xmlFile:String;
trace(xmlFile);

var myUrl:String;
trace(myUrl);

myUrl = root.loaderInfo.parameters.myUrl;
trace(root.loaderInfo.parameters.myUrl);

switch (myUrl) {
case “index-FR.html” :
xmlFile = “content/FR.xml”;
trace(”FR”);
break;
case “index-PT.html” :
xmlFile = “content/PT.xml”;
trace(”PT”);
break;
default :
xmlFile = “content/EN.xml”;
trace(”EN”);
break;
}

I receive this output:
null
undefined
null
EN

…and only the default case is shown. Did I enter something wrong?

Thanks Again!
Josh Says:
April 13th, 2009 at 12:34 pm
Sorry,
this output:
null
null
undefined
EN
Jonathan Says:
April 13th, 2009 at 1:14 pm
The first two traces display “null” because you are tracing the variables before any value is set.

You are getting “undefined” in your third trace because you are testing within the Flash IDE. “myUrl” is passed in via JavaScript, which means you need to view this page in a browser so that you can pass the variable in via SWFObject.

If you want to test within the Flash IDE, just check if myUrl is undefined and if so, set it to whatever you want.
—————————————
//Try something like this:
var xmlFile:String;
var myUrl:String;

myUrl = root.loaderInfo.parameters.myUrl;
//If you want to test within Flash, set a default value of
//any external variables
if(myUrl == undefined || myUrl == null){ myUrl = “index.html”}

switch (myUrl) {
case “index-FR.html” :
xmlFile = “content/FR.xml”;
trace(”FR”);
break;
case “index-PT.html” :
xmlFile = “content/PT.xml”;
trace(”PT”);
break;
default :
xmlFile = “content/EN.xml”;
trace(”EN”);
break;
}
trace(xmlFile);
trace(myUrl);
Josh Says:
April 13th, 2009 at 3:32 pm
That makes sense. I am still only able to show the default case, regardless of which html page a preview. Do I need to define something else in the html?

Thanks!
Nico Says:
May 11th, 2009 at 6:06 am
Hey,

how can i readout the parameters of a swf-file within an other Swf-FIle?

like:

SwfA loads SwfB and i wanna know, wich Vars are passed to SwfB.

greets from Germany
Georgiy Says:
August 6th, 2009 at 4:19 am
Thanks for your tutorial. I dont understand how to make flash understand spaces in text.
“Thisiswhatigot” and “This is what i need”

my1.text = this.loaderInfo.parameters.my1;

What should i add?
Thanks
Jonathan Says:
August 6th, 2009 at 8:31 am
@Georgiy: Do you have a sample of your code/swf posted somewhere?
Georgiy Says:
August 7th, 2009 at 7:12 am
Sorry! I found the solution! I didn’t emd font (space) for texteff=))
But another one question, may be you’ll help=) if not! it’s ok! thanks a lot for you tutorial.
Question: i have dynamic text area named my_txt.
what should i write in actionscript to change fontcolore like i get content for text variable
(my_txt.text.color = this.loaderInfo.parameters.my_txt_color;) - dont’t work
or for movieclip tint color. something like this
(i have movieclip named bg and i want to get tint color dynamicly from html)
something like this:
bg.tint = this.loaderInfo.parameters.bg_tint;
(bg.tint = #ff0000) - for a example!
Thanks a lot in any way!

Jonathan Says:
August 12th, 2009 at 10:50 am

Georgiy:
Good AS3 questions and very common for new developers. Here is how I would approach the tinting of a movieclip and textfield color….

//To tint a movieclip dynamically in AS3:
//(Assumes there is an instance on stage named "bg")
var ct:ColorTransform = bg.transform.colorTransform;
	ct.color = 0xA2C7F4;
	bg.transform.colorTransform = ct;

//To color text dynamically in AS3:
//(Assumes there is an instance of a TextField on stage named "my_txt")
//There are multiple ways of handling this, I just went with the easy solution of using the textColor property
my_txt.textColor = 0xC5D9B7;

Hope that helps and happy coding!

MD. Ehsanul Hoque Says:
December 7th, 2009 at 9:58 am
Thanx Guru….

Thanx a lot…..:D
Chris Says:
January 26th, 2010 at 7:55 am
Very good example. Can I make a suggestion, you use:

rather than keep your own copy?
Chris Says:
January 27th, 2010 at 9:08 am
url did not appear in previous post, try again

http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js“
Istvan Says:
February 25th, 2010 at 4:34 am
THANK YOU!
all other examples failed - this finally works!
Chris Says:
June 29th, 2010 at 12:10 am
This still helps today, Cheers! Most other examples look at the js side way to much and assume you can work the as3 stuff out.