Deep/Stateful Linking in Flash MX 2004 Applications
This article discusses how to combine Flashobject and BrowserStateManager in Flash MX 2004 to enable stateful or deep linking (sometimes called permalinks) in flash applications i.e. enable browser Bookmarking/Favorites functionality, plus a few other neat features.
1. Introduction & Demo
2. About Flashobject
3. BrowserStateManager
4. Setting up BrowserStateManager in the .fla
5. Setting up Flashobject and the HTML
6. Conclusion
1. Introduction & Demo
Early this year (2005) I set about building a flash front end for my image database, to run alongside a html version sharing the same backend, assets etc.
Towards the top of the feature list for the flash site was that users should be able to bookmark specific images in my site. This was an important feature as it was also required to integrate ecards and ordering into the application. I didn't know at the time how to make it happen but kept it in mind while laying out the application, and began to research the problem.
I came across Flashobject and BrowserStateManager - combined they provide a good allround solution to bookmarking, as well as bunch of other neat stuff. If you want to see it in action before reading further:
No Bookmark/Favorite
http://www.imagesofvictoria.com.au/flash/
The application chooses the initial gallery and image, based on default values. These defaults are pulled in from outside of flash.Gallery Bookmark/Favorite
http://www.imagesofvictoria.com.au/flash/#galno=3
The url points to a specifc gallery in the flash application, but not a specific image. The application chooses the initial image within the gallery.Gallery/Image Bookmark/Favorite
http://www.imagesofvictoria.com.au/flash/#galno=5&picno=2
The url points to a specific image within a specific gallery - accomodating standard user bookmarking.
Btw, you aren't limited to two vars in the url. e.g. my site uses an additional URL var (CUID) which is used to process eCards should the visitor be arriving at the site to collect an eCard sent to them.
2. About Flashobject
Flashobject is a great script written by Geoff Stearns allowing you to:
• Embed your swf in the page using javascript
• Detect flash player version
• Show alternative (non-flash) content when needed in a div
• Provide a skip detection option
• Pass url vars into the swf
Great stuff and easy to implement. We just need BrowserStateManager to write vars back to the browser.
Refer to Proper Flash embedding: FlashObject Best Practices on Geoff's site for further information and to download Flashobject.
3. About BrowserStateManager
BrowserStateManager.as is a MX2004 class written by Kevin Lynch, chief software architect at Macromedia. Kevin states that he wrote the class in response to (valid) criticism that Flash RIA's were not web friendly in that users could not bookmark specific states. BSM allows you to:
• Pass url var into the swf
• Set and Get browser values
Refer to Stateful Linking to Rich Internet Applications on Kevin's site for further information and to download BrowserStateManager.
4. Setting up BrowserStateManager in the .fla
Download BrowserStateManager from Kevin's site. Be sure to read his articles, view the demo, and download the fla.
Flash needs to know about BrowserStatemanager.as. Open Publish Settings in MX2004. Actionscript version should be set at 2.0. Player needs to be 6 or better. In the example below, as I've placed BrowserStatemanager.as in a directory called classpath located within the directory that contains all my other site assets I've opened the Settings dialogue and browsed to that classpath directory.
To use BrowserStateManager.as import it in your Flash application and create a new instance.
Now Flash will go looking for BrowserStateManager.as at the location you specified in the Actionscript Settings each time you publish the .fla
The next step is to notify the browser whenever you would like to change/add vars to the URL and/or modify the page title in the browser. On my site this happens just after the image has finished loading.
In the above example something like picno=3&galno=5 would be added to the browser url, and the browser title would be set to whatever the value is for title.
Regarding publishing settings, you will need to set a minimum of Player 6 for this whole shebang to work for ya. But - if you publish your .fla now nothing will work - stuff needs to be added to the HTML page yet.
5. Setting up FlashObject and the HTML
Download FlashObject from Geoff's site.
Once you've downloaded the flashobject.js script and checked out Geoff's demos, it's probably a good idea to take a look at the finished html source below to see how it fits together.
View the finished HTML source here
Before setting up FlashObject we need to place a few things into the HTML page that BrowserStateManager is expecting to find there - script to change the title and URL in both MSIE and non MSIE browsers. Place the following the head.
We need to point to flashobject.js - be sure to change the path to suit your situation:
<script type="text/javascript" src="flashobject.js"></script>
We now need to setup Flashobject to:
• embed the swf
• detect player version
• show alt content if needed, with skip detect
• passes url vars into swf
• passes vars into swf that browserstatemanager expects
The easiest way to do all the above is to look through the finished html which is commented.
The swf is written into the flashcontent div, overwriting the alternative content, unless of course the script has detected a flash player version below what you've specified - in which case the alternative content is displayed. You might want to include some text in the flashcontent div anyway, as extra info for search engine bots.
I think it's important to include the skip detection option so that if for whatever reason a user with flash player installed does get shown alt content they can still choose view the flash.
My main tip regarding skip detection is to use:
YOUR_URL.HTM#detectflash=false
instead of:
YOUR_URL.HTM?detectflash=false
The reason being that if you use the latter with the ?, any vars you send to the browser url via your flash app will be appended . e.g.
YOUR_URL.HTM?detectflash=false&myvar1=bla1&myvar2=bla2
If you use the #, #detectflash=false is overwritten with your vars
YOUR_URL.HTM#myvar1=bla1&myvar2=bla2
Of course, there are other ways around this problem, but this way requires the least amount of tooling around and it works.
Flashobject is great for passing url vars into flash, via flashvars. Again, refer to the finished html - that's probably the easiest way. The url vars passed into the swf exist in the _root timeline. You'll need to check for them in your script and deal with situations where they don't exist.
The most important vars we need to pass in via Flashobject are vars that browserstatemanager.as is expecting - InitialURL and isMSIE. It would've received these if we used Kevin's code to embed the swf instead of Flashobject. Again, refer to the finished html.
6. Conclusion
Overall I think this a neat solution to enabling browser bookmarking/favorites in your flash apps, while retaining the addtional benefits of flashobject. It's not perfect as you will have noticed and does not behave exactly like html, but all up it's a lot better imo than offering nothing.
Does the deep linking work in all browsers, on all O/S? Probably not - should work fine on Windows though in most, if not all browsers - so that's closing in on over 90% of users out there. On Mac, maybe, maybe not, probably some, depending! As far as I know it fails gracefully
There's some stuff you will need to work out that is beyond the scope of this article. For example, you'll need to check for vars being passed into your swf, and handle situations where they don't exist.
If you're having trouble implementing the above, the best bet is to refer to Geoff's and Kevin's documentation and sample files, as well as the html sample source provided here.
All the best with it!
Pete Walsh
Magicpixel
