Menu

DeepLink: Flash deep linking class

The inability to bookmark ‘deep’ content has long been an accessibility criticism leveled at Flash. In fact, with a bit of Javascript and Actionscript trickery it is possible to create bookmarkable URLs that provide direct access to a Flash movie’s internal content. And with the introduction of the ExternalInterface class in Flash 8, this two way communication between Javascript and Flash just got a lot easier.

Inspired by the work of Theo Hultberg and Asual, I have developed a simple Flash class that demonstrates the implementation of deep linking in a Flash movie. While I don’t propose that my DeepLink class should be used as a substitute for Ausual’s excellent SWFAddress, it might provide a useful building block for exploring what the ExternalInterface class is capable of.

Should I use DeepLink instead of SWFAddress?

In a word, no! SWFAddress includes support for the browser history buttons, which makes it a much more comprehensive solution. Taking things further, Theo Hultberg has developed proper object oriented implementation of SWFAdddress. I developed DeepLink to satisfy my own personal curiosity about Flash’s ExternalInterface class, not as any kind of substitute for SWFAddress, and decided to release it publicly in the hope someone might find it useful in their own experiments with deep linking and ExternalInterface. Having said that, DeepLink is very easy to implement and does a decent job, so you should be able to use in production environments if you choose to. If you want to use DeepLink as the basis for further experimentation, please feel free.

DeepLink Demo

Note how each time you select a new ‘page’ within the Flash movie, the URL in the browser window changes. Each of these URLs is bookmarkable, and when plugged into a web browser will take you directly to the relevant content instead of the front page of the site.

Note that DeepLink tests for the availablility of ExternalInterface functionality, and will fail silently in situations when it cannot work.

DeepLink requires Flash 8+ to work. The ExternalInterface class was not available is previous versions of Flash.

To get DeepLink working, you need to be running your Flash site on a web server. A local web server on your development machine will do just fine.

DeepLink relies on modifying the hash value of the browser URL (the bit after the #), and if the user manually modifies the hash value then DeepLink will be unable to modify it any further.

The method by which DeepLink uses Javascript to communicate with the Flash assumes that you have used SWFObject to embed the Flash movie in your web page. This isn’t due to any technical requirement, it’s just that SWFObject is the defacto standard for Flash detection and embedding, and also happens to be what I personally use. It should be simple to change my Javascript sendState() function so that it communicates with standard object/embed tags, but you’re on your own if you want to have a crack at it.

Installation

In the <head> tag of your HTML page insert a link to the SWFObject JavaScript, followed by a link to the DeepLink JavaScript:

Note that the code inside your receiveState() function can be whatever you like. The hash string wil be received in the format one/two/three/. For an example of how this might work, see frame 2 of the .fla included with the demo.

Next, create an instance of the DeepLink class:

deepLinkController = new com.f6design.DeepLink(deeplinkListener);

And finally, alert JavaScript that the Flash movie has loaded. The JavaScript will then pass Flash the current hash value (if any):

deepLinkController.alertLoaded();

You may call the alertLoaded() function at any time, just make sure you don’t do it until the Flash movie is ready to receive deep links – typically this would be when the Flash file has finished loading.

What is deep linking?

If you’ve read this far and still have no idea what the heck ‘deep linking’ is, here is a quick summary:

Flash applications typically utilize only one HTML document, and therefore have only one URL. No matter how complex a Flash movie’s internal navigation system, or how ‘deep’ a visitor delves into the application, this URL doesn’t change. If the Flash application is located at http://www.mysite.com/, this address is all the user will ever see in their browser’s address bar. But what say a visitor wants to bookmark a content state that is located deep inside the Flash application? Or email a URL to a friend that takes them directly to deep content? A deep link allows the addition of this functionality to a Flash movie.

Deep linking in Flash is achieved by modifying the hash value of a URL. The hash value (the bit after the # symbol) is typically used to jump to an invisible anchor link further down the page. For the hash value to be useful as a deep link, it is necessary to extract it from the URL using JavaScript, and pass it as a variable to the Flash movie. The Flash movie can then parse the hash string and use it to perform a change of navigational state, such as jumping to a frame on the main timeline.

Thanks

Thanks obviously to Theo Hultberg and Asual, whose excellent work with deep linking inspired me to try it for myself. Also thanks to Geoff Stearns, the creator of SWFObject.

Thanks Theo, excellent work! I have updated the links in my article to reflect your more recent article on the topic, and in the section “Should I use DeepLink instead of SWFAddress?” I have mentioned that you have developed a proper object oriented implementation of SWFAddress.

Pat: The main difference is that SWFAddress includes support for the browser history – if a visitor clicks the ‘forward’ or ‘back’ button in their browser then the change will be passed to Flash and reflected in the address bar. In other words it gives an experience that is very close to the conventional HTML ‘page view’ that visitors are familiar with.

Benek: Wow, you’re right! Either I totally overlooked this when I put this class together, or possibly at that time I still had Firefox 1 installed on my laptop… Dunno. But back/forward button definitely won’t work in IE6 or IE7. Just more evidence that Firefox is a superior browser!

I’ve looked at swf address and deep link and found yours to be more “friendly” to us designer types. But in implementing deep link, I discovered it only works with AS2. Am I wrong? I recently designed a site using AS3 and am trying to deep link certain parts of the site. I think swf address offers example for CS3. Is that my only answer? Or can your codes be tweaked for AS3?

@Tom – yep I’m sure you are correct. I’ve never tested the class in AS3, and I can’t say if/when I’ll get around to porting it from AS2. I don’t imagine it’s hard though, there’s not much code there… But I’d probably recommend using SWFAddress instead, since a) it already has an AS3 version and b) it is regularly updated.

@Melissa – I’m not entirely sure what you are asking. You mention FlashScaler and SWFAddress. FlashScaler is my script for forcing scrollbars when the browser is scaled below a certain dimension, and has no compatibilty issue with SWFAddress that I’m aware of.