How to go directly to a specific frame in a SWF
15 April, 2009
Today we take a look at a way users can interact with your SWF file, and if you have a Flash based website how you can make it more user friendly: by giving each page in your site a location that can be bookmarked - a separate URL in the address bar.
That's right. A separate URL for each page or screen in your SWF.
There are a number of reasons for doing this, just some of which are:
- Bookmarking each page in your SWF
- Being able to give out links to exact pages in your site
- Allowing users to use the Back and Forward buttons
- Allowing Google to crawl all your pages
We will give a brief explanation of these.
*UPDATE* - 13 August, 2010
We have just released two new articles on SWFAddress for ActionScript 2 and ActionScript 3. If you're using ActionScript 2 or ActionScript 3, and you want to integrate SWFAddress into your project, you should check out the appropriate new article:
Bookmarking each page in your SWF
This allows users of your site to bookmark a specific page and come back to it later. Such as an item in your product listing, or perhaps an image in your gallery. As we will see, when the unique URL is entered the SWF can navigate directly to it. Just like a normal HTML based website. This is much more user-friendly.
Being able to give out links to exact pages in your site
This allows you to link people directly to a page on your site. Similar to the bookmarking above, when the link is clicked or typed into the address bar, your SWF can navigate directly to the page you want.
Allowing users to use the Forward and Back buttons
When browsing traditional HTML based websites the Back and Forward buttons can be a very integral part of the way a user navigates the pages. A SWF based site denies the user of this ability which can make things frustrating. By having the unique URL for each page it allows the Back and Forward buttons to be used for navigation.
Allowing Google to crawl all your pages
Now that Google can see inside SWF files to index the content, it is important that it has links to all the important pages so that all the content you want gets indexed. Again, by having direct links to specific pages you will help your Google search rankings by ensuring Google crawls all the pages you want.
So now that we know why we want to do it, how do we actually put it into practice? With a handy library called SWFAddress. SWFAddress is an ActionScript class and a JavaScript library that interact with each other to perform the necessary actions. We don't need to worry about the JavaScript as that all works behind the scenes - we merely need to put in the appropriate ActionScript commands to get things working.
First off we will have a look at an example of all this in action. Take a look at the SWF file below. Clicking each button will take the SWF to a different frame and create a unique URL. We have each of those URLs linked below so you can see that going to each one will automatically direct the SWF file to the correct frame.
Your version of Flash Player is lower than the required 10.0.0.
Click below to upgrade to the latest version and then try again.
Now let's take a look at the ActionScript we need to make this possible.
The first important task is to include our SWFAddress.as class. In this instance we have the file in the same directory as our FLA.
#include "swfaddress.as"
Once that's all sorted, we assign the button functions to tell SWFAddress to set the new URL. When we update the URL, SWFAddress automatically runs the onChange event we will look at shortly to send the SWF to the correct frame. The button functions:
blueBTN.onRelease = function() {
SWFAddress.setValue("blue");
}
redBTN.onRelease = function() {
SWFAddress.setValue("red");
}
yellowBTN.onRelease = function() {
SWFAddress.setValue("yellow");
}
And finally we add an onChange function to handle some logic. This function is fired whenever the URL is changed - so that's both when we set it through ActionScript and when it's manually changed in the browser.
SWFAddress.onChange = function() {
var address_value = SWFAddress.getValue();
if (address_value == "blue") {
gotoAndStop("blue");
} else if (address_value == "red") {
gotoAndStop("red");
} else if (address_value == "yellow") {
gotoAndStop("yellow");
}
}
It is in this function that the majority of our logic gets processed.
This onChange event is fired when the URL is changed. The getValue method returns the characters appended to the URL. They will always start with a "/". From there we navigate to a specific frame in the timeline based on the value that is returned.
Here is what our timeline looks like to help you understand how it all fits together:
So that's about all there is to it. We have taken a very basic and introductory look at SWFAddress. There are plenty of other functions that can be used that we haven't covered in this tutorial. You can have a play around with it once you have the basics working and see what works for you. Some of the documentation for SWFAddress can be found here: http://www.asual.com/swfaddress/docs/en/. A complete ZIP file of an example of what we have created can be downloaded here: swfaddress_example.zip.
It is important to note that swfaddress.as will only compile if the Publish Settings of the FLA are set for ActionScript 1.0. Anything higher than this and the SWF will not publish correctly. Also, the SWFObject technique we documented earlier does not allow the Back and Forward buttons to function correctly so we have had to revert to an earlier SWFObject method when using SWFAddress to allow that functionality.
*UPDATE* - 02 August, 2010
We have updated the example ZIP file to include an HTML page which shows SWFAddress in action. It seems as though this page needs to be loaded from a webserver though, as it doesn't behave as expected when run locally.
*UPDATE* - 13 August, 2010
We have just released two new articles on SWFAddress for ActionScript 2 and ActionScript 3. If you're using ActionScript 2 or ActionScript 3, and you want to integrate SWFAddress into your project, you should check out the appropriate new article:
ferrari_chris
Conrad says:
2009-06-02 13:01:59
Nice way to put it. Any idea on AS2?
__________
ferrari_chris (http://fcOnTheWeb.com) says:
2009-06-03 07:29:51
No, sorry. Just the AS1 at this stage.
If I find out how to do it in AS2, I'll put it up at another section of this article though.
__________
Ethan says:
2009-11-26 04:51:44
Thank you SO MUCH for such an AWESOME tutorial!!
SWFAddress finally worked with Flash 8 - AS2 for me (using the files from this tutorial).
__________
ahmad says:
2010-01-19 05:57:38
Coolll....
__________
Pradeep says:
2010-02-19 10:39:17
Google will not crawl all pages. It refuses to read anything in the url after the #.
Great tutorial though :)
__________
Ben says:
2010-04-01 01:23:33
It doesn't need to go past the #.
All the site content is read as being on the index page.
Simply make html pages for your flashpage equivalents and use swfaddress to go directly to the relevant section in the flash app.
This only really matters if people hit your flash from links to those pages.
Also putting in a sitemap.xml will also handle it.
So google will crawl all the pages and Flash with swfaddress is okay.
__________
e11world (http://www.e11world.com) says:
2010-06-17 09:26:14
Hi all,
I've got an AS2 version of this working but have a few problems and would love some help.
I recently looked at a form (http://blog.deconcept.com/2006/10/25/swfaddress/) and noticed this url http://www.spirituc.com which is very similar to my site but has the problem(s) fixed.
I have my test site at http://www.alenelias.com/home2.html and I'm using an old AS2 class for the buttons to do the up, over, hover, selected states.
When you click the back button on the browser, the selected state doesn't change and I can't figure out how to fix this and it is the most important problem here.
The title of the pages has the forward slashes as well and tried to change it with no luck.
And third if I keep clicking back, once I reach the intro page (loader in a different scene), if I press forward, the url changes but the page does not. Not a huge deal but would love to solve that as well.
Any help is greatly appreciated. Thank you very much!
__________
ivan says:
2010-07-31 13:59:14
Hi,
So far this is the only tutorial I found speaking about how to use swf address when building a website based on many frames and not only one. Thanks a lot!
But I have anyway a problem. I tried following your instructions to use the sample file but it doesn't work. (You didn't enclose the .html file) that I guess includes code to make the whole thing work.
Also, it is only for actionscript 1.0?
swf address has now versions for action script 2 and 3 too.
Could you make a tutorial on how to use swf address using action script 3 in a website built on many frames as your example?
If you do it, would be great having the source code and ALL files so that we can download them and customize the code to let it work on our website.
Thanks a lot in advance.
Ivan
__________
Chris (http://www.fcOnTheWeb.com) says:
2010-08-01 09:34:15
Hi Ivan,
Thanks for your feedback.
I'll look into updating this article with ActionScript 2 and 3 sections in the coming days and let you know.
Thanks.
__________
Chris (http://www.fcOnTheWeb.com) says:
2010-08-13 07:12:26
Hello there.
We have recently completed two new articles on SWFAddress - How to use SWFAddress with ActionScript 2 and How to use SWFAddress with ActionScript 3.
That's right, so now now have SWFAddress covered for AS2 and AS3.
You can check these new articles out at:
http://fcontheweb.com/articles/swfaddress_as2/
http://fcontheweb.com/articles/swfaddress_as3/
Thanks.
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...