How to use SWFAddress with ActionScript 2

10 August, 2010

*UPDATE* - 26 February, 2011

I finally had a good chance to sit down and look at the SWFAddress code and my examples, and there's good news! I've got everything sorted so SWFAddress works with the browser Back and Forward buttons.

I've updated the example files, which are linked below, so if you download them and get cracking on SWFAddress you should be all set.

Two things I found which are crucial to getting the browser buttons working: your SWF must be deployed to the webpage using SWFObject, and the SWFAddress JavaScript must be called before the SWFObject object is declared. I've updated the article and sample HTML below to reflect these new changes.

Today's article is a follow-up to an article we have done previously on SWFAddress.

SWFAddress allows us to have unique URLs for each page of a Flash based website. This is important for navigation and SEO.

So today we're going give a step-by-step run-down of how to implement SWFAddress with ActionScript 2. When we wrote the article previously, SWFAddress was only working with ActionScript 1 so that's what we based our article on. Now that it's been updated for ActionScript 2 and ActionScript 3, we thought it was time to have another look. We have also written an ActionScript 3 based article: How to use SWFAddress with ActionScript 3, if you're looking to use SWFAddress in an ActionScript 3 project. But for now, let's take a look at ActionScript 2.

For information of why it's a good idea to use SWFAddress with your Flash projects, you should check out our original article. We won't cover those reasons again here, but they still stand true today. Let's get started.

You can download the files you need to from the SWFAddress website, or from us directly:

• http://sourceforge.net/projects/swfaddress/files/swfaddress/SWFAddress%202.4/swfaddress-2.4.zip/download
• swfaddress-2.4.zip

Inside the ZIP archive, we're going to need the following files/directories:

• dist/as/2/com/asual/swfaddress/SWFAddress.as
• dist/as/2/com/asual/swfaddress/SWFAddressEvent.as
• dist/js/swfaddress.js

The .as files are ActionScript files we will need at compile time (when we export the SWF from Flash), and the .js file is JavaScript we will need at run time (on the website). The .as files aren't needed on the website, and the .js file isn't needed while we build the SWF.

So go ahead and copy the .js file to your webserver (SWFAddress only seems to work when run from a webserver, so while it can be developed without access to one, it will need one to work correctly), and the .as files to the directory where your Flash project is being/will be developed.

For our example file, here's what our basic timeline looks like:

You can see we just have three sections with some frame labels. Very simple. And we have three buttons on the stage. These buttons have the following instance names: redBTN, blueBTN, and yellowBTN.

We don't actually need a lot of code to get SWFAddress working for us in this instance, so we're going to list it all here now, and then run through how it works. The ActionScript we have on the first frame of our timeline:

It's important to note at this point, that we need to use different frame labels to the values we have appearing in the URL - SWFAddress doesn't work correctly if the frame labels and the URL values are the same.

So, we have a series of functions - three for each button. An onRollOver function for when the mouse rolls onto the button, an onRollOut function for when the mouse rolls off the button, and an onRelease function for when the button is clicked. We set up these three functions for each of the three buttons we have.

Each function runs a separate call to the SWFAddress class. We call setStatus and resetStatus on the rollover and rollout events, and for the onRelease event we call the setValue method. For the setStatus and setValue methods we pass in the value we want to show in the URL.

That's all we need for the button events, now we just have the code for what to do when the URL in the address bar changes.

The SWFAddress.onChange() function will fire each time the URL value is changed. So what we need to do is have Flash get the value we have assigned earlier, and use that to navigate. This means that on each button press, rather than the events being written to happen on the button press, we change the URL with SWFAddress, then SWFAddress recognises this change and reacts. This URL change reaction is important to get SWFAddress to work when a user enters a URL directly to head straight to a specific frame in a SWF.

In our example we set the value in the URL to the value variable, then run a switch statement based on what value is. If it's "blue", go to the blue_fl frame, if it's "red", go to the red_fl frame, and go to the yellow_fl frame if the value is "yellow". Simple.

One last thing we need to do it alter the SWFAddress ActionScript files, SWFAddress.as and SWFAddressEvent.as. When we get them in the SWFAddress package, they are buried deep at /com/asual/swfaddress. But, there's no need for those directories, so if you copy the as files into the same directory where your fla is, we need to make a change to the SWFAddress class.

Open both of the as files and remove the com.asual.swfaddress references.

For SWFAddress.as:

And for SWFAddressEvent.as:

And that's about all there is to it.

• Name our frames on the timeline.
• Alter the referencing of our SWFAddress classes.
• Set up our button events to work with SWFAddress.
• Have SWFAddress recognise a URL change, and navigate the SWF file based on the value of the URL.

Provided we have the SWFAddress.as and SWFAddressEvent.as files in the same directory as the flash file, we're ready to export the SWF, upload it to our webserver and test it out.

For our webpage, we need to include the SWFAddress JavaScript file and the SWFObject JavaScript to get things working. If you aren't familiar with how to deploy your SWF to the webpage with SWFObject, you should check out our previous article on Embedding Flash with SWFObject so you can continue.

It's important that you include the SWFAddress JavaScript before you declare the SWFObject object.

Your JavaScript will look like:

Now, if you embed your SWF file in your webpage, you should end up with something similar to our example below. If you click the links in the list below as well, you will see the SWF navigating directly to a specific frame based on the URL.

• Red
• Blue
• Yellow

As we finish up, it's interesting to note that SWFAddress can also control the title of your webpage as well, so even though the user is on the one webpage you can have different titles for each page of your SWF. This is important for SEO as well. We won't go into how to use the title methods of SWFAddress here as this article only helps you to get SWFAddress working in your Flash project, but we'll cover it in the future.

If you have any questions, let us know. As always you can download the sample files we have used to create this tutorial here: swfaddress_as2.zip.

ferrari_chris