Exercise 6-3: Deep linking Using SWFAddress - Search Engine Optimization for Flash

Open the output file, index.html in the bin-debug folder for Exercise 6-3 in Flex and notice it links to swfaddress/swfaddress.js.

In the src folder, open the file App.mxml, and then, in Flex, view its code.

Notice the file’s <mx:Application> has a value of initApp() for its creationComplete property.

In the initApp() function, notice that SWFAddress’s change event executes the handleSWFAddress() function.

Look at the TabNavigator’s change property. Notice that runs the setSWFAddress() function.

Notice the utility and XML loading and displaying functions that are already written.

In the setSWFAddress() function, add the code to update the page’s URL using SWFAddress’s setValue() method:

SWFAddress.setValue("/" + urls[navigator.selectedIndex] + "/");

Remember, the SWFAddress.setValue() method triggers the SWFAddressEvent.CHANGE event, which causes handleSWFAddress() to run. In the handleSWFAddress() function, write the code to get SWFAddress’ value, remove the forward slashes, set the appropriate selected index of the TabNavigator based on SWFAddress’ value, and then use the formatted version of the value to set the title in the browser window using SWFAddress.setTitle(). The finished version of handleSWFAddress() should look like this:

private function handleSWFAddress():void
{
    var value:String = SWFAddress.getValue();
    value = value.replace(/\//g, "");
    navigator.selectedIndex = urls.indexOf(value);
    SWFAddress.setTitle(formatAsTitle(value));
}

Save the file, and then, from the bin-debug folder in your web browser, open index.html using your testing server to view SWFAddress working when you click through the tabs. Nice!