Webforumz Newsletter - July 2007
Articles
Flash Query String Variables
One critique of the grandiose all-Flash site is the inability to use the web browser's back button to navigate within the Flash file itself. Everyone has at some point said "ah crap" when viewing an all-Flash site and forgotten that the browser's back button isn't going to send them back to a subsection of the Flash file, but rather back to whatever page or other site they were at before. And then going forward again, the viewer will probably end up back at the "this site is loading" section of the file and have to watch that whole pre-loading animation again. Is this the worst problem in the world? No, but it can be dealt with. And just bringing back the Back Button isn't the only reason to retro-fit an all Flash site with some of the code below. The same methods allow visitors to bookmark specific sections of your Flash pages too. Let's do it....
Query String Variables
Query string variables. You see 'em all the time, and probably don't pay much attention to them. They are like the little feeder fish that swim under big sharks picking up the scraps. In a URL, you'll find query string variables after the domain name, current page name, and a question mark. In the example below, I have one query string variable, named myVar which equals 1.
CartoonSmart.com/page.html?myVar=1
So if I navigated to that page above, I'd be dragging along that variable with me. Simple.
If I wanted to bring along more than one variable, I'd just separate them with an ampersand, like...
www.CartoonSmart.com/page.html?myVar=1&myVar2=baseball
Getting Query String Variables into .swf's
Using the same method, we can add externally setup variables into our published Flash files( the .swf ) by altering the embed code for the .swf. By the way, this article assumes you're a Flash developer and familiar with the embed code for adding a .swf to an html page.
So suppose your file is named "test.swf", in your html embed code, you´d locate both occurrences of test.swf and change the code to this....
test.swf?myVar=2
If you're using Adobe's newer embed code for Flash (the one that solved those Active Content changes to IE) then you need to do the same thing above, and change a couple more lines.
Again if your .swf is name test.swf, then locate this part....
'src','test'
And change it to...
'src','test?myVar=2'
Also locate...
'movie','test'
changes to...
'movie','test?myVar=2'
To test this out real quick, open a Flash doc (set the script level to Actionscript 2), save it as "test.fla" and add this code to frame 1...
stop();
gotoAndStop( myVar );Add some visual element that is different between frame 1 and 2 (like a circle on one frame). Publish test.fla and make the same changes above to the embed code in test.html. Now view the html file in your browser and test.swf should jump to frame 2 because 'myVar' equals 2. If you viewed test.swf by just opening it on your computer, it won't jump to frame 2 because myVar would be null. To see the difference in action visit these two links....
http://www.cartoonsmart.com/webforumz1/test.swf (no embed code)
http://www.cartoonsmart.com/webforumz1/test.html (with embed code and query variables)
And if you want to download the example files for this part you can do so here...
http://www.cartoonsmart.com/webforumz1/test1.zip
Adding some PHP...
The example above works fine for automatically jumping to the SAME frame of the .swf file every time, but that's obviously not that useful. We want to be able to jump around to different points within a Flash file and have the browser window's URL field change based on our location in the file. This will let us hit the back and forward buttons, AND bookmark sections.
First thing you can do is make a copy of test.html and change the name to test.php. At the very top of the file (above the code that's already there) add this...
<?php
$section = $_GET['section'];
if ($section == NULL){
$section = "home";
}
?>You´ve just setup a PHP variable ( $section ) , and its value will be determined by a query string variable also named section. For example...
test.php?section=portfolio
NOTE: The if statement in the PHP code just makes sure that if there's no query string variable to get a value from, then the value is "home". (so your Flash file should have a "home" frame label somewhere)
From here on, we´ll call our variables section (instead of myVar) and have it equal a string value (like portfolio) instead of being numerical. For a large Flash site, it's tidier to create frame labels as navigation points instead of keeping track of frame numbers.
Note that... test.php?section=portfolio ... would be bookmark-able. And as far as the back button is concerned that is a unique location. Different from say... test.php?section=aboutMe
So now all we need to do is get the value of the php variable, $section, into our Flash file. Again we´re just going to modify the location part of our Flash embed code. (Find and Replace is easiest to do this ) So locate...
test.swf?myVar=2
and change both occurrences to....
test.swf?section=
then find...
test?myVar=2
and change both occurrences to....
test?section=
So now the PHP code will write in the value of whatever $section might equal. Called up in the browser, that line would look something like... test?section=portfolio . Probably the easiest way to see this in effect is to view a live example. View the Source Code in the example link below...
http://www.cartoonsmart.com/webforumz2/test.php?section=portfolio
...notice in the Source Code all the PHP tags are gone (you won't ever see those).
That´s it for modifying the embed code.
Doing this with Actionscript 2...
We´re done with everything now except for the Flash part. If you already created a test.fla and did the earlier test using Actionscript 2, the only code change you need to make is back on frame 1 again. Remember instead of myVar as the variable name, we´re using section. So the script on frame 1 will be....
stop();
gotoAndStop( section );And since we're using values like portfolio, you need to create a Frame Label called portfolio for the file to jump to.
To test this out, I would recommend you create a few different frame labels, like about, home, gallery. Then reload your page and change the value of the query string variable each time. For example...
test.php?section=about
test.php?section=home
test.php?section=gallery
Note: You could still jump the file to frame numbers if you wanted. For example...
test.php?section=80
The example files for this using Actionscript 2 are downloadable here...
http://www.cartoonsmart.com/webforumz2/test2_As2.zip
Doing this with Actionscript 3...
If you want to try this using Actionscript 3, wipe out your previous code in Frame 1. Instead add this line....
var section:String = LoaderInfo(this.root.loaderInfo).parameters.section;What that does is setup a new string variable called section, and it equals the value of the query string variable also called section, which was brought into the file as part of the .swf's loading info (simplest way I can put that)
Now on frame 3 add this Actionscript...
if (section == null){
gotoAndPlay(2);
} else {
gotoAndStop(section);
}What that will do is setup a little playback loop just in case there's an initial delay in getting a value for the section variable (which is something I experienced testing). Once the variable section definitely has a value, it breaks out of the loop and goes to that frame label. Here's my examples....
http://www.cartoonsmart.com/webforumz2/test.php?section=portfolio
http://www.cartoonsmart.com/webforumz2/test.php?section=about
http://www.cartoonsmart.com/webforumz2/test.php?section=gallery
All going to the same file, just different places.
The example files for this using Actionscript 3 are downloadable here...
http://www.cartoonsmart.com/webforumz2/test2_As3.zip
That's all folks!