Noscope

Sending Variables to Flash Using Query String & Javascript

December 29th, 2003 by Joen code, flash, javascript, sourcefiles

There are many ways to send information to Flash from external sources. One such method is using the so-called “query string”. Usually, this is mainly used in conjunction with PHP and ASP, but it is actually possible using nothing but plain Javascript.

Download the sample code here
View the demonstration

Technically speaking - Query String

The Query String is the part of the URL in your address bar that begins with a ‘?’, for example

"index.html?year=2003"

This is used as a simple way to send variables to the particular page.
More variables can be sent, using ‘&’ as a seperator, for example

"index.html?year=2003&month=dec"

Passing variables to Flash

The query string can, for instance, be used to pass information from within your HTML document to a Flash movie.

To do this, in your HTML document, where you define your Flash movie URL, write this:

myfile.swf?year=2003&month=dec

… myfile.swf will load with predefined variables called year and month, with the respective values of 2003 and dec.

There are also other ways to send variables into Flash, from an HTML page. It can be done with Javascript using document.[FlashObject].SetVariable(’varname’, ‘value’) (written from memory, may not be entirely accurate). Unfortunately, I’ve found this method to be unreliable on certain systems, so I recommend the query string method whenever possible.

However, using the query string to send variables into Flash is a static method. That is, it has to be hard-coded into the HTML document by the document author. It would be nice, to be able to simply use the query string directly from the address bar URL. However, this only passes variables to the HTML document, they are not automatically forwarded to the Flash content.

Forwarding query strings from the address-bar into a Flash movie

Usually, forwarding query string variables from the address bar to subcontent is impossible without the use of dynamic server page technologies such as ASP or PHP. It is, however, possible using JavaScript.

Taking this JavaScript code snippet a little further, we can send variables one step beyond just the HTML page… that is, directly into a Flash movie. In this case, we need to pass on the year and month.

The following piece of code, grabs the query string from the addres bar, parses it into a readable format, and saves it. It then proceeds to build the code necessary to show the Flash object from scratch.

// write flash obj with query string
function writeFlash() {
	// appearance vars, these can be customized to your liking
	var width = '200'
	var height = '100'
	var src = 'query.swf'
	// queries -- type in the variables you want to send to flash here
	var queries = '?year='+QueryString('year')+'&month='+QueryString('month')+''
 
	// assemble flash obj
	var l1 = '<object width="'+width+'" height="'+height+'" data="'+src+queries+'" type="application/x-shockwave-flash"><param name="quality" value="high" /><param name="src" value="'+src+queries+'" /></object>'
 
	// write all lines
	document.write(l1+l2+l3+l4+l5)
}

The result is an HTML page with Flash and Javascript that -

• reads the query string portion of the URL
• via Javascript passes this on to the HTML document
• again using Javascript passes this from the HTML document to the Flash movie

If you want to use this code on your page, I sincerely recommend you view the demonstration, and download the working code sample & source.