BLITZ creativity at its finest. RT: @vejnoska Probably should have expected this...http://t.co/VvY6b62ey6

posted 3 days ago on twitter

close
Flash Deep-linking
Flash Deep-linking

Flash Browser Back/Forward Navigation, Browser Title, Bookmarking and Deep-linking made easy with SWFAddress

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.

GE Imagination Theater Website

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.

SWFAddress uses ExternalInterface in Flash and a JavaScript class. What’s awesome about implementing it is you don’t need to understand how the JavaScript side works, it provides ActionScript classes written in AS1, AS2 and AS3 and the latest version of SWFObject.

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:

http://www.ge.com/imaginationtheater/#home/everyday

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.

http://www.ge.com/imaginationtheater/#home/everyday/crossing

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.

{ 7 comments }

Luis January 26, 2007 at 2:22 am

Good reading.

We have been using similar approach in some of our most recent projects, so far we have found problems always with Safari.

http://www.blog.lessrain.com/?p=515
http://www.blog.lessrain.com/?p=470
http://www.blog.lessrain.com/?p=357

A few months ago I found this solution from exanimo which works very well in E5.5, IE6, FF 1.5.06, and Safari 2.0.4.

http://exanimo.com/as2/statemanager

My only concern with the statemanager solution from exanimo is the JSInterface class used, generates errors when compiling with mtasc and after removing the errors , the engine doesn’t work anymore…

Nathan June 17, 2007 at 8:02 am

SEO for flash is easy … just right all the text content into a div tag before the flash embed on the page. Then in you css code make the html content none visable. This makes it so when the page loads all you see is the flash content. However when the bots scan the page they see all the html content. Its almost more effecient then a html seo page because you do not have worry about the design. If the user does not have flash the will then see the html content as an alternative … Problem sovled

Jones October 7, 2007 at 10:34 am

I have started to implement deep-linking but I encounter a problem and I notice that it occurs on GE’s site as well. When you go to http://www.ge.com/imaginationtheater/#home/everyday
then erase the /everyday it stops the address from changing. Is there any way to stop this from occurring?

Blake April 22, 2008 at 6:13 am

Unfortunately, SWFAddress mangles URLs which throws IE into a deaths spiral if you want to popup windows from via getURL or using the URLLoader. So, that means we have had to disable swfaddress across our entire web app. No deep linking for me.

Jayden June 1, 2008 at 4:10 pm

Blake, why couldn’t you just write a new JS function to open a popup, and call it from Flash?

deep links January 16, 2009 at 1:56 pm

The trick, if there is such a thing, is variety. Make certain you collect a steady and varied collection of links

Ian February 20, 2009 at 12:52 am

Hi im find this ayerviernes.com or method.com but works with wordpress (cool) and ajax load the content.
what its the name of this technique?

Thanx…