PASSING VARIABLES FROM HTML TO FLASH VIA QUERY STRING

 

OVERVIEW

 
 


This tutorial is very similar to another tutorial elsewhere on this site about Passing Variables From HTML to Flash via FlashVars.  The main difference is in the syntax; and it is fairly minor.  Also, FlashVars only works with Flash Player 6 (that is Flash MX) or newer.  If you're only supporting Flash Player 6 or newer, I recommend using FlashVars.

Note: ActionScript 3 user should go here after reding this tutorial for Action Script 3 way of accessing query strings.

Why and When to use Query String
Flash supports several methods of communicating to the outside world.   Some of the common methods are: loadVariables, the XML object, the FlashVars, and the XMLSocket.  With these methods, you can retrieve parameters via an external file or via CGI scripts.   However, there is a less conventional method, which is to use what is called the query string.  This method is practical but only suitable for simple situations such as these:  

  • The data to be passed is fairly simple.  By simple, I mean simple text (such as user name, filename, id, or cookie info).
  • The data to be passed is not long.  I recommend less than 1024 characters.  (The actual limit  depends on the browser and the server.)
  • You don't care about the security of the data.  
    Query string is not secure.  Any user can easily see the content of the query string in the browser's URL/Address bar; or by viewing the page source (as will be shown later).  Something like a password should NEVER be passed via the query string.  Let me say this again: anything even remotely sensitive should not be passed via the query string.   

What is Query String?
Query string is the string that follows the "?" sign within an URL.  Below, is an URL followed by the query string.

The query string by itself (such as shown above) normally is not very meaningful to the end user.  Most commonly, query string is used by CGI programs to retrieve data from HTML forms.   As an example, in the above case, suppose that the file mycgi.pl is a CGI program, it will be able to retrieve these variable and value pairs from the query string:

  • message = hello
  • day = Tuesday
 

Side note: Doing a search on Yahoo for the word "Flash" yields this query string:

Here' you can see that the query string is as follows:

p=flash&ei=UTF-8&fr=fp-tab-web-t&cop=mss&tab=

This is an example of how the form data is sent to the search engine via the query string.   You, the user, don't usually care how the query string works (the query string may even look like a gibberish).  You may not even notice that it is there in the URL.  The CGI program handles the details for you.  

Basic Query String Syntax
The format of the query string is as follows: 

variableName1=variableValue1&variableName2=variableValue2&variableName3=variableValue3...

Each variable name and value pair is separated by a '=' sign; and an '&' sign separates the variables.  You can have as many variable name and value pairs, but remember, there is a limit, and I recommend not more than 1024 characters total (including the www... URL part).  After all, if you need more space, you should consider using other methods, such as reading from a data file.  

Several more things that should be noted: 

  • You can add (type) a query string manually to an URL.  For example, I can enter http://www.permadi.com/index.html?message=Hello, and the page will work as usual.  The query string is simply ignored if the destination URL doesn't do anything with it.   (index.html file in the above example does not do anything with the query string, so it's simply ignored).  This is something that doesn't seem useful, but  later you will see how it can be utilized.  
  • Do not put line breaks within a query string. even if the string is long.

Several things that should be noted about variable names: 

  • Use only letters, underline, and numbers.  Avoid symbols such as '$' or '#'.  
  • Do not start a name with a number (1message is an invalid variable name because the name 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 (see: Introduction to URL Encoding).  This means that special characters, such as =, &, <SPACE>, + need to be substituted with their URL encoded format.  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 <, >, /, ?.  
 

QUERY STRING AND FLASH

 
 
  
Now that we know what a query string is, let's see how it applies to Flash.   

When you put a Flash movie on a html page, you will have an OBJECT tag code that is similar to this: 

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://macromedia.com/cabs/swflash.cab#version=4,0,0,0"   
  ID=flaMovie WIDTH=250 HEIGHT=250>
  <PARAM NAME=movie VALUE="flaMovie.swf">
  <PARAM NAME=quality VALUE=medium>
  <PARAM NAME=bgcolor VALUE=#99CC33>
  <EMBED src="flaMovie.swf" bgcolor=#99CC33 WIDTH=250 HEIGHT=250 
    TYPE="application/x-shockwave-flash">
  </EMBED>
</OBJECT>

In that example, the Flash movie filename is: flaMovie.swf.  Notice how that filename is used twice; this is the result of incompatibilities between Netscape and Internet Explorer.  To be on the safe side, you should support/use both.  

You can append a query string following the Flash movie filename, and Flash will get the variable(s) from the query string for you automatically.  The variable(s) will go into the _root or _level0 of the movie.   Note: ActionScript 3 user should go here after reding this tutorial for Action Script 3 way of accessing query strings.

Let's see some examples on the Next Page.
  

 

  

<<NEXT PAGE>>
<<INDEX>>

Terms of Use
permadi@permadi.com 
(C) F. Permadi