The main drawback to Flash, besides it’s SEO implications, is it’s front door nature. This front-door nature is great if you are using Flash for a traditional animation. However, if you are building an application where users may not always need (or want) to enter via the front door then you want to allow a user to jump to the content they desire.
When I first started looking into Flash deeplinking about two years ago, I was unable to find many references – or even interest – in the subject. Any materials I was able to dig up in Google then, suggested making several SWFs, or a single SWF and placing it in multiple locations in your site to fake deeplinking. All of them used complex query strings to pass variables into Flash. I not only found these solutions messy, but also sort of lame. No offense to those who have attempted any of these methods, I just wanted something a little more intriguing to build, and practical from an engineering and maintenance point of view.
Recently, Google turned up this site on deeplinking, which is certainly much further along than a few years back, but still not exactly what I wanted to create.
My solution, which is obvious for all the Java and Apache fans out there, is turning my single SWF into a smart-application with deeplinking capabilities built right in. Finally, after a few hours of playing, I was able to figure out what it would take to create a clean URL – free from query strings – that allowed deeplinking into a single SWF.
I built the Scribble Board page, which doesn’t employ Flash, but is able to turn the URL into a variable that can then be passed into any application. In the case of Scribble board, it’s passed into a JavaScript function. The Scribble board lives at http://www.developnyc.com/scribble/. Everything that is in the URL after ‘/scribble’ gets sent to the page. You could build a message, like Deeplinking is the goal With a nice, clean URL:
http://www.developnyc.com/scribble/deeplinking/is/the/goal
There isn’t any ?name=value here. 
Let’s look at what we need to do in Apache. Specifically, in the .htaccess file.
## Turn on CGI for this directory - and Follow Symlinks
Options ExecCGI FollowSymLinks
<IfModule mod_rewrite.c>
# Turn the Rewrite Engine on for this directory
RewriteEngine On
##set the location of where the URL should be pointing
##The rewrite base that will appear in the FINAL url string
RewriteBase /scribble
## Turn the request through the page.cgi gateway
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^(.*[^/])$ $1 [S=2]
RewriteRule page.cgi - [S=1]
##
RewriteRule ^(.*)$ page.cgi/$1
## here you have it
</IfModule>
Okay, that was pretty simple, right? But, the fun doesn’t end there, now we need a document called page.cgi. Place page.cgi in the scribble directory.
The page.cgi file:
#!/usr/bin/perl
print "Content-type: text/html\n\n";
##
$title = "SEO Scribble Board";
$pathToScribble = "/scribble/";
##
$| = 0;
## get our variables / URL
$url = $ENV{'PATH_INFO'};
## split on forward slashes
@newArray = split(/\//, $url);
# make two versions of the URL for page title and javascript
$cleanurl = $url;
## replace all single quotes
$cleanurl =~ s/'/%27/g;
We have now captured the URL past ’scribble’ into the Perl script. And placed it into an Array. It’s now time to output some HTML and JS for the user to see. The page.cgi file continues:
print <<HEREDOC
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>$title | @newArray tf</title>
<link href="/css/nice_scribble_design.css" type="text/css" rel="stylesheet" media="all" />
<script type="text/javascript" src="/js/scribble_board.js"></script>
</head>
<body>
<div id="wrapper">
<div id="overallBox">
<h1><a href="/scribble/" title="Scribble Board">Scribble Board</a></h1>
<h2 id="talkBack">
<a href="javascript:addScribble($pathToScribble);" title="Add a Scribble to the Scribble Board">+ SCRIBBLE</a>
</h2>
<p id="userGraph">
<a name="main"></a>
</p>
<p id="foot">
Scribble Board created by <a href="http://developnyc.com" title="Scribble created by developnyc.com | 2006" rel="external">DEVELOPNYC.COM</a>
</p>
</div>
</div>
<script type="text/javascript">
<!--
// Set the Perl $cleanurl variable to the toJSFunction
var toJSFunction = '$cleanurl';
churnItOut(toJSFunction);
newWindows();
//--></script>
</body>
</html>
HEREDOC
##EOF##
That’s all it takes for the server side portion. Since the ultimate goal is to pass these variables into Flash, I am setting the Perl $cleanurl variable into a JavaScript variable, which gets passed into the JavaScript Function churnItOut(). So what does the JavaScript function look like?
function churnItOut(fromPerl) {
// weed out browsers that don't support the DOM
if (!document.getElementsByTagName) return;
fromPerl = unescape(fromPerl);
var thisArray = fromPerl.split("/");
var makeString = "";
for (i=1;i<thisarray.length;i++)
makeString += thisArray[i] + " ";
}
var userBox = document.getElementById('userGraph');
// empty any exisiting text
userBox.innerHTML = "";
// add the string into the DOM
userBox.appendChild(document.createTextNode(makeString));
}
There you have it, you have now passed a nice, clean URL into an application. For Flash AS2, you can use FlashVars to pass data into Flash. Read this Technote from Adobe on using FlashVars.
Let’s overview the technologies:
- Apache, mod rewrite
- Server Side Scripting language, we looked at an example of a CGI script written in Perl to power the Scribble board page.
- JavaScript
I haven’t gone totally crazy with the deeplinking on the foto eBook based sites, you can only link into different galleries and not specific photos.
For example, if you go to Kenneth Dickerman’s photo portfolio. It typically loads with the ‘Foreign’ gallery first. But, you can also append the name of the gallery to the URL and you can link right to Kenneth’s domestic portfolio.
In another site that I built, I am using a very messing looking query string to link directly into a single photo. Check out this Flash application for an example of deep linking to a single photo asset.
In a separate post, I will address the Actionscript 2 and Actionscript 3 logic needed to work with the clearn url structure, stay tuned.
