Padizine Blog» Flash http://www.padizine.com/blog Just another WordPress weblog Thu, 14 Jul 2011 14:41:46 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 SWFAddress Tutorial For ActionScript 2.0 http://www.padizine.com/blog/swfaddress-tutorial-for-actionscript-2-0/ http://www.padizine.com/blog/swfaddress-tutorial-for-actionscript-2-0/#comments Wed, 27 Jan 2010 16:56:35 +0000 Alex Petrisor http://www.padizine.com/blog/?p=103 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

<script type=”text/javascript” src=”swfobject.js” charset=”utf-8″></script>
add
<script type=”text/javascript” src=”swfaddress.js” charset=”utf-8″></script>

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

1. Importing the SWFAddress library

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:

import com.asual.swfaddress.SWFAddress;
You need to put this on the first line of every frame of ActionScript that uses SWFAddress functions.

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.

2. Using the SWFAddress library to enable deep linking
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:

About.onRelease = function()
{
SWFAddress.setValue(“about”);
//Navigation code
}

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:

_global.clickFunction = function (object)
{
SWFAddress.setValue(object.name.text.toLowerCase());
//Navigation code
}

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:

SWFAddress.onChange = function()
{
var addr = SWFAddress.getValue(); //This gets the current URL, but only what was appended to http://yoursite.com/#
switch (addr)
{
case “/”:
SWFAddress.setTitle(‘My Homepage’);
//Code for navigation to homepage goes here
break;
case “/awesome”:
SWFAddress.setTitle(‘My Website – Awesome’);
//Code for navigation to awesome page code goes here
break;
//And so on
}
}

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:

About.onRelease = function()
{
SWFAddress.setValue(“about”);
}
3. XML Troubleshooting

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!

]]> http://www.padizine.com/blog/swfaddress-tutorial-for-actionscript-2-0/feed/ 32