PASSING VARIABLES FROM HTML TO FLASH VIA QUERY STRING

 

EXAMPLE 3
Passing HTTP Query String to Flash Query String

 
 

  
Suppose I have a form page that opens another html page like below.  The form action is set as follows: <form method="GET" action="form.html">

Please enter your user name   (<input type="text" name="UserName")
Please enter your company name (<input type="text" name="CompanyName")
    

Click the Submit button above.  The form will send the query string to a file named form.html


This Flash movie contains two textboxes.  The top one will print the value of _root.UserName, the bottom one will print the value of _root.CompanyName.  These variables are retrieved from the query string.  You can see how the query string is passed later in this tutorial.

You should see something like above (assuming you have JavaScript enabled).   I entered john as UserName and MX9000 as CompanyName.  As you can see in the Address bar above, the form data is appended as a query string.  This is done automatically by the GET method of the <form> tag.  Here's the url, with the query string portion in red:

http://www.permadi.com/tutorial/flashQueryString/form.html?UserName=john&CompanyName=MX9000

So far so good, now we need to pass this query string to Flash.  Again, I will show 3 ways to do this, using JavaScript, ASP and PHP.  

Using JavaScript

Using JavaScript, you can get the address of the current page by using location property of the document object.   So, in the above example, the document.location will contain the value of http://www.permadi.com/tutorial/flashQueryString/form.html?UserName=john&CompanyName=MX9000

Just for fun, click here to see what the value of document.location of this page.  It gets better, you can also just get the query string portion by using document.location.search (the name "search" probably comes from early days of the internet where query string is mostly used by search engines?).  In the above example, document.location.search will contain the value of 
?UserName=john&CompanyName=MX9000  

Just for fun again, resubmit the form above and see what the value of document.location.search of that page is.  Click the Submit and Use JavaScript button; a new page with a Flash movie will open; then use the button below the Flash movie).  If you leave the default values, it should say: 

Note that the "?" sign is included, which is weird because it isn't really part of the query string.   However, for our purpose we can just pass everything to Flash by using document.write(document.location.search).  This is very similar to the method shown on Example 2 earlier:

<HTML><HEAD><TITLE>Example</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write(
  '<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"\n'+
  ' codebase="...see source...\n'+
  ' WIDTH="250" HEIGHT="250" id="flaMovie">\n'+
  ' <PARAM NAME=movie VALUE="flaMovie3.swf'+document.location.search+'">\n'+
  ' <PARAM NAME=quality VALUE=high>\n'+
  ' <PARAM NAME=bgcolor VALUE=#FFFFFF>\n'+
  ' <EMBED src="flaMovie3.swf'+document.location.search+'"\n'+
  '    quality=high bgcolor=#FFFFFF  WIDTH="250" HEIGHT="250" NAME="flaMovie1"\n'+
  '    TYPE="application/x-shockwave-flash"\n'+
  '    PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>\n'+
  '</OBJECT>');
//-->
</SCRIPT>
</BODY>
</HTML>

Note:

  • On JavaScript 1.2, the location property of the document  is depreciated (but still available) and is being replaced by URL (all capitals).  You can replace document.location with window.location.  Also, document.location.search is the same as window.location.search and location.search (assuming you don't have local variables with that same name)

 

Using ASP

With ASP, you can do something similar using the Request.QueryString object.  Here's an example of it.

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

Note that we must add the "?" sign after the swf filename because (unlike JavaScript), the "?" sign is not included in the Request.QueryString.  You can try that ASP code using the form below.  The form uses <form method="GET" action="formasp.asp">.   When you click the Submit and Use ASP button, the UserName and CompanyName will be passed as a query string to the formasp.asp, which executes the code above.

Please enter your user name   (<input type="text" name="UserName")
Please enter your company name   (<input type="text" name="CompanyName")
    

  

USING PHP

With PHP, you can do something similar using the $QUERY_STRING or $HTTP_GET_VARS variable.   Here's an example of it.

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

The form uses <form method="GET" action="formphp.php">.   When you click the Submit and Use PHP button, the UserName and CompanyName will be passed as a query string to the formphp.php, which executes the code above.

Please enter your user name   (<input type="text" name="UserName")
Please enter your company name   (<input type="text" name="CompanyName")
    

You can apply the same concept using other scripting languages. 

 
 

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

<<INDEX>>