Asual

Monday,
23 Oct 2006

SWFAddress - Deep linking for Flash®

I'm glad to introduce you to our new project that aims to improve the way people use Flash websites and applications. It's been a long time since Kevin Lynch outlined the problem and provided some proof of concept code, but two years later there's still no a solid standard solution.

A few weeks ago we started working on a typical Flash website for a fellow photographer and I thought that it will be great if it supported deep linking. I had some JavaScript code that enables such behaviour for Ajax calls and it was fairly easy to connect it to the Flash movie using ExternalInterface. I also extended the SWFObject initialization in order to simplify the usage of the script as much as possible. This is how SWFAddress was born. As of yesterday it's available under the MIT license.

I'll be happy to hear your comments, suggestions and bug reports. My list for the final release include detection of unsupported browsers, improved Safari support and probably a sample that works with the default Flex 2 templates.

Future improvements may include support for query parameters and custom events for specific URLs.

Learn more and download at the SWFAddress homepage.

Posted by Rostislav at 3:30 PM in SWFAddress
Tags: swf actionscript javascript opensource swfaddress

« Previous Post | Next Post »

Comments:

Left by Niklas at Mon, 19 Apr 4:15 PM
Hmmm...this is AWESEOME!!
Would be cool with flashplayer 7 support though.
Still seems like alot of people still are using that...
Left by Rostislav at Mon, 19 Apr 4:15 PM
The AS2 class (SWFAddress.as) is in the MTASC folder. The AS3 one comes with the Flex sample.
Left by Rostislav at Mon, 19 Apr 4:15 PM
@Javier
Thanks for the report. Actually I have never considered the usage of SWFAddress from HTML, but it will nice. I've changed parts of the internal implementation and when the final 1.0 release ships next week, you'll be able to change the address using SWFAddress.setValue('/portfolio'); In order to enable typical links to work from inside Flash you will probably need to replace them automatically with an appropriate asfunction. I will provide such a sample if I find the time.
Left by Rostislav at Mon, 19 Apr 4:15 PM
@Roughy
http://en.wikipedia.org/wiki/Deep_linking
Left by Javier at Mon, 19 Apr 4:15 PM
@Rostilav
I tried within flash and it works. I dont actually need to interact from HTML, but from textareas inside flash so I am happy now :)
But the issue I talked about in my previous post is not related to this, is just general behaviour of SWFAddress. Can you try what I explained in my previous post?
Left by Matt at Mon, 19 Apr 4:15 PM
I couldn't find the AS2 class you refer to. Is it in the zip file?
Left by leo at Mon, 19 Apr 4:15 PM
First off, thanks for your work sir! Very much appreciated.

"a transparent support for Urchin/Analytics in the future."

Now that would just take it from awesome to perfekt :D
Left by Niklas at Mon, 19 Apr 4:15 PM
@Rostislav
Thank you for your fast answer!!
I totally missed that one - now it works perfect!!
Super...
Niklas
Left by Luis Neng at Mon, 19 Apr 4:15 PM
We have been developing full dynamic contents Flash sites that support the browser back/forward/refresh. I'm glad that somebody finally came up with another solution. I'm really interested about cross browser support and will try to integrate it in my code :)

Here are some examples:

http://www.fashionclinic.pt
http://www.fm.ul.pt
http://www.lpn.pt
http://www.hoteisreal.com

We tried a lot of ways to achieve these functionalities and the SWFAddress will be the next one!

Special thanks to Rostislav for providing the code to the Flash community! :D
Left by Rostislav at Mon, 19 Apr 4:15 PM
In HTML you will need something like:
<a href="/portfolio" onclick="SWFAddress.setValue(this.href);return false;">Portfolio</a>. Such links can be indexed by search engines and this is where the upcoming SWFAddress 1.0 will help. For HTML formatted content inside Flash you will need <a href="asfunction:SWFAddress.setValue,/portfolio" >Portfolio</a>
Left by Eric at Mon, 19 Apr 4:15 PM
I can't seem to get it to work. I've copied almost everythig form the sample flash files but i'm getting an "is not a function" error from javascript everytime i hit the back button.

This is happening in firefox 2 and IE 6.

Anyway, the script rocks
Left by Marcelo Volmaro at Mon, 19 Apr 4:15 PM
The Opera problem has been discussed in the Opera forums. Opera reloads the page (and possible other browsers too) because the anchor you want to "link to" is not on the page, so the browser "thinks" the page was not completelly loaded and forces a reload to see if that anchor apperars.

