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.
Table of contents:
- Should I use DeepLink instead of SWFAddress?
- DeepLink Demo
- Download
- Notes and known issues
- Installation
- What is deep linking?
- Thanks
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
I have made a simple demo showing how the DeepLink class works.
View DeepLink demo here:
http://www.f6design.com/projects/deeplink/
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.
To try this out, visit:
http://www.f6design.com/projects/deeplink/#/pageone/
You will notice I have structured my URLs in the same way as SWFAddress, which I think is a good method for ‘disguising’ the hash (#) symbol and producing a clean looking URL.
Download
Download DeepLink – the Flash DeepLink class, including the required javascript functions and demo files.
Notes and known issues
The DeepLink class has been tested in the following browsers:
- Firefox 2 – PC (should work fine in older versions too)
- Internet Explorer 7 – PC
- Internet Explorer 6 – PC
- Internet Explorer 5.5 – PC
- Netscape 8 – PC
- Opera 9.0.2 – PC
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:
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/deeplink.js"></script>Below that, include a single line script that tells DeepLink the id of your SWFObject instance:
<script type="text/javascript">
DeepLink.setObject('deeplinkexample');
</script>Embed your Flash movie on the page using the regular SWFObject method, such as:
<div id="flashcontent">
Alternative content goes here...
</div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject('deeplink.swf', 'deeplinkexample', '100%', '100%', '8', '#000000');
so.addParam('menu', 'false');
so.write('flashcontent');
// ]]>
</script>In your Flash movie, create a listener object, which will receive hash states from JavaScript (typically when the page first loads):
var deeplinkListener:Object = new Object();
deeplinkListener.receiveState = function(newState:String){
// code to handle hash variable goes here...
}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.
16 thoughts on “DeepLink: Flash deep linking class”
Comments are closed.
I see that you refer to my old post on the subject, please have a look at my take on a version of the state handling code that integrates with SWFAddress instead of my own scripts.
http://blog.iconara.net/2006/10/26/swfaddress-back-reload-and-bookmarks-in-flash/
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.
This was very helpful! I love how it can be easily implemented.
What’s the difference between this and SWFAddress? I haven’t tried swfAddress yet ’cause i’ve been trying a lot of the same kind for a while now.
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.
I’m using Firefox on a PC and the forward and back buttons on my browser DO work within your demo movie. Is this is a new development?
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!
This is great .. thank you.
The next version should address the back button in explorer so the site works like the deep linking on http://www.2advanced.com
Thanks!
Yes, back button wasn’t work on IE6. Try to fixit and i’ll be using this great stuff :)
THX
P
Today I just finished the integration of swfaddress on our portuguese design agency website: http://www.spirituc.com
The browser navigation is working at 90%.
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.
Can you create a post that merges flashScaler with SWFAddress? I am having trouble with this one.
@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.
Hi,
i would like to know if it’s possible to use this in a page flip – so that the url status get set with regard to page numbers?
thanx,
marc
@marc: What you describe is possible, though it depends entirely on how you have implemented your page curl.
Very nice work Jonathan.
I’m trying to make changeState call the google analytics code, so the urls are displayed in google analytics. Any idea how you would do this? I’m a bit of a novice.
Thanks