One of the biggest challenges when creating social-linkable flex applications, is deeplinking the application state.  This is pretty straight forward once you get the basic idea, and this tutorial should get you up and running in a few minutes.

1. Create a new Flex 4.0 Project

2. Download the SWFAddress SWC @

3. Add the swc to the projects class path by throwing it in the default flex /libs folder

4. copy the javascript files into /html-template

5. Edit /html-template/index.template.html to include the javascript files

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

Now your flex project is ready to import the SWFAddress class and start using it. It’s worth noting that SWFAddress is a static class so you never instantiate SWFAddress, instead just invoke it’s goodness on our app.  Let’s rig-it-up and see the basics.

1. Create your new application, and strat listening for the SWFAddress.onChange event.  The applications initialize handler is a great spot to setup your event listeners, so lets start there.

import com.asual.swfaddress.*;

protected function application1_initializeHandler(event:FlexEvent):void
SWFAddress.onChange = swfURL_changeHandler;

private function swfURL_changeHandler():void
var newURL:String = SWFAddress.getValue();, "URL Change");

Now, add some user inputs so we can change the Browser Title, and URL.  Use a viewstack for the minimal implementation, and link the button id’s with the page names.

Have a look at the source code for this example: SWFAddress Flex Example

Deeplink to page 2:

Deeplink to page 3:

Deeplink to page:

You will notice the Back/Next buttons do not work properly, this is because with the Flex 4 release, there was not a spark equivalent of the ViewStack class.  Adobe has changed the way the recommend handling BrowserHistory, and so I will cover a work around in the next article.