Maybe a solution could be by creating that anchors in the DOM before writting the link into the addressbar? You will have to change how the link is shown (you can´t have a anchor called "#/portfolio/2" but you can one called "#portfolio_2".

Hope it makes sense...
Left by jason vancleave at Mon, 19 Apr 4:15 PM
I have tried a few solutions now including this one and I always have the problem with IE blanking out to a white page after a few clicks that change the URL. We had a site that also displayed this problem and we moved from using ExternalInterface to the Flash/Javascript gateway and it went away.

Here is the URL i am trying it on and getting the blank pages in IE

http://staging.habitatintl.com
Left by Simplify Solutions at Mon, 19 Apr 4:15 PM
Wonderful and resourceful article on how to simplify web technology and solutions, this will also help in designing new web development in this direction. We would love to put this information on our website http://www.simplify.co.in as it will help developers based in Durg, Bhilai, Raipur and other cities of Chhattisgarh.

Thanks & Regards,

Simplify Team
Left by Simplify Solutions at Mon, 19 Apr 4:15 PM
Please look at this module;
http://drupal.org/project/swfaddress

Flash Web Designs - www.simplify.co.in
Left by Javier at Mon, 19 Apr 4:15 PM
Thanks. I dont know if I understand correctly when you say that in the HTML I will need to replace the links with an asfunction. Actually I would prefer to be able to use simple links as I say like href="#/portfolio". Do you think it is possible to make Internet Explorer trigger the communication with flash when the url is changed like this? By the way I tried with Safari and it also does not work, is only with Firefox.

Thanks again.
Left by Tim at Mon, 19 Apr 4:15 PM
There's currently an opensource solution for Flex 2 called URLKit. More info here: http://joeberkovitz.com/blog/urlkit

Joe recently added Safari support for it.
Left by Ray at Mon, 19 Apr 4:15 PM
This looks very promising indeed. I will test this when I get home from work tonight. Thankyou very much for your time and effort, especially releasing this for general cosumption.

I have been looking for a simple implementation like this for ages.
Left by jason vancleave at Mon, 19 Apr 4:15 PM
I think I have got it - I had a few getURL(javascript) calls being used for Google Analytics. Once I removed those IE 6 is fine.

Thanks, works great now. I was also able to use Geoff's swfobject javascript kit instead of ExternalInterface so making this compatible with Flash 7 shouldn't be an issue
Left by Tibor at Mon, 19 Apr 4:15 PM
No the AS2 class is not presented in zip file. Thanks to Rostislav for providing this great piece of code!!
Left by Roughy at Mon, 19 Apr 4:15 PM
Sorry for the stupid question maybe but what is deep linking? I'm a beginner in this field but this stuff sounds interesting.
Left by Matt at Mon, 19 Apr 4:15 PM
So... where do I get this class then?
Left by Rostislav at Mon, 19 Apr 4:15 PM
@Javier
The HTML sample I've provided won't work with the current release candidate. I wanted to give the basic idea how it can happen, but actually the call should look like this:
<a href="/portfolio" onclick="SWFAddress.setValue(this.href.replace(new RegExp(protocol + '//' + hostname + '(:' + port + ')?'), '')); return false;">Portfolio</a>

If you can stand to try it, please get the code from the Subversion repository on Sourceforge.net.
Left by Rostislav at Mon, 19 Apr 4:15 PM
Thanks guys!

@Marcelo
I've tried this approach and I've tested it now again, but with no success. I'm also experiencing a nasty bug with Opera that fails to execute the loadMovie() every time.

@Tim
I have missed this one, but it looks nice. SWFAddress was made originally for websites but then I thought that Flex support will be nice.
Left by Niklas at Mon, 19 Apr 4:15 PM
This doesn't work for me in IE6.
It works perfect in Firefox but the forward button doesn't work in IE - if I look in the history under forward button in IE it says "HTTP 404 not found". I don't consider myself to be good at AS so I do something wrong but I just can't figure what...
Take a look here...
http://widangdes.com/test/
Help would be appreciated...
Niklas
Left by Rostislav at Mon, 19 Apr 4:15 PM
The Flash sample contains a straight forward usage of loadMovie() that works everywhere, but fails in Opera from time to time. On a second request the content shows up.
Left by Rostislav at Mon, 19 Apr 4:15 PM
@Eric
Try to copy all the files from one of the samples on a webserver or send me an URL where I can see the problem.
Left by Rostislav at Mon, 19 Apr 4:15 PM
@Vincent
Flash Player 7 is not supported because of the ExternalInterface. Depending on the number of request such support can be added in the future.

@vn
There're strange issues with Opera, but I'm currently testing with the latest Flash Player 9 Update Beta and it seems that nothing fails.
Left by Anif™ at Mon, 19 Apr 4:15 PM
Wow...I have been looking a simple solution as well for quite a well now. I will have to try this out on my next project, looks amazing. Thanks for all the hard work, dedication and sharing it too!
Left by Marcelo Volmaro at Mon, 19 Apr 4:15 PM
I narrowed down the problem. Bug reported to Opera :)
Left by Lincoln at Mon, 19 Apr 4:15 PM
I had a horrific time with IE6, iframe deny's, and swfaddress and want to make it extremely clear as to what the issue was. Anytime I was going to a www.site.com/, IE6 would puke. dev.site.com worked fine, as did index2. Plagued with anger, I came to find out what the issue was via the comment by Rostislav. I want to make it clear: Inside of the package is a swfaddress folder that has the js and an swfaddress.html. As mentioned above, this swfaddress.html is used only by IE for its build of the iframe (used to keep history). However you bundle your javascript together, swfaddress.html MUST BE INCLUDED within the javascript folder that swfaddress resides in.

