PASSING VARIABLES FROM HTML TO FLASH VIA QUERY STRING IN AS3

This tutorial is an extension of the tutorial on the Query String and Flash using ActionScript1 and ActionScript2. If you haven't read it, I suggest reading it first then return here for the ActionScrip3 examples.

The main difference between AS2 and AS3 is how to retrieve the query string variables. Most of the changes are in the ActionScript side, there's generally no need to change the html side - more about this below.

With AS3, the query string variables are no longer available in the _root or _level0 of the movie (it was not considered a good practice to use _root because a swf can be loaded into another movie clip). Instead, you now can use the an instance of the new LoaderInfo class to access the query string variables.  Here's an excerpt from the Flash documentation:

Package flash.display 
  Class public class LoaderInfo 
parameters :Object [read-only] An object that contains name-value pairs that represent the
parameters provided to the loaded SWF file.

LoaderInfo is a member of every MovieClip and it has other properties about the movie clip. Of interest for query strings is the parameters property. The query string variables are available in the parameters property member of the LoaderInfo.  An example below show how to load a query string varieble named userName onto a text field named userNameTextField.

function loaderComplete(myEvent:Event)
{
  var myQueryStrings=this.loaderInfo.parameters;
  userNameTextField.text=myQueryStrings.userName;
}

this.loaderInfo.addEventListener(Event.COMPLETE, loaderComplete);

Note that we catch the Event.COMPLETE message to make sure that the swf has finished loading before we start using the query string variables.

In case you're wondering where the this.loaderInfo comes from: the stage MovieClip is derived from InteractiveObject, which derives from DisplayObject. If you examine the DisplayObject class, you will see one of the properties is the LoaderInfo.

MovieClip -> InteractiveObject->DisplayObject

All the JavaScript, html, and php code are the same as in the tutorial for AS1 and AS2 (except you would want to change the Flash version number to 9 in the <object> tag):

  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://..../swflash.cab#version=9,0,0,0" width="250" height="50">
<param name="movie" value="loaderInfoExample.swf?userName=permadi" />
<param name=quality value=high />
<embed src="loaderInfoExample.swf?userName=permadi" quality=high pluginspage="http://..../index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="250" height="50"> </embed>
</object>
Here's the result of above code, I am passing the a variable named userName with the value of permadi to the swf.

Download the FLA.

You might be wondering what to do if you want to access the query string outside of the loaderComplete() function above.  An obvious way is to use this.loaderInfo.parameters, but that is cumbersome and what if the object has no knowledge of the stage Movie Clip?  Instead, you can save the parameters onto your own object.

Here's an example where I assigned the parameters to be member of myLoaderInfo.  You can then pass this object to other object that needs access to the query strings. This is for illustration purpose and if you find yourself needing to do this repeatedly, it's better to create a class to handle it. 

//////////////////////////////////////////////
function loaderComplete(myEvent:Event)
{
this.myParams=this.loaderInfo.parameters;
this.myParamsLoaded=true;// set a flag to indicate that the FlashVars is loaded
this.useParams();
}

//////////////////////////////////////////////
function useParams()
{
  // do something with the variables
}

// This object will hold my FlashVars, eq: myFlashVars.flashVars.userName; var myLoaderInfo=new Object();

// Set a flag indicating that the FlashVars is not loaded yet.
// Anytime you want to use the FlashVars, 
// make sure this flag has been set to true.
myLoaderInfo.myParamsLoaded=false;


// Use this as callback for Event.COMPLETE
myLoaderInfo.loaderComplete=loaderComplete;


// assign function to call when the variables are loaded
myLoaderInfo.useParams=useParams;


// Tells the LoaderInfo to call myLoaderInfo.loaderComplete when the movie is loaded.  
// The FlashVars will be saved as member of "myLoaderInfo" 
// For instance, if I have a FlashVar named "userName," it will be accessible as 
// myLoaderInfo.myParams.userName
this.loaderInfo.addEventListener(Event.COMPLETE, myLoaderInfo.loaderComplete);

 

For more examples, see also this other tutorial about FlashVars.

Click here to see the tutorial example in action
Download FLA