Chakra Media blog

What is it?

The SWFAddress Design Template is a Flash-based template used for creating deep-linkable Flash projects utilizing Asual’s SWFAddress library. It is an evolution of my workflow experience with building Flash sites over the years. I have come to believe deep-linking should be available in as much Flash content as possible. So I’ve posted this explanation (and source code) to provide the Flash community another example of a fairly straight-forward means of implementing deep-linking in simple Flash-based projects. It assumes a intermediate level of ActionScript knowledge and experience with the Flash IDE.

The template consists of a main application MovieClip (‘ApplicationForm’) which contains the code that processes the SWFAddress events and controls the visiblity of the different sections (or pages) of the application. Each section/page is represented as a MovieClip (MC) on a layer within the ApplicationForm MC with an instance name relating to that section. Instance names are important here as they must match the SWFAddress URL that is being used for that section. To explain this further let’s examine how we process the SWFAddress.CHANGE event:

For example, in our button class for the About button we have:


function onRelease() {
SWFAddress.setValue('/about/');
}

This triggers the ‘handleChange()’ function found in the includes/ApplicationForm.as file. In the example I have another function within this function being called ( handleSWFAddress() ) which may seem a little redundant in this particular case, but I’ve found that there are times when you may want to do some things before actually changing the state (which occurs in the function handleSWFAddress()) so I’ve just left it as is.

In handleSWFAddress() the first thing that happens is the ‘hideSections()’ function is fired – this turns off the section MCs (visible = false) before the new section is shown. Then the string variable ‘addr’ is set to the value of SWFAddress (note: if the value is set to ‘/’ then it’s changed to ‘/home/’ to allow for a ‘home’ section without using ‘home’ in the URL).

var addr:String = SWFAddress.getValue();
if (addr == '/') {
addr = "/home/";

}


The value of var addr is first stripped of it’s outer ‘/’ and then any hyphens are replaced with underscores (‘_’) for compatibility with Flash instance names Then it is broken down into an array using (split(‘/’).

var my_str:String = addr.slice(1, -1);
var my_str_replace = replace(my_str,'-','_');
var my_array:Array = my_str_replace.split("/");


So the original string ‘/about/’ would become ‘about’ represented by my_array[0] , or for easy reference we set a variable called ‘myMainSection’ equal to my_array[0]

Or (another example) a string of ‘/about/justin-dean-smith/’ would become ‘about’ represented by my_array[0] and ‘justin_dean_smith’ would be my_array[1]

var myMainSection:String = my_array[0];
var mySubSection:String = my_array[1];

The above vars will be used to reference the MCs for each section.

Based on the length of my_array we use a switch statement to decide which section to show. With an array length of only 1 means we only need to show one of our top level sections. With an array length of 2 we know that we want to show something that is within a top level section (mc) and we can take action accordingly.

I’ve set up a simple fade-in transition function to make the ‘myMainSection’ mc visible. After the transition is done it fires an event to check if the content of that section has been loaded or not. This is represented by a ‘isLoaded’ variable that is available within each section mc. If the content is not loaded then a ‘loadContent()’ function is called for that section. (This function is within the .as file for each section)

Navigation

For the navigation I use a MC called ‘nav_mc’. Within this MC are frame labels with the exact names as the section MC instance names. By doing this we can use the ‘myMainSection’ variable to set the navigation to the proper state. On each frame label is a keyframe and the corresponding button is ‘broken apart’ and shows the ‘over’ state to designate that you are in that section. The reason I use classes attached to the buttons instead of button the code on the button itself is that using classes allows me to write the code once and it’s used on every instance of the button….. as opposed to putting the code on the button every time there is a new keyframe. The classes, located in the ‘com’ folder, are attached to the buttons by using the Linkage property, which can be accessed by right-clicking on the button symbol in the library and selecting “Linkage…” You’ll see the classpath entered there.

So, within the switch statement we pass the ‘myMainSection’ variable to the function showNav() … which sets the nav_mc to the correct keyframe. If there were a sub-navigation within the section, I would put those buttons within a MC called ’subNav’, which can be set by a line of code reading :

this[myMainSection].subNav.gotoAndStop(mySubSection);


Checklist for Creating a New Section

When creating a new section the following steps must be taken in order for everything to function properly.

1. Create a new MC on a new layer within ApplicationForm MC and give it an instance name.

2. Within the ApplicationForm.as under the ‘hideSections()” function add a new line of code with the new instance name and ‘._visible = false;’

3. Create your button and use the instance name of the new MC as your SWFAddress URL. (replace underscores with hyphens)

OK, this isn’t the most detailed explanation, but covers most of the aspects of it. If you have any questions or suggestions just post below.