For years, one of the biggest challenges for Flash when it comes to usability has been interacting with the browser in ways that regular HTML pages are able to do natively. Things like browser back/forward navigation, title updates, bookmarking and deep linking with Flash has had spotty support over the years. To meet those needs, BLITZ decided to integrate SWFAddress with our Flash Framework to achieve a near perfect solution that works (or otherwise fail gracefully) on all modern browsers and platforms.
The integrated solution can be seen on the GE Imagination Theater website we recently launched. We are also able to deep-link into inner sections of the site from banner ads, and then bookmark those very sections. Not to mention some browsers gracefully transition to a new section if you were to re-type the URL to a valid page, and the URL continues to update for bookmarking in-between new sections and transitions. Cool Stuff.
We had to make a few modifications to the SWFAddress class. First, we had to make SWFAddress work with the BLITZ framework, which uses an XML file to define the site tree/structure. Sometimes we have to nest deeper content into a single section SWF and need a way to deep link into it, even though it is not defined in our site tree XML. We extended the functionality of SWFAddress so we can optionally use the last piece of the URL as variables in Flash. If the framework recognizes only a piece of the deeplink as a valid section, it will inject the remainder into the section movie as variable to use within.
The solution here is to leverage setValue when called by the browser, it will look for a valid page as defined in the XML by recursively stripping the deep link items (ex. #home/everyday/crossing) until it finds a valid page. Then, it uses that valid page to tell Navigation to go to that location and stores the trailing deeper link. The SWF itself watches the deeplink variable in the class so if you’re already in that valid page section but not looking at that deeper content, it will navigate to the deeper link content. Otherwise, the framework navigates to the valid section, which checks the deeper link variable onLoad and handles it from there.
Here’s an example:
The section “everyday” provides an interface to view several movies. However, a specific movie is not defined to automatically start playing. This is where deeperlinking comes in.
By putting “crossing” at the end, the modified SWFAddress class strips off the /crossing part to find the first valid section ad stores “/crossing” for when it arrives at the “everyday” section, or if it’s already there, the act of setting the deeplink variable which is being watched by the “everyday” swf causes the movie to start playing.
Other changes we made to the class included making a separate method for browser to flash and flash to browser communication. We didn’t want to make navigation in the movie wholly dependent on receiving an event from the browser, but if we tell Flash to go somewhere and then tell the browser to update, the browser will update and then fire the onChange which will tell Flash to go to the same place again. Another modification we made was to remove the interval check at the beginning of the class since the class won’t be loaded until the second frame.
One thing to watch out for is using getURL. We were making Omniture calls using getURL while using SWFAddress and that was causing really bad behavior in Internet Explorer. This is a documented issue on the SWFAddress site, but caught us all the same. Just make sure you use ExternalInterface for things like that if you’re using SWFAddress and you’ll be golden.