SWFAddress seo, the quick and dirty

SWFAddress from http://www.asual.com allows for easy deep linking of Flash sites. There’s quite a lot written about how to set SWFAddress up with SWFObject for deep linking but less about the SEO sample option.

The page for all samples can be found here. The SEO option is described as “Advanced sample which showcases the search engine indexing capabilities of SWFAddress 2.x. It also demonstrates the usage of query parameters and handling of 404 errors. The sample requires Apache 1.3+ and PHP 4+. ”

So here’s how to get the SEO alternative up and running. First thing if you have no local server installed, I recommend downloading xxamp lite from here. Xxamp is a handy apache/php5 distribution. Download .exe, install. That’s it. (However you can skip right to the code part below, this is just a tip.)

Now grab the flashdevelop project SWFAddressSEO.zip (if you don’t use Flashdevelop then Main.as is your init/document class). You can see the basic demo here. (- If you want to run it locally to experiment with further and you’ve installed xxamp lite just now then just unzip and place it in the htdocs folder and go http://localhost/SWFAddressSEO/bin.)

In the unzipped example you will find:

In the bin folder there’s two php files used for the SEO deeplinking. datasource.php is where the seo content resides for each section in the site. It contains a series of case statements with content for them:

1
2
3
4
5
6
7
switch($swfaddress) {
case '/':
echo('<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p>');
break;
case '/ABOUT/':
echo('<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>');
break;

This content is explained by index.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="content">
<div>
<h1><a href="<?php swfaddress_link('/'); ?>">HOME</a></h1>
<ul>
<li><a href="<?php swfaddress_link('/ABOUT/'); ?>">ABOUT</a></li>
<li><a href="<?php swfaddress_link('/CONTACT/'); ?>">CONTACT</a></li>
</ul>
</div>
<div><?php swfaddress_content(); ?></div>
</div>
<script type="text/javascript">
// <![CDATA[
(new SWFObject('<?php swfaddress_resource('/c.swf?datasource=datasource.php'); ?>', 'website', '400', '400', '9', '#FFFFFF', 'high')).write('content');
// ]]>
</script>

SWFAddress urls read out as http://www.domain.com/#/yourpagename.

The “#” is the signpost of an SWFAddress url. The URL is rewritten into http://www.domain.com/yourpagename/ which is the url that can be indexed. In the index.php this indexable url exists as a link in the html above. When someone visits the indexed address, a redirect is made to the SWFAddress url.

In the case of  Spiders/Bots the address is rewritten without any redirection to http://www.domain.com/?swfaddress=/yourpagename/.

If you right click on the example page either from your local running server or from the demo you will also see this at work with datasource. The datasource.php home content (first case statement) is written out to the page. So the datasource is basically what it sounds like: the data for the spider and indexable content.

So for each section in my dummy site there exists some latin text in the swf. It is just hard copied into my concrete Decorator (or whatever way you set things up with content if you build it from scratch in AS3). And then I just take that content and put that into the datasource.php for each section to mash up some searchable content reflecting the site.

A small caveat to throw in here if we go back to the screenshot of the project folder: notice the occurrence of a “c.swf” file. This is a very minimal stripped down loader that just loads in the main .swf. The reason for doing so is that if you have  a preloader in your main .swf, it will not work with the deep linked pages. It will only work with your direct url. This is so since the deep linked pages (for some reason) are reloaded twice. So having a thin loader that just loads the site will stop your preloader in your main.swf from breaking.

I will not say that much about how to implement the ActionScript API here as it’s already been covered a lot in posts. Just have a look at SWFAddressSite.as. This class imports the two classes SWFAddress.as and SWFAddressEvent.as. We then listen for an update from the API:

1
    SWFAddress.addEventListener(SWFAddressEvent.CHANGE, getValue);

The showPageByMenu() function sets the value of SWFAddress with the static method setValue:

1
    SWFAddress.setValue("/"+e.currentTarget.name)

All that is then needed to be able to trigger the different section’s from the browser is a way to read the value. The value comes as a property of the SWFAddressEvent object:

1
2
3
private function getValue (e:*):void {
    showPageByAddress(e.value);
}

And of course always set the value before you read it. That’s about it.

3 thoughts on “SWFAddress seo, the quick and dirty”

  1. Man,

    this is the only usefull and detailed explanation on SWFAddress SEO I’ve find so far.
    People mostly (as I used to) use SWFAddress just to get Back and Forward links and different addresses, but without this kind of optimization, SWFAddress doesn’t have too much sence.

    Thank you for such great article!

    Now, if you can explain me something in your AS code…

    In SWAddressSite.as you’ve put CHANGE Listener… Now, when you CLICK button, you call showPageByMenu() function and you setValue.
    After that, CHANGE Listener detects it and calls getValue() function which calls showPageByAddress() function which set’s Value again?!

    Isn’t there too much setValue’s?… or I didn’t understand your code?

    anyway, this deserves at least small tweet. Thanks

  2. Hi Guille, sure,

    As you said getValue() listens for the CHANGE event fired by SWFAddress. But this is for browser navigation only; it doesn’t fire if you use the button menu in the swf. But then no value is set so I just split value setting into two methods. You could have only one method that both responds to swf actions and browser actions…

    Hope that makes sense…

  3. The method described here is fantastic – the files supplied have a major problem – it took me a while to figure it out – although it worked locally from xampp it failed on my live servers – google indexed the site root only, and raw urls were not being replaced with hash index : For anyone else…

    The js files are returning a value of true inside the _setValue parameter – please replace all the files with the seo examples. The index.php and datascource.php are ok HOWEVER remove the trailing slashes on the datasource case: links – I would also suggest replacing the

    (new SWFObject(‘<?php swfad……………….etc

    With

    var so=new SWFObject('’, ‘web’, ’1200′, ’760′, ’10.0′, ‘#FFFFFF’);
    so.useExpressInstall(”);
    so.addParam(‘menu’, ‘true’);
    so.addParam(‘allowFullScreen’, ‘true’);
    so.addParam(‘scale’, “exactfit”);
    so.addParam(‘wmode’, “window”);
    so.addParam(‘allowscriptaccess’, “always”);
    so.write(‘content’);

    Hope this helps someone somewhere – and appologies to thumbleaf if I stuffed up and did not need to replace any of this – but this made things work for me.

    Cheers,
    Sam.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Please leave these two fields as-is:

Protected by Invisible Defender. Showed 403 to 173,330 bad guys.