jump to navigation

PASSING VARIABLES FROM HTML TO FLASH VIA FLASH VARS July 19, 2010

Posted by Tournas Dimitrios in Flash.
trackback

The FlashVars property of Macromedia Flash Player provides an efficient method of importing variables into the top level of a movie when first instantiated(only during instatiating of the swf , can’t be used at runtime). This feature requires Flash Player 6 (or later).

Most commonly flash – flex applications are presented to the user as compiled SWF files that are embeded within HTML content that is derived over the Internet . One scenario is that the SWF applications takes up the entire available space within the web page , another common scenario is that SWF ‘s are used as widgets (smaller embedded applications )within HTML web pages . In this case , there could be one , or many SWF applications within a single web page.

In both scenario’s it will  often be necessary to communicate with the browser for a variety of reasons :

  • Passing initialization data to the SWF application
  • Opening other URLs
  • Communication with separate application components and/or external API’s

Some other characteristics of FlashVars:

  • The data to be passed is fairly simple.  By simple, I mean simple text (such as user name, filename, id, or cookie info).
  • You don’t care about the security of the data.   Any user can easily see the content of the FlashVars by viewing the page source.  Something like a password should NEVER be passed via FlashVars.
  • The size limit of a FlashVars file is 64K (more than 65,000 bytes or between 32,500 to 65,000 characters, depending on the encoding).
  • FlashVars is supported by Flash Player 6 and newer.  It is not supported in Flash 5.

How is the SWF loaded inside the browser : Well here we have 2 scenario’s

  1. If the browser supports Javascript it uses the JavaScript function AC_FLRunContent to embed the SWF file within the HTML content .You can pass flashVArs values to the SWF application by adding them to the parameters of the AC_FL_RunContent JavaScript function see line 24 of the script-blog
    	if (AC_FL_RunContent == 0) {
    		alert("This page requires AC_RunActiveContent.js.");
    	} else {
    		AC_FL_RunContent(
    			'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
    			'width', '550',
    			'height', '400',
    			'src', 'Untitled-1',
    			'quality', 'high',
    			'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
    			'align', 'middle',
    			'play', 'true',
    			'loop', 'true',
    			'scale', 'showall',
    			'wmode', 'window',
    			'devicefont', 'false',
    			'id', 'Untitled-1',
    			'bgcolor', '#ffffcc',
    			'name', 'Untitled-1',
    			'menu', 'true',
    			'allowFullScreen', 'false',
    			'allowScriptAccess','sameDomain',
    			'movie', 'Untitled-1',
    			'FlashVars', 'username=tournasdimitrios&pass=just-test',
    			'salign', ''
    			); //end AC code
    	}
    
    
  2. If  JavaScript is unavailable to the browser or  this feature is disabled , the browser uses the < n o s c r i p t > tag blog to  embed the SWF application .The flashVars values must also be specified on both the “object” and “embed” tags of the tag blog  see lines 11 , 18 of the script-blog
    < n o s c r i p t >
    	<object classid="clsid:<span class=">d27cdb6e-ae6d-11cf-96b8-444553540000</object>"        codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
            width="550"
            height="400"
            align="middle"
            id="main"&gt;
        </li><param name="allowScriptAccess" value="sameDomain">
        <param name="movie" value="main.swf">
        <param name="quality" value="high">
        <param name="bgcolor" value="#ffffff">
        <param name="FlashVars" value="username=tournasdimitrios&pass=just-test">
        <embed type="application/x-shockwave-flash" src="main.swf" autostart="false" quality="high" bgcolor="#ffffff" flashvars="username=tournasdimitrios&pass=just-test" name="main" allowscriptaccess="sameDomain"></embed>pluginspage="http://www.macromedia.com/go/getflashplayer" align="middle" width="550" height="400">
    
    <!-- n o s c r i p t-->
    

The previous code passes the two variables (username and pass) within a FlashVars parameter as attributes . Also the same technique works if you pass the variables along the querystring see lines 09 , 12 of the script-blog

