Deep Linking in Flash – SWFObject and SWFAddress

Flash is great, but accessibility can sometimes be a problem if it is not paid attention to. Direct linking, deep linking, back button support, these are very important to wire up in your applications. I am seeing many new RIAs, apps, sites, interactives still not do this and it is quite annoying.

The great thing about the web is that is gave users the ability to control the presentation and the context, from outside the presentation. By allowing users to use the back button and change urls in the address bar this was empowering. Empower your users and ad campaigns to get to different places of your application easily with deep linking, it is required for usability.

But this is hard right? Not really with great tools. What are you waiting for, SWFObject and SWFAddress make up THE platform right now for deep linking, embedding and back button support. These kits have been exhaustively tested and are very compact scripts to help you embed and then provide deep-linking, back button support and direct linking instantaneously almost.

Download SWFObject

Download SWFAddress

Both of these kits are well tested and provide instant small simple components of which to build complex systems on top of. SWFAddress builds on SWFObject tested embedding script and provides the tools you need to get deep linking running in your application in no time.

Note of caution, design implications (architecture design)

When you drive off the URL such as with direct and deep linking in Flash it does change your order of how you handle operations when you have to take into account the URL state. The first thing you have to do is when you receive an onChange event from SWFAddress that the URL has changed, you need to parse it and take action. However if you plan to deep link and provide usability throughout your flash site or app (even in the forms or multistep processes driven by URL) then you need to plan for this event and work this into your architecture for the url handling within the flash framework for your site.

A scenario might be:

  1. User using your flash app
  2. User clicks link or new section of your flash application
  3. INSTEAD of just animating the state in the flash application, you have to just update the section or URL (location.hash in javascript that provides the # name linking allowing the browser to stay put, or in this case SWFAddress.setValue((“/sectionname/page1″)),
  4. THEN the flash app or site is REACTIVE to the URL, reads in “sectionname/page1″ parses it and then animates to sectionname/page1.
  5. Or detect if the change came from the app or the URL directly and handle that differently in the onChange event with a subsystem.

Rather than just animating the app state or changing it, or showing that next photo on the button event, your button event would change the URL, then the flash monitoring the URL would push the onChange event. After that either animate in the next section or take appropriate action per the user requested action.

It isn’t like this for all areas or states of your application but you have to decide what is directly linkable, and when you want a state directly linkable then you have to wire it this way. Obvious choices are navigation items in your site, but they might also be specific cases like a multi-page form wizard that you want to link to step 3 directly, or a movieclip that someone can pass #3m2s to advance the movie by the url. There are many cases where you might want to provide deep linking into your flash application.

I know it sounds complicated? but it really isn’t, just a reversed way of thinking which we will highlight in the future with a tutorial and a fluid flash template. The SWFAddress site has great samples and examples, SWFAddress sets up the onChange handling in these samples and examples of how to do it in AS1, AS2 and AS3 so pick it up.

Download SWFObject

Download SWFAddress

Enable Deep Linking in Flash in 8 lines of code to start with SWFAddress:

From SWFAddress Documentation

1) Insert the SWFAddress script in your page directly after the SWFObject file.

<script type="text/javascript" src="swfobject/swfobject.js"></script>
<script type="text/javascript" src="swfaddress/swfaddress.js"></script>

2) Include or import one of the provided ActionScript classes. SWFAddress comes with versions for AS1, AS2 and AS3.3) Write your own navigation logic that will be executed when the address is changed.

SWFAddress.onChange = function()
{
    // Your code goes here.
}

4) Call the SWFAddress setter method from every button or action that requires deep linking.

this.onRelease = function() {
    SWFAddress.setValue('/portfolio/');
}

Check out the Asual blog (makers of SWFAddress) for more on good practices and bad practices with deep linking and more tips.Tips like:

Bad Practice: Address values naming using camelCase or other forms of custom convention

SWFAddress samples clearly define the best naming convention for deep links. Web addresses are case insensitive and the standard is lower case. For readability and Google SEO compatibility reasons the convention ‘my-deep-link’ is more appropriate than ‘myDeepLink’ or ‘My_deep_link’. The format http://domain.com/#/my-deep-link/?param=value is the only one fully compatible with the SWFAddress SEO rewriting.

