SWFAddress Tutorial For ActionScript 2.0
Recently I’ve been working on my portfolio at padizine.com which is a full Flash AS2 website. It is still WIP, but I knew that I had to do something from a SEO point of view. Flash SEO has always been a big controversy, even after the changes that google brought to flash indexing, but there are some tricks that work well. The first thing that I did was to get deep linking working. What’s deep linking you ask? Well keep on reading!
What deep linking is and how it can help you.
Well normally for any flash website you would have a Flash SWF file embedded in a HTML page. Whenever a visitor clicks on a link in the menu and is taken to a different page in your site, the actual HTML page and thus the URL doesn’t change. The change is made within the Flash SWF and the user is taken to a different zone within the timeline, or a different page is shown through ActionScript. That means that however many pages your flash site will have, you will only have one URL address. This causes quite a few disadvantages:
- If someone presses the browser back button while deep in your page hierarchy, he will be taken to the page visited prior to your homepage, as there is no history entry for your individual pages.
- That also means that visitors can only bookmark your homepage.
- And that also means that you can only have one HTML <title> that will stay the same regardless of what page the visitor is on.
Deep linking solves all these problems beautifully. All the pages inside your Flash file will generate different URLs, and have different titles. Because of that they will also create history entries in the browser, and the user will be able to use the back and forward buttons on your site. Finally, you can supply visitors with links that take them directly to an area inside your site. Flash SEO has been waiting for this for years. Too good to be true? It’s actually not, but you have to admit that it’s damn sweet.
1Preparing your HTML by using swfaddress.js
So how is this possible? Well by using a great tool called SWFAddress, thanks to the awesome folks at Asual.com. To get started, you will need to download SWFAddress here.
After you extract the files, you will see a folder called dist. This is the distribution folder and it contains all the files that we will need. First, browse to dist\js and copy swfaddress.js to the root folder of your website, where index.html is. I assume that you are using SWFObject to load the flash into the HTML.
In your <head>, right after
This makes sure that your page will load the swfaddress.js and use it accordingly. Make sure that it’s after the SWFObject declaration.
2Adding SWFAddress to your Flash file
This is where it gets interesting. First we will need to include the SWFAddress library in our FLA. I’ve created a folder on my hard drive that holds several tools and libraries. This keeps me organised and keeps my libraries safe from random format c: moments 
So let’s say that the path for our external ActionScript code is E:\Tools\AS. You will need to go to the dist\as\2 folder in your SWFAddress folder, and copy the com folder over to E:\Tools\AS. These are the libraries for ActionScript 2.
Next, in your FLA file, go to Publish Settings > Flash > And next to ActionScript 2.0 click on Settings. Here you will need to add the path to your E:\Tools\AS folder.
For the SWFAddress functions to work when you compile your FLA, you need to include the library in your ActionScript like this:
The next bit is and will be depending on how your site is actually built. There are a few methods that you need to call, depending on what is happening inside your movie.
on your flash website
Fist of all, there is SWFAddress.setValue(). This one sets the current URL to the value thrown at it, prefixed by #/. For example, if my flash page is at http://yoursite.com, and you run SWFAddress.setValue(“awesome”), the URL will turn into http://yoursite.com/#/awesome. It’s as simple as that! However, that only changes the URL you see, if someone actually typed in that URL in their browser it wouldn’t work. We will get to that in a moment, but first let’s make sure this setValue() thing sinks in
So where would you use this? Well let’s say that you have a menu button called About, that takes you to your About page. You will need to add the setValue() function here then:
So when someone presses About, they get taken to the About page, and the URL changes accordingly. This was a pretty basic example, but wherever you place setValue(), you will use the same logic. For example, on my website I load my menu dynamically from an XML file. I then add a click function to all the buttons, that would look like this:
Secondly, there is the SWFAddress.setTitle() function. This works in the same way as setValue() but instead of changing the URL it changes the title displayed in your browser window. This is pretty straightforward, so we will go on to the last and most important function which is…
SWFAddress.onChange() is where all the magic happens. This function automatically gets triggered whenever the URL changes, either from your application, or from the browser itself. So this is basically where you make your website navigate to a certain page when it “sees” that the URL has changed. In my FLA, I have a lot of stuff happening on frame 1 of the stage (loading XML, resizing window etc.) so that is where I put this function:
And that’s about it! Remember that this function gets called when the browser changes the URL, i.e. when someone is pressing the back button, but also when your application changes the URL. Why is this so important? Because when you place the setValue() code like explained above, you won’t need any more Navigation code whatsoever! When setValue() changes the URL for you, onChange() is called and the navigation is done anyway. So the onRelease method would become something like this:
When you have a site that loads all the stuff via an XML file and external SWFs that might load other XML files and other external SWFs, it can get a bit tricky. The main problem that I faced was that SWFAddress.onChange() would get called before the site managed to load the XML, thus the menu and everything else. This happened when someone typed in an URL that was already deep in the hierarchy. So whatever URL they typed in, they still ended up on the homepage.
So to fix this, I simply went to the the XML load function, and when the XML gets loaded completely I simply call SWFAddress.onChange(). This way, if it was called before the site got loaded and didn’t do anything, after it loads it is called again, checks the URL, and takes the user to the correct page.
3Conclusion and Flash SEO
Search engines really care about URLs and what they look like. You can read more about this in my previous post, Drupal SEO for URLs. More and more Flash sites are picking up on this, and that’s great. Fact is, for the best possible implementation of SWFAddress, you need to think about it before developing your site, and write your code in such a way that it helps SWFAddress instead of hindering it. If you’d like to know more, there’s a host of resources available at Asual.com.
SEO for Flash has always been a tough battle, but with such a great ally on our side, I can’t stop thinking that we will get there at some point. Have something to say? Go ahead then!
Hesperos
Totally awesome blog, dude
Nice posts… keep it up! Good job!
Alex
Thank you Hesperos, I will do my best to keep it updated. Thing is, all the content I plan on using has to be 100% unique, original and fresh, not like so many blogs out there that just list loads of posts from other blogs.
Cheers,
Alex
Ariane
Alex,
Thanks for this post. I am a newbie to Flash Navigation for SEO and really a newbie to Flash Nav, but was wondering if you could give some extra assistance?
~ Ariane
Alex
Hey there Ariane,
What can I help you with today?
Ariane
Thanks for responding! I have a simple pull-down navigation bar created in Flash 8 with AS2. The only script that I have on my buttons is an on release getURL command. Should I add the SWFAddress.onChange and SWFAddress.setValue functions to each particular button, or on the actions in the first frame of the movie? I’m not using an XML file. The only other script I’m using is a rollover script for the different menus.
Alex
Wait a second, you use getURL to navigate to a different website? If that is the case, SWFAddress won’t do anything for you.
You only use it to create different URLs inside your flash file. To better understand this, go to http://www.padizine.com/, click on the menu items and look at how the URL changes in the address bar.
Ariane
Maybe I shouldn’t be using getURL. I’m currently using it to navigate within the same site. I really want to use SWFAddress because I cannot get my site to index on Google. Is there a different way that I can set-up my nav bar to use SWFAddress?
Alex
Can you give me a link to your project so I can get an idea of what you’re trying to do?
Ariane
Sure, I’m gonna send you an email.
KJ
Hi Alex,
Firstly thanks for posting this. Secondly I’m hoping you can shed some light on a small issue I’m having. I have the problem where I’m loading the XML and of course the swf address triggers before the load is complete. I tried your solution of using SWFAddress.onChange(); when the xml load is complete but on compile I get the following error “Error #1006: value is not a function.”
Any help or advice would be greatly appreciated.
KJ.
KJ
I know what it is! I’ve not defined the function anywhere. Duh.
Alex
Hey, thanks for the comment, I’m glad that it all worked out in the end
David
great tutorial – i’m having the exact problem you desribed when you said that onChange gets called to early. I’m not using xml, but page flip component…so how can i solve it in flash?
Alex
Hi David, I’m not sure about what exact component you’re using, but it should have some kind of onLoad() function or something like that.
It may have a preloader as well. To find it, look for code similar to this:
total=_root.getBytesTotal();
loaded=_root.getBytesLoaded();
There should be some kind of loop where it checks if loaded=total and if it’s not it goes back 1 or 2 frames. You can call onChange() right after that.
Duda
hi saw your web site, didnt you manage to get deep linking on the individual images, videos etc. im trying to get there, im just stuck
on the logic, for that i need to create a case dynamically with “forLoop” like case “portfolio/webdesign/i”. do you have any idea. if not when i get there i let you know.
Alex
I haven’t tried that yet, it might be a little difficult as all my pages are external swf’s themselves and they load more external swf’s
The reason for me not trying is because I am actually redesigning the whole blog+website, in an attempt to merge them together.
If you do figure it out, don’t hesitate to leave me a comment, it will be greatly appreciated
Graphections
Hey Duda and Alex, im trying to deeplink to specific images and videos too.
It seems to me that the way to do it is to setValue()+image[i] on release – (this is easy)
The tough part is reseting the address on rollout, or for a new image. My address is appended by the new file
eg: gallery/image1.jpeg
Then on click again of the image i get
gallery/image1.jpeg/image1.jpeg
Any thoughts?
Alex Petrisor
Well can’t you setValue(“gallery”) on roll out? Anyway instead of appending the image[i] why don’t you use something like setvalue(“gallery/”+image[i]) that way you won’t get the /image1/image1 problem.
However, the main issue here is to code your site so that when someone types in the URL “www.yoursite.com/gallery/image1.jpg” he gets taken to that image. That would be the difficult part, not setting the URL to something when your are seeing an image.
I wish I could help you more, but I’ve been really busy recently. Maybe if you show me a bit more code I can help you a bit more. Send me an email if you can.
Mile
Great tutorial – thank you!
Alex Petrisor
You’re welcome Mile
Vibor
Thanks a lot for this step-by-step tutorial.
Alex Petrisor
You are welcome Vibor.
Tereba
hi Alex,
Great tutorial, thanks for sharing with us mortals
Question – does SWFAddress get through password protected websites?
mine is quite a complicated situation.. I have a personal website, where I share family photos and video, and to get to the deep link one has to really dig deep:
- first, as you enter the website the first frame has a password check;
- then you are directed to the main frame that has the menu buttons;
- clicking the menu buttons (i.e. “photos”) loads a swf with the desired target section of the website
- the “photos” swf has a series of dynamic html text links to html pages that trigger pop-up photo galleries.
So, in summary the path is:
—> main swf [enter password]
|
+—> main swf [click on "photos" button]
|
+—> photos.swf [click on dynamic html link]
|
+—> html pop-up opens with desired photo gallery
Does SWFAddress drill down through all this ?
Thanks!
Tereba
Alex Petrisor
Thank you for the comment. SWFAddress will drill down anything, it all depends on how you use it and how you write your navigation logic. If the question is: “Does SWFAddress drill down through all this automatically?” then the answer is no. You are however, in full control on the URLs so in theory you can drill to wherever you please, but that is a bit more complicated and I will leave this to a later tutorial, if I ever get back to this. (I’ve switched the main site from Flash to HTML).
nwanda
hello.
thank you for your tutorial Alex … hard to find good explanations.
Maybe u can help me on my pblm… I have my site in XML and on click nothing change on the URL wherever I put Your code.
Do I have to adapt this following code ?
_global.clickFunction = function (object)
{
SWFAddress.setValue(object.name.text.toLowerCase());
//Navigation code
}
Thanks so much.
Alex Petrisor
Yes you do, though I would need a few more details in order to figure this out
The _global.clickFunction was just a general example.