<!-- using query string -->
<object classid="clsid:<span class=">d27cdb6e-ae6d-11cf-96b8-444553540000</object>"
        codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
        width="550"
        height="400"
        align="middle"
        id="main"&gt;
    <param name="allowScriptAccess" value="sameDomain">
    <param name="movie" value="main.swf?username=tournasdimitrios&pass=just-test">
    <param name="quality" value="high">
    <param name="bgcolor" value="#ffffff">
    <embed type="application/x-shockwave-flash" src="main.swf?username=tournasdimitrios&pass=just-test" autostart="false" quality="high" bgcolor="#ffffff" name="main" allowscriptaccess="sameDomain"></embed>pluginspage="http://www.macromedia.com/go/getflashplayer" align="middle" width="550" height="400">

Several things that should be noted about variable names:

  • Use only letters, underline, and numbers.  There should be no reason why symbols such as ‘$’ or ‘#’ must be used as variable names.
  • Do not start a name with a number (for example: 1message is an invalid variable name because it starts with a number; whereas message1 is a valid variable name).
    Flash will certainly reject or get confused if you use a variable name that starts with a number or other special characters – except underlines (ie: _message, and _1message are valid names).
  • A variable name should not contain any <space> character (ie: my message is an invalid name, my_message is a valid name).

And for variable values, there are also rules:

  • Characters needs to be URL encoded .  This means that special characters, such as =, &, , + need to be substituted with their URL encoded form.  For example: name=John Doe.  Here, the <space> between John and Doe needs to be encoded with + sign, so you need to pass it as name=John+Doe or name=John%20Doe.  (Flash doesn’t seem to enforce this, but you should follow the proper way.)  Search for URL encoding on the net for more details on this subject.
  • If you need to include an & as part of a value, such as in ingredients=Beef&Pork, then you need to encode the & like this: ingredients=Beef%26Pork.   The %26 is an encoded form of the & sign.  The number 26 is the hexadecimal code of the character &.  If you need to know the encoding value of a particular character, consult an ASCII table.  There are other characters that need to be encoded, such as <, >, /, ?..For further reading on URLencoding go here .

The main difference between AS2 and AS3 is how to retrieve the FlashVars. The FlashVars are no longer available in the _root level of the movie. Instead, you must use the new LoaderInfo class object to access the FlashVars.  The FlashVars is available in the parameters member of the LoaderInfo.  An example below show how to load a FlashVars named”userName” onto a text field named userNameTextField.

In case you’re wondering where the loaderInfo comes from, it comes from MovieClip’s ancestors. The stage MovieClip is derived from InteractiveObject, which derives from DisplayObject. If you examnle the DisplayObject class, you will see one of the member variables is the LoaderInfo.

var flashvar1:String;
var flashvar2:String;
//create a textfield "tf" with actionscript
var tf:TextField = new TextField();
tf.autoSize = TextFieldAutoSize.LEFT;
tf.border = true;
addChild(tf);
var paramObj:Object = LoaderInfo(root.loaderInfo).parameters;
tf.appendText("params:" + "\n");
tf.appendText(paramObj.username +"\n");
tf.appendText(paramObj.pass +"\n");
//assign the values of FlashVars to flashvar1 - flashvar2
flashvar1 = paramObj.username;
flashvar2 = paramObj.pass;
//textField1- textField2 are dynamic textfields created with the Flash authoring tool
textField1.text = flashvar1;
textField2.text = flashvar2;

/*
//This  alternative code creates a new TextField instance
//on the Stage (named tf), uses a for..in loop to iterate over each
//of the passed parameters and displays the parameter's names and values
//in the text field.

var tf:TextField = new TextField();
tf.autoSize = TextFieldAutoSize.LEFT;
tf.border = true;
addChild(tf);
tf.appendText("params:" + "\n");
try {
    var keyStr:String;
    var valueStr:String;
    var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;
    for (keyStr in paramObj) {
        valueStr = String(paramObj[keyStr]);
        tf.appendText("\t" + keyStr + ":\t" + valueStr + "\n");
    }
} catch (error:Error) {
    tf.appendText(error.toString());
}

*/

Recomended readings from Adobe:

To be continued 🙂

Comments»

No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s