Sending Variables to Flash Using Query String & Javascript

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 = ''

	// 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.

28 thoughts on “Sending Variables to Flash Using Query String & Javascript”

  1. Nik says:

    Hey Joen, thanks for this, it proved very useful today! I was trying to work out the best method to achieve something for a client and thought “If only I could talk to flash through the URL“… a quick google serch later on “send variables to flash”, and good old noscope was top of the list! Thanks!

  2. Joen says:

    Nik,

    It’s a small world!

  3. MIcah says:

    Has no one heard of FlashVars?

    this wont cause the flash movie to need reloading, which is what happens if you use the query string approach.

  4. Roberto says:

    Good tutorial, however seems to work only with IE. I could not make it work with Firefox/Opera… Anyways. Cheers.

  5. Darius says:

    In the demonstration page, there are semi-colons before and after the Flash movie. When I apply this code in my project, I also get semi-colons at the top of the page. Do you know why this is occurs?

  6. Ty Gossman says:

    It worked for me in firefox…

    I have a pre-made flash movie… that has the ability to click a link for datapoints on a map created from an XML sheet… this would seem to be the best way to simple click the point “hyperlink” and pass those variable to another pop-up window on a layer above the map movie that will show more content for featured points…

    Works for me… I think wish me luck.

    The DIY map is free over at backspace.com under work|clickable map… check it out.

    Tell John I said hi.

  7. Christina says:

    Thank you for posting this detailed example. Your website and shared information is amazing.

    Unfortunately I do not know enough to determine if this solves the issue I’m experiencing with FireFox. I am not very experienced with javascript and tend to rely on WYSIWYG apps to edit our website, such as GoLive. Please excuse me if I sound like an amateur. 🙂

    I have built a Flash demo and uploaded to our corporate website as an .swf file. It plays perfectly in IE, however, it plays at 50% its size in FireFox.

    http://www.schoolmessenger.com/foodservice/foodservice_demo.html

    Do you know of any reason why this is occuring?

    Many thanks for any assistance you can lend in troubleshooting.

  8. Joen says:

    Hello Christina,

    I can’t be completely sure, but I’m 90% sure that your problem is the code you use to embed the Flash demo.

    Quite simply, it seems you embed the Flash demo as though it was a Windows Media file.

    I think you’ll be able to solve your problem if you use real Flash embed code. I’m not sure if GoLive can do that, but I can say it should be able to do that. I know that my recommendation to you: Dreamweaver can do it. The simplest solution, however, would probably be for you to use Flash to publish (File > Publish), and then open the HTML file it generates in GoLive.

  9. Christina says:

    Thank you! I think the HTML option works best for me. It’s definitely the simplest solution.

    Keep on doing your thing here… great site! 🙂

  10. Dwayne says:

    I?m meed to have a flash give a quote of the day for the year. I don?t no javascript that well but I found a great source code that will print out in html. Can someone help me to get this into flash. thanks

    Below is the source:

    //Place into HEAD

    //Place into BODY

    “)

    document.write(“” + dayName[now.getDay()] + “, ” + monName[now.getMonth()] + ” ” + now.getDate() + “, ” + now.getFullYear() + “.” )

    document.write(“”)

    if (now.getMonth() 0) document.write(“"” + Jan[now.getDate()] + “"“)
    if (now.getMonth() 1) document.write(“"” + Feb[now.getDate()] + “"“)

    if (now.getMonth() 2) document.write(“"” + Mar[now.getDate()] + “"“)
    if (now.getMonth() 3) document.write(“"” + Apr[now.getDate()] + “"“)

    if (now.getMonth() 4) document.write(“"” + May[now.getDate()] + “"“)
    if (now.getMonth() 5) document.write(“"” + Jun[now.getDate()] + “"“)

    if (now.getMonth() 6) document.write(“"” + Jul[now.getDate()] + “"“)
    if (now.getMonth() 7) document.write(“"” + Aug[now.getDate()] + “"“)

    if (now.getMonth() 8) document.write(“"” + Sep[now.getDate()] + “"“)
    if (now.getMonth() 9) document.write(“"” + Oct[now.getDate()] + “"“)

    if (now.getMonth() 10) document.write(“"” + Nov[now.getDate()] + “"“)
    if (now.getMonth() 11) document.write(“"” + Dec[now.getDate()] + “"“)

    document.write(“”)

    document.write(“~ Author ~“)

    document.write(“”)

    // End –>

  11. Quinton says:

    Ok so here’s my question. I’m making a video player in flash 8 using the built in FLV Playback component. I was wondering if it is possible to send variables from the address bar to tell the swf file what FLV file to play. Hope I was clear.

    Thanks in advance,

    Quinton

  12. Jon Kuta says:

    This solution has worked for me but I also got those semi-colons before and after the Flash movie. Originally, I set the text color of my .html page to the same color as the page background which made the semi-colons “invisible” … However, I was then able to officially get rid of them by removing the ;’s from the ends of the var declarations (var l1… var l2 … var l3, etc..) in the javascript code and the variable passing query still works accross all browsers I’ve tested.

  13. Jon Kuta says:

    … the only question now is how to get this query string javascript code to also work with Microsoft Internet Explorer’s recent browser change which forces users to click to activate embedded flash content.

    The Adobe development team has provided a workaround for embedding flash content in .html pages so I.E. users are not asked to click to enable and interact with the flash site. Information on Adobe’s workaround can be found here: http://www.adobe.com/devnet/activecontent/articles/devletter.html. This solution works great for embedding stand-alone flash documents on a web page, but uses its own set of javascript code that does not also handle the query string functionality that I require for one of my projects.

    If anybody knows how to address both issues, please post here!

  14. Joen says:

    Jon Kuta said:

    … the only question now is how to get this query string javascript code to also work with Microsoft Internet Explorer?s recent browser change which forces users to click to activate embedded flash content.

    […]

    If anybody knows how to address both issues, please post here!

    Just use SWFObject and you’ll be fine. This javascript/query thing needs to be updated anyway, which I hope to do in the near future.

  15. Murtaza Chandan says:

    dear friends,

    hi,

    i have a proble which i’m trring to solve since couple of days.

    is it possible to play .wma, .wav, .mp3, .mid in flash using querry string.

    flash hTML code:

    —————————————–

    in flash on play button:

    on (release) {

    _root.loadSound(_root.soundname);

    }

    ——————————————

    is this code correct.

    if not pls help me solving this problem. and give me correct code

    thanks

  16. j-tizel5000 says:

    uh, LoadVars? a little easier to work with it seems….

  17. Boristfrog says:

    Hi, just want to say thanks. Haven’t tried it out on my machine, but this seems to be just what I was looking for. Cheers.

  18. Al says:

    this is much more useful and reliable.

    also alleviates the need to “click to activate” in internet explorer.

    will add variables and parameters to your likings…

    http://blog.deconcept.com/swfobject/

  19. L-Train says:

    It seem the code works, But when i try to use “_root” in Flash 8. It doesn’t work. Can anyone help?

  20. Smitty says:

    This is a very good tutorial and exactly what I was looking for. It works in IE and Firefox and if it doesnt work you might wanna check your other javascript functions.

    As for FlashVars- its a much better solution to the query string like everyone has stated…HOWEVER, you cant pull from the query string with FlashVars. yes you can use php, asp, etc to pull the query string and then load into FlashVars, but with this technique you are killing two birds with one stone. If you want something simple, this is the way to go.

    Very good!!!

  21. Chris says:

    Just what I was looking for, thanks a lot!

  22. fesh says:

    It was a great tutorial! I really need that piece of code snippet for the site im working. I was looking a way on how to send variables from a plain html to flash movie and it was the exact thing I need. keep up the good works! and God Bless!

  23. Oli says:

    This is perfect but I need the exact same thing without the Click to activate ActiveX…. how can I do this… Thanks!

  24. Pherank says:

    So far, this method is the only way I know to send a variable from a menu link on one page, to a Flash object on another page. Well done!

    As for the semi-colon problem. I recommend that people actually count the number of semi-colons and match the number (4) to the function code. Then you will notice that the 4 variables (var 11 – 15) end in semi-colons. Remove those semi-colons.

  25. GUI says:

    Hi!

    This tutorial is great!! Thnx a lot for sharing!!!!

    I

  26. Asa says:

    Holy …. I love you for that! Didnt had as much luck as some ppl commenting here, spent more then half my weekend finding a solution for that! Nothing usable out there, NOTHING! Just this wonderful little nice blog entry… 😀 Thank you sooo much!

  27. Kyle says:

    I was wondering why when I add a line with an extra paramater

    param name=”wmode” value=”transparent”

    it doenst display as it should in the browser?

    I would appreciate any help

Comments are closed.