Silverlight Deep Linking

This is also very simple in Silverlight to deep-link using javacript tools kits for Silverlight 1.0 which is javascript only, on location.hash change using a timer you could call an application method that might change the state or call certain transitions or move Canvases around, hide/show them, load content in, etc. Again, something you want to think about early on.

Other notes

SWFObject 2.0 beta5 is out and after 5 betas hopefully is nearing release

Pick up the code here for SWFObject 2.0

SWFObject 2 (script based) is the name again after a small switch and merge with UFO (standards based) to SWFFix but as Geoff Sterns pointed out, this seems to assume that something is broken.

SWFObject 2.0 is the new name again and let’s hope many more great tools are built on SWFObject 2.0 like SWFAddress which handles direct linking and back button support (using location.hash as most AJAX/RIA apps do to get deep linking and back button support).

About these ads

16 Responses to “Deep Linking in Flash – SWFObject and SWFAddress”

  1. Armando Alves Says:

    Great post!

    Altough i knew most of the scripts, it’s a excellent resource to show to accessibility zealots that keep slashing Flash capabilities.

  2. llops Says:

    Wow!
    Thank you drawk!!

  3. Wagner Amaral Says:

    Well, actually it’s not a good idea to just change the URL and rely on the onChange to update your app.
    It would, if the implementation was flawless, but that’s not the case. Browsers reacts differently to javascript manipulation of the hash.
    An example: you navigate to a website using swfaddress with firefox, then you type something different in the hash to navigate inside the website. Now if you use swfaddress again to change the hash, it will not work. Firefox somehow locks the url after you type on it.
    And, of course, there will always be that weirdo browser where swfaddress will not work at all, and the user would not be able to navigate inside your website.
    Try to make a system that can handle some nesting, like #/gallery/beach/show/130 and #/news/list and you can see things getting complicated.

    What I do to prevent this, is just let the app control it’s own navigation, and when an action takes place I update the url accordingly, ignoring the change event. If, however, I receive an event which was not generated by the system, it meant the user explicitly changed the url, so I tell the app to take the appropriate action.

    I plan to write a blog entry on this, as soon as I get the time to create a blog.. Hahaha
    I’ll pass by here when I do so.

    Cheers,
    Wagner

  4. Antti Kupila Says:

    I totally agree with this article. Good and clear writeup.

    A note on Safari: If you come to a site (no deeplink) and then navigate to some section by setting the hash, the page refreshes. This means that every site will refresh (for no apparent reason to the user) the first time the user navigates on the site. To solve this check if the hash is empty when the site is loaded (pretty much the first thing you do, possibly not linked to deeplink handling if you want a buildup and then handle a deeplink) and if it’s empty, navigate to #/. This will set the hash to / and the navigation will work flawlessly after this. The user won’t notice the page refreshing since it happens before anything is visible anyway.

    Another note. I don’t really know how search engines work but splitting the / could be of huge effect when it comes to SEO. The search engine thinks it’s folders of content which puts more value on the content itself (this, of course, is with having some alternative content on the site). You may have to link to the sub pages directly and then rewrite the url to add the #

    For example:

    somesite.com/some-category/some-item/image-1
    to
    somesite.com/#/some-category/some-item/image-1

    In addition to these urls being much more SEO friendly they make sense to the user. Same rules/best practices apply as with normal mod-rewrite.

    Good point Wagner with the navigation. It’s a good idea to not bind it to JavaScript — otherwise the navigation won’t work at all if it’s disabled (ouch!).

  5. drawk Says:

    Great points Antti.

    Wagner, but here are a few issues/solutions.

    – the script should check the URL from a timer if possible or script.
    – what about direct linking? If you call the action then update the URL, when you direct link to the URL with a #section1/page2 for instance how do you know to call that action? You could handle things differnetly if the location.hash is null or empty possibly or you could provide another means to back up your check.

    In my sample I hope to release soon, one solution does this and when it notices a change handles it. You could also call it through ExternalInterface. Or combine these solutions. I will have to check on Safari and some of the conditions you mention.

    Good stuff thanks.

  6. drawk Says:

    Wagner, also, maybe people are putting a default hash which SWFAddress does not recommend, but should, if it gets around this in Safari.

    Looking forward to your take on this and the app having it’s own navigation take, I guess you could just add a handler that when the site is directly linked to, takes the appropriate animation or action. I still think you need to be aware of this in architecture so that animations are trigged by a method that can be accessed by both a button or movieclip and a possible handler that will reload a state from a direct link.

  7. Rostislav Says:

    Ryan, thanks for the good post. SWFAddress is very close to it’s next release, there are just no public beta releases. The project has a logo for a long time, it can be seen on the asual.com homepage.

    Wagner, you’re talking about a Firefox bug which can be reproduced with plain html anchors. The URL gets locked but everything else works as expected.

  8. drawk Says:

    Thanks Rostislav, I didn’t see that logo, will add it. You should add it to the swfaddress page. I should have checked the main site but most people land directly on the swfaddress page from google and you might be missing some branding opportunities.

    Also, do you guys plan on updating enflash to AS3?

  9. drawk Says:

    btw thanks for your work on SWFAddress…

  10. Rostislav Says:

    EnFlash probably won’t be ported to AS3 because I lack the time and the need to make it. Flex is doing well in that area.

  11. SWFAddress and deep linking « Kaushik’s Blog Says:

    […] supports the most popular browsers. The blog also covers good topics on using SWFAddress. I found Ryan Christensen’s blog very helpful regarding this […]

  12. Good Usable RIA Applications in Flash and Silverlight « [ draw.logic ] Says:

    […] Performance Test (Tweener, TweenLite and Twease) in AS2/AS3 [benchmark]HOWTO: Using Loaders in AS3Deep Linking in Flash – SWFObject and SWFAddressLoading External CSS StyleSheets in Flash9 / AS3 / […]

  13. Bob Says:

    Checkout http://www.tobydehavilland.com/flurl

    A lightweight alternative to SwfAddress

  14. wiqos truxehi Says:

    wycva eifu sqowtedn etcowk wtip efobiasn jshxoy

  15. Help needed Says:

    Hello – I am an intermediate level scripter just starting out with swfAddress. I hope a help request posted here is not inappropriate, but here goes:
    I have successfully enabled browser history buttons from within flash. I want to have some buttons add their behaviour to the history list and some not to. I tried to achieve this with setHistory with no luck. Any advice?

    Here is a simplified version of what I am trying to do. 3 buttons, each of which puts some text in a text field. I want buttons 1 and 3 to be added to the history and button 2 not to be added. In Safari (mac), all the buttons are being added to the history. In FireFox(mac) the history list becomes unpredictable (at least I can’t figure out if there’s any logic to the order of what gets added). How do you keep a button behaviour from being added? Here is the as3 code:

    stop();

    import SWFAddress;
    import SWFAddressEvent;

    btnPage1.addEventListener(MouseEvent.CLICK, turnPage1);
    btnPage2.addEventListener(MouseEvent.CLICK, turnPage2);
    btnPage3.addEventListener(MouseEvent.CLICK, turnPage3);

    function turnPage1(e:MouseEvent):void {
    SWFAddress.setHistory(true);
    SWFAddress.setValue(“page 1″);
    }

    function turnPage2(e:MouseEvent):void {
    SWFAddress.setHistory(false);
    SWFAddress.setValue(“page 2″);
    }

    function turnPage3(e:MouseEvent):void {
    SWFAddress.setHistory(true);
    SWFAddress.setValue(“page 3″);
    }

    SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleSWFAddress);

    function handleSWFAddress(e:SWFAddressEvent) {
    copyText.text = SWFAddress.getValue();

  16. Difyreike Says:

    Подскажите шооблончег под WordPress 2.6.2, чтобы был похож на ваш drawlogic.com.

    Заранее благодарю)


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: