How to use SWFAddress with ActionScript 3

11 August, 2010

*UPDATE* - 11 September, 2011

I finally determined what the error was with this article, and everything is good to go now. It all works well with the browser's Back and Forward buttons.

I won't go into detail about what the error was, but I'll say that it was my error in the coding and execution rather than an error with SWFAddress or the browser. It's good to have this all sorted now. Please accept my apologies for creating this error in the first place, and for the massive time delay in getting it diagnosed and corrected.

Now, on with the SWFAddress goodness!

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 3. 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 2 based article: How to use SWFAddress with ActionScript 2, if you're looking to use SWFAddress in an ActionScript 2 project. But for now, let's take a look at ActionScript 3.

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:

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

dist/as/3/com/asual/swfaddress/SWFAddress.as
dist/as/3/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:

Flash timeline

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:

stop();

function set_red(e:MouseEvent) {

SWFAddress.setValue("red");

}

function set_blue(e:MouseEvent) {

SWFAddress.setValue("blue");

}

function set_yellow(e:MouseEvent) {

SWFAddress.setValue("yellow");

}

function setStatus_red(e:MouseEvent) {

SWFAddress.setStatus("red");

}

function setStatus_blue(e:MouseEvent) {

SWFAddress.setStatus("blue");

}

function setStatus_yellow(e:MouseEvent) {

SWFAddress.setStatus("yellow");

}

function SWFAddress_reset(e:MouseEvent) {

SWFAddress.resetStatus();

}

function SWFAddress_changed(e:SWFAddressEvent) {

switch (e.value) {

case "/red":

gotoAndStop("red_fl");

break;

case "/blue":

gotoAndStop("blue_fl");

break;

case "/yellow":

gotoAndStop("yellow_fl");

break;

}

redBTN.addEventListener(MouseEvent.MOUSE_UP, set_red);

redBTN.addEventListener(MouseEvent.ROLL_OVER, setStatus_red);

redBTN.addEventListener(MouseEvent.ROLL_OUT, SWFAddress_reset);

blueBTN.addEventListener(MouseEvent.MOUSE_UP, set_blue);

blueBTN.addEventListener(MouseEvent.ROLL_OVER, setStatus_blue);

blueBTN.addEventListener(MouseEvent.ROLL_OUT, SWFAddress_reset);

yellowBTN.addEventListener(MouseEvent.MOUSE_UP, set_yellow);

yellowBTN.addEventListener(MouseEvent.ROLL_OVER, setStatus_yellow);

yellowBTN.addEventListener(MouseEvent.ROLL_OVER, SWFAddress_reset);

SWFAddress.addEventListener(SWFAddressEvent.ROLL_OVER, SWFAddress_changed);

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 - two for each button. A setStatus function for when the mouse rolls over the button, and a setValue function for when the button is clicked. The third function we have is a resetStatus status we call when the mouse rolls out of a button.

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

We have set up a separate function to call for each button to make the tutorial easier to follow. As the resetStatus function is always the same, we can call the same function from all three buttons.

Down the bottom of our code block we assign all the button events to the functions we have defined - a MOUSE_UP, ROLL_OVER and ROLL_OUT function for each button.

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.CHANGE event will fire each time the URL value is changed. We have the event set up to run the SWFAddress_changed function.

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 run a switch statement based on what value in the URL 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.

And that's about all there is to it.

Name our frames on the timeline.
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 only need to include the SWFAddress JavaScript file to get things working. Like so:

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_as3.zip.

ferrari_chris

Elise (http://www.getcreativewebdesign.com) says:

2010-12-14 18:41:02

Great step-by-step tutorial, thanks. I've found though that when you have Move Clips on each page (as a full website would), that things get quite messy. Is there something I'm doing wrong? Thanks again.

^__________

Chris (http://www.fcOnTheWeb.com) says:

2010-12-19 05:11:57

Elise, it's hard to say whether you're doing something wrong or not. Can you elaborate on "things get quite messy" to give more of an idea of what the issue is?

^__________

gideon says:

2011-01-13 11:19:57

i have animation on each button that expands to what the full pg would look like before i have it link to the page. I want to have each button link to a new page once the animation is finished at a certain frame.
Any assistance would be greatly appreciated.

^__________

Chris (http://www.fcOnTheWeb.com) says:

2011-01-17 06:34:56

gideon, you just need to call the link function at the specific frame on your timeline.

I have an article covering links in Flash here that might help: http://fcontheweb.com/articles/flash_links/

Alternatively, you could have Flash call a JavaScript function that redirects the page to where you want. I've covered how to do that here: http://fcontheweb.com/articles/javascript_with_actionscript/

You just need to put the function calls on the right frames of the timeline.

I hope that gets you started.

^__________

Iniaki (http://metallicflesh.com) says:

2011-02-04 19:56:06

Hi Chris,
thanks for this articles, they're very helpful. However, there are some lines of codes that don't work and compare to the same files in your example they're different. So, anyway, i changed them and now it works. But there seems to be another problem. My animations in the various pages freeze when you enter their URL directly in the browser (IE 8). Is there a way to fix this?
thanks again,
iniaki

^__________

iniaki (http://www.metallicflesh.com) says:

2011-02-05 13:40:35

Hey Chris,
i noticed that in your example (and anytime you use SWFAddress) clicking the back and forward buttons change the text in the line of the URL, but it doesn't actually work, i.e., you can not go the page/s itself, nothing happens. Any idea?
iniaki

^__________

Al (http://www.lemieux-design.net) says:

2011-03-11 22:05:27

Getting all of these errors in Flash

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at index_fla::MainTimeline/goAbout()
at index_fla::MainTimeline/onChange()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at com.asual.swfaddress::SWFAddress$/_dispatchEvent()
at com.asual.swfaddress::SWFAddress$/_setValueInit()
at com.asual.swfaddress::SWFAddress$/_check()
at flash.utils::Timer/_timerDispatch()
at flash.utils::Timer/tick()

The SWF file works. These are just output errors, but the page indexing and history isn't working.

Any ideas?

^__________

Carolyn Kniffin says:

2011-12-30 21:31:14

The blue, yellow and red text links in your example above do not link the appropriate SWF frame. I thought SWFaddress gives you the ability to link to a specific frame inside an SWF from anywhere like an e-mail or web page. Why isn\\\'t your example working?

^__________

Carolyn Kniffin says:

2011-12-30 21:34:57

OK Never mind. your sample is working. I am new to SWFaddress but I think this wuill help us alot. Do you need to be very fluent in ActionScript and JavaScript to use SWFaddress?

^__________

rabo (http://flashden.blogspot.com/) says:

2012-02-29 10:45:18

Add your comment on this article below:

Sorry, there's an error with your form entries. We really appreciate your comment, so please try again.

Form submitting now...