Overview
This tutorial / how to / example will show how to get the current url from the browser to flash, and even how to get the query string parameters from the url into actionscript using ExternalInterface.
It has been a dilemma for many people to get this information into flash across browsers and without having to rely on flashvars or javascript, but to just have it work.
I wrote a post on it earlier, although it seemed it wouldn’t play nice with Internet Explorer IE, I later realized that it was only because of the way my blog is configured to embed flash. The call ExternalInterface.call(“window.location.href.toString”); or even ExternalInterface.call(‘eval’, ‘window.location.href’); which basically do the same thing.
This can be taken even further and we can read the query string, which, if you don’t know what that is, is the data contained in the url. The data is sent as paired strings, the key and the value. So, for example I could have a url http://example.com/index.html?var1=one&var2=two&var3=three. The question mark separates the actual url path from the query string. So following the ‘?’ we see three variables: var1, var2 and var3, and their corresponding values: one, two and three. They are seperated as pairs with an ampersand (&) and then the key and value are seperated by an equals sign (=). So it goes url?key=value&key=value&key=value…
Once we pass the complete url into our swf, it’s pretty easy to parse the keys and corresponding values.
Steps
- Rather than use url with ExternalInterface.call(“window.location.href.toString”); implement the QueryString class make a new QueryString This will do most of the work for you: var myPath:QueryString = new QueryString();
- Upon creation of the QueryString object the class reads the parameters automatically by parsing the parameters after the ‘?’ and delimiting on the ‘&’. So you get var1=one and var2=two
- Set up each parameter (key) as a variable in the parameter object of the QueryString class assigning it’s value to that variable.
- Access your values as myPath.parameters.var1 and myPath.parameters.var2
- unescape() your values to make the usable, unless you need them to be encoded or course. Unescape decodes the string from URL-encoded format (converting all hexadecimal sequences to ASCII characters). If your parameter had been some funky encoded string like var4=this+stuff%3E%22%28%29%3F, after you unescape(myPath.parameters.var4) you get: this stuff>”()?.
Example
Here’s a working example. This link has the parameters appended to it following the question mark ‘?’ and separated with an ampersand ‘&’ like all query string parameters. I have one for myName (Circlecube) another for myText (Jo Jo is a monkey) which are both pulled out and put into their own text box after they are unescaped, and then there are a couple more parameters just to show, the aNum (3013), anotherParam (more), and ref (http://blog.circlecube.com/…)
Special thanks to Abdul Qabiz example. I rewrote it for as2 so it would work with some flash projects I’m working on.
I use the new swf object 2 to embed the swf. Go get it here: 
Actionscript:
The actionscript layer of the swf
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| import flash.external.*; //so we can use externalInterface
import QueryString.as; //so we can use the QueryString Class//make a new QueryString named myPath
var myPath:QueryString = new QueryString();
assignVariables();
//custom function to handle all the query string parameters
function assignVariables() {
//if myName parameter exists
if (myPath.parameters.myName) {
//assign it to the text of the myName text box
//unescape() will translate/unencode the url characters
myName.text = unescape(myPath.parameters.myName);
}
if (myPath.parameters.myText) {
myText.text = unescape(myPath.parameters.myText);
}
if (myPath.url) {
//get the complete url (including any parameters)
thisUrl.text = myPath.url;
}
recurseTrace(myPath.parameters, " ");
}
//function to recursivly print objects in heirarchy as string
//so we get all parameters no matter what the key traced into
//the allParams text box.
function recurseTrace(info:Object, indent:String) {
for (var i in info) {
if (typeof info[i] == "object") {
traceParams(indent + i + ":");
recurseTrace(info[i], indent + " ");
}
else {
traceParams(indent + i + ": " + info[i] + "\n");
}
}
}
function traceParams(traceMe:String) {
allParams.text += traceMe;
} |
The QueryString.as class for as2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
| class QueryString {
//instance variables
var _queryString;
var _all;
var _params:Object;
public function QueryString() {
readQueryString();
}
public function get getQueryString():String {
return _queryString;
}
public function get url():String {
return _all;
}
public function get parameters():Object {
return _params;
}
private function readQueryString() {
_params = {};
try {
_all = ExternalInterface.call("window.location.href.toString");
_queryString = ExternalInterface.call("window.location.search.substring", 1);
if(_queryString) {
var allParams:Array = _queryString.split('&');
//var length:uint = params.length;
for (var i = 0, index = -1; i < allParams.length; i++) {
var keyValuePair:String = allParams[i];
if((index = keyValuePair.indexOf("=")) > 0) {
var paramKey:String = keyValuePair.substring(0,index);
var paramValue:String = keyValuePair.substring(index+1);
_params[paramKey] = paramValue;
}
}
}
}
catch(e:Error) {
trace("Some error occured. ExternalInterface doesn't work in Standalone player.");
}
}
} |
Download
Here’s a zip file containing the sample files, the QueryString Class file, and even the swfobject javascript file.
getURLParams.zip
Loading ...
Stomper Scrutinizer Browser AIR App
Software for viewing websites through a simulated fovea vision. Since not everyone could set-up, let alone afford a real eye-tracker. This software uses the mouse pointer as the user’s focal point, or foveal view. It blurs everything except where your focal point (the mouse) is. It is helpful because it forces you to re-think web design from an extreme usability standpoint. This browser software was built using AIR and Flex. Using this software as an eye-tracking simulation, you can get a better idea of how users interact with your site design.
I was responsible for programming and designing some key functionality of the app: the menu bar logic, bookmarking engine, capturing and saving of screenshots, and the loading bar which shows page load progress, and the overall browser chrome/skin.