Today we're going a little technical. We recently launched a new Flash overview of our software platform on knotice.com. We have a bunch of great information in the flash presentation. As a result, we want to "link" to specific scenes and frames from a web page, allowing visitors to drill directly into sections they're interested in. We did some digging to see how to pull key/value pairs from a referring URL, or a query string into a Flash movie, and found that nobody had a soup-to-nuts explanation. One post either focused on the JavaScript, another would focus on the ActionScript, etc. We were able to piece it together and it’s working really well.Some Examples…
- http://www.knotice.com/concentri/ (you’ll see the introduction)
- http://www.knotice.com/concentri/index.htm?startFlash=quicktour (begins at the quick tour)
- http://www.knotice.com/concentri/index.htm?startFlash=faq (goes to the faq)
How it Works
In the second two examples you see the startFlash=quicktour. That’s what’s telling the Flash where to start. The following steps through what you need to do to get the key/value pair passed from your URL into the flash movie.
The JavaScript
The JavaScript below parses the query string and also contains the embed code. You’ll want to place it wherever your embed code would go. You’ll need to change swf reference, width, height, etc. Shout out to Peter A. Bromberg, Ph.D., for the JS. We tweaked it a tiny bit, but for the most part, it’s all him. You’ll see that all this is doing is taking the startFlash value from the URL and inserting it into the corresponding FlashVars variable (in bold) in the embed code. Note that it’s in two places to work in IE and FireFox.
<script>
function PageQuery(q) {
if(q.length > 1) this.q = q.substring(1, q.length);
else this.q = null;
this.keyValuePairs = new Array();
if(q) {
for(var i=0; i < this.q.split(“&”).length; i++) {
this.keyValuePairs[i] = this.q.split(“&”)[i];
}
}
this.getKeyValuePairs = function() { return this.keyValuePairs; }
this.getValue = function(s) {
for(var j=0; j < this.keyValuePairs.length; j++) {
if(this.keyValuePairs[j].split(“=”)[0] == s)
return this.keyValuePairs[j].split(“=”)[1];
}
return false;
}
this.getParameters = function() {
var a = new Array(this.getLength());
for(var j=0; j < this.keyValuePairs.length; j++) {
a[j] = this.keyValuePairs[j].split(“=”)[0];
}
return a;
}
this.getLength = function() { return this.keyValuePairs.length; }
}
function queryString(key){
var page = new PageQuery(window.location.search);
return unescape(page.getValue(key));
}
function displayItem(key){
if(queryString(key)==’false’)
{
document.write(“begining”);
}else{
document.write(queryString(key));
}
}
var flashMovie = ‘<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0” width=”684″ height=”410″ align=”middle”>’;
flashMovie += ‘<param name=”wmode” value=”opaque” />’;
flashMovie += ‘<param name=”allowScriptAccess” value=”sameDomain” />’;
flashMovie += ‘<param name=”allowFullScreen” value=”false” />’;
flashMovie += ‘<param name=”movie” value=”main.swf?id=’ + Math.floor(Math.random()*6000000) + ‘” />’;
flashMovie += ‘<param name=”quality” value=”high” />’;
flashMovie += ‘<param name=”bgcolor” value=”#ffffff” />’;
flashMovie += ‘<param name=”FlashVars” value=”startScene=’ +queryString(‘startFlash’)+ ‘” />’;
flashMovie += ‘<embed src=”main.swf” FlashVars=”startScene=’ +queryString(‘startFlash’)+ ‘” quality=”high” wmode=”opaque” bgcolor=”#ffffff” width=”684″ height=”410″ align=”middle” allowScriptAccess=”sameDomain” allowFullScreen=”false” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” />’;
flashMovie += ‘</object>’;
document.write(flashMovie);
</script>
The ActionScript
The following AS should go in a frame right after your loader. You need to make sure your movie is fully loaded before triggering this AS. If it’s not, and you target a frame/scene that isn’t loaded, it will start at the beginning of your movie.
startScene = _root.startScene;
if(startScene == ‘quicktour’){
gotoAndPlay(“main”, “quicktour”);
}
if(startScene == ‘faq’){
gotoAndPlay(“main”, “faq”);
}
if(startScene == ‘matrix’){
gotoAndPlay(“main”, “matrix”);
}
if(startScene == ‘profile’){
gotoAndPlay(“tour”, “profile”);
}
if(startScene == ‘standard’){
gotoAndPlay(“tour”, “standard”);
}
Final Comments
For the above to work, you just need to plug in frame labels in your flash movie for the sections you want to target. Change the AS accordingly based on those target sections. As long as the values in your query string – …index.htm?startFlash=”whatever”—match up with the AS – if(startScene == ‘whatever‘) – you’ll be good to go. One last comment; if you’re tracking rich media interaction in your analytics platform, you shouldn’t have any problems if your “startFlash” key value pair intermingles with other values in the query string. The above JS can parse it out. The only way it will break is if there is a ?, but nothing else (e.g.: http://www.knotice.com/concentri/index.htm?). Hope this helps someone out there.
