a swfaddress example: how to deep link your flash tutorial

swfaddress example
swfaddress example
The following example or tutorial is all about swfaddress and deep linking your flash site.

So what’s all the fuss about deep linking ? If you ask any anti-flash activist, almost certainly one of their main arguments will be the lack of options when it comes to navigating back and forth through the site using standard browser controls which we are all used to using. Typically, every flash site will load up a swf file and then let the movie itself handle the navigation you require by presenting all the options you need as you need them, which is lovely, but, and it’s a big one, as soon as the user hits the back button, the entire user journey vanishes and you find yourself in the previous website with no way to recover that journey.

All that changed several years ago (I know, and nobody got around to telling you, utter bastards!) with the advent of SWFAddress, which links with SWFObject to allow a flash movie to communicate with the browser event model from within the SWF actionscript.

How does this magical piece of software work, you ask! To put it simply, whenever the user hits the back button this triggers an event which tells the browser to go to the last stack item on the history list of URL’s it has remembered. By including the SWFAddress in your flash the URL of the site suddenly starts using localised NAME anchors (you’ve seen these before, usually to navigate within a single HTML page) and these localised URL’s also go into the browser history stack. In other words we never go the the previous URL but the anchor tries to move us within the existing HTML page virtually.

At the same time SWFAddress communicates with the flash and tells the SWFAddress event model that the user has made an attempt to navigate externally and it will also inform us of where the browser thinks it wants to go to (local named anchor) We can then analyse this information and tell flash to do this page change. At the same time we must do the versa from the vice, that is to say whenever we use our sexy internal UI to navigate around the flash movie, at each new “Page” or journey point we must tell the browser that we have reached a new Anchor(ing) position.

I can waffle about this all day but lets look at the setup. The example above opens a deeplinked microsite with 4 pages and all the usual transitions and stuff, It’s far more important that you play with your own experiments in order to find out exactly how it works, so I am not going to give you the source directly. You may not believe me, but this code needs to be failed with in order for you to “get” it. this ZIP of files contains all of the required SWFAddress and .as files as well as the example HTML file.

SO … The HTML source shows you how to set up the basic page, let’s concentrate on the AS3 being used to control the SWFAddress. First we must import the two classes for the object and the event.

import com.asual.SWFAddress;
import com.asual.SWFAddressEvent;

SWFAddress.addEventListener(SWFAddressEvent.CHANGE, SWFChange);

Next we need to define what the pages are in the application. For this we need to have two seperate arrays, the first being a string array of the pages which of course have an array index, we will use this to send to the SWFAddress event after we are signalled by the UI to change the page. The second array is associative, that means when we pass in a string from the SWFAddress event we need to know what page number this refers to in order to tell the pagechanging logic to update the UI. This can be an object or in this case I am using a Dictionary variable to store the pages.

var pageArray:Array=new Array("Home","Animal","Vegetable","Mineral");

var pageArrayT:Dictionary = new Dictionary();

for (var i:int = 0; i < pageArray.length; i++) {
	var newTIndex:String=pageArray[i];
	pageArrayT[newTIndex]=i;
}

Next we can set up the function mentioned earlier to handle the SWFAddress event, this has a bit more complexity because we need to account for the very first run and also to make sure we don’t enter infinite loops. Remember, the SWFAddress gets set either from the browser or from the UI. In this example we have a single variable which we work with later to determine the page we wish to go to, menSel.

var firstRun:Boolean=true;
var stopInfLoop:Boolean=false;

function SWFChange(e:SWFAddressEvent):void {

	var sentPage:String=SWFAddress.getValue().substring(1);

	//onscreentextfield.text = sentPage + " - " + String(parseInt(pageArrayT[sentPage]))

	if (firstRun) {
		firstRun=false;

		if (sentPage=="") {
			sentPage="Home";
		}
		menSel=-2;
	}
	if (! stopInfLoop) {
		changePage(parseInt(pageArrayT[sentPage]));
	}
	stopInfLoop=false;
}

the firstRun variable is only ever actioned once, when the code is first ran, at this point we will receive an event from SWFAddress which will either be blank or will contain a page reference. If it’s blank we still need to tell the UI to go to a default page. Also worth noting here is we are taking a substring of the event return, that is because it automatically comes back with a “/” leading, which we do not need. Another item worth noting here is that we have the option of playing with the return. The stopInfLoop boolean we will come to later, but just note that if the event is fired from the browser we will always need to access the changePage function, however in this example the UI sets the new page from the changePage() function which sets the SWFAddress event as well as updating the application and when this happens we set a simple boolean to say that the page has already been changed and so the changePage funtion does not need to be called from the SWFAddress event function.

var returnedPageName:String

function changePage(p:int):void {
	returnedPageName = pageArray[p]
	stopInfLoop=true;
	SWFAddress.setValue(returnedPageName);
	SWFAddress.setTitle("Website Blurb -" + returnedPageName);
	menSel=p+1;
}

FIrst, stop that pesky infinite loop mentioned earlier, next we access the associative array via the passed page number to get the new page title and this is passed to the SWFAddress which will set a new anchor position in the history stack. We can also change the browser title bar, finally we set the menSel variable (which will change the UI.

In the case of the example, there is an EnterFrame event loop going on in the background that detects changes to menSel and responds by changing the page.

And that’s it, a tiny bit of code to handle deep linking. Go on, have a whirl. ALSO go and visit asual.com the makers of this wonderful tool. Never hurts to say thankyou

This entry was posted in AS3, Flash, swfaddress and tagged , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>