This allows IE to use iframe content.
Left by Rostislav at Mon, 19 Apr 4:15 PM
You should have the following file on the server:
http://widangdes.com/test/swfobj_adress/swfaddress.html
It's required and used only by IE.
Left by Marcelo Volmaro at Mon, 19 Apr 4:15 PM
What kind of problem? I´m using Opera for all my development, so i can help you here
Left by Miracle studios -- web design at Mon, 19 Apr 4:15 PM
Take a glimpse at our award winning <a href = "http://www.miraclestudios.in" > web design : http://www.miraclestudios.in
Left by Javier at Mon, 19 Apr 4:15 PM
Thanks Rostilav for the example. It works great.

There is still an issue I have with Internet Explorer (in Firefox and Safari works). If you go to your example, you click on contact and then you go and manually edit the URL in the address and change the last part "contact" for let say "about" you will see that the page does not actually change. I suppose the issue is that changing a anchor link does not fire the SWF funtions to make Flash aware that the url has changed, and if you then start clicking around on the flash links, flash gets aware and things work, but the url does not change anymore...

There is also another weird error. If you do the same with Firefox and after some clickings around, when you try to close the window you get and alert message with the url, and sometimes also a warning message saying that the script is trying to change the domain...

I suppose that if the user uses the application the "normal" way then he will not suffer these issues, but when debugging the application, as a programmer, is very annoying...

Thanks again for the examples.
Left by Vincent at Mon, 19 Apr 4:15 PM
Does this also works for flashPlayer 7?
Left by Mark Saunders at Mon, 19 Apr 4:15 PM
Regarding the transparent support for Google Analytics - is it possible to have this configurable - if the site is published from a CMS then we don't have instant granular control over the page(s) and would much prefer to retain control throughout the site?

Cheers
Left by vn at Mon, 19 Apr 4:15 PM
The Opera problem seems to be with flashplayer 9 only. What kind of javascriptcommunication does SWFAddress use?

You who claimed to have narrowed it down, what is the problem? Is it possible to make a workaround?
Left by estella at Mon, 19 Apr 4:15 PM
Hi this may be a problem that has been solved, but first I would like to say thank you the code. My problem is with IE6 only, when my site loads for the first time it reloads itself, then it fine after that can you tell me why, I'm loading functions not frames, but I am using eg SWFAddress.setValue('st1_form');. Then I'm using a simple onchange function with a switch to call the function when the value is set. Can any one help, Thanks
Left by Javier at Mon, 19 Apr 4:15 PM
Hey, thanks for this tool, is just great.

I am using it successfully, but I have a question. I dont know if is a bug or just my wrong idea. I am able to fire refresh of the page by doing SWFAddress.setValue('/portfolio');

And that works fine. I wanted to do something else, in the same page where my flash is I would like to have an html link like:
Go to portfolio. In firefox this technique works, the page moves to portfolio, but in Internet Explorer it does not seems to realize that the url has changed.

I have this example in http://synthesys.csic.es/temp/test/

Being able to use it this way is really cool because then inside textareas in my flash that are loaded from xml I can very easily create links that trigger loading of movies... It actually makes developing flash similar to simple HTML (I am a new flash user and I still tend to think HTML).

Do you have any idea how to force Internet Explorer to "communicate" with flash when the url has changed like this?

Thanks in advance.
Left by scott at Mon, 19 Apr 4:15 PM
I'm having a problem getting this to work correctly in Safari (4 beta). In FF, everything works fine but in Safari, it basically reloads the page everytime you rollover onto a new section (creating a white space, flash, all that nastiness).

Sounds a bit like the opera bug, any ideas on what to do?

you can see the site at www.valhallaconquers.com/test
Left by Digiguru at Mon, 19 Apr 4:15 PM
This is thus far the best solution I have found. thankyou so much for making the source available.
Left by Rostislav at Mon, 19 Apr 4:15 PM
@Javier
Manual changes of the hash part of the address lead to unexpected results and I think that this a problem of every implementation that uses this approach.

I can't tell you much about the Firefox domain issue because I can't reproduce it. Probably it can be caused by mixed usage of addresses like http://domain.com and http://www.domain.com.
Left by Rostislav at Mon, 19 Apr 4:15 PM
@Jason
I'm glad that you were able to make it work. An alternative to the ExternalInterface is being considered. I'm also planning to add a transparent support for Urchin/Analytics in the future.
Left by Mark Ritchie at Fri, 22 Oct 4:44 AM
Really looking forward to the next few days when people start properly aggregating this information.Will be interesting to see if what Google reports seem to match the studies we have done on the basis of your experiments for our website www.eurekaminds.com
Left by Stefania at Sun, 16 Sep 7:35 PM
There is a timer inside the JavaScript part of SWFAddress which lintess for changes of the address. It's used in Firefox, Safari and Opera but Internet Explorer doesn't require it. Soon all these browsers will implement a new HTML5 feature that will allow us to skip this interval checks completely.The ActionScript part of SWFAddress receives notifications using ExternalInterface and does not constantly listen for changes.

Projects

Syndication

Blog Search

Blog Categories

Blog posts

Recommended sites