Required Resources

The very first thing you need to do is make sure you have the lastest version of Rainbow (1.5.1 at time of writing) installed on your server. If you are upgrading you can just copy over your existing Rainbow.swf file with the latest. The second requirement is that you have integrated SWFAddress into your Flash file. If you don't know about deep linking via SWFaddress start by visiting their site and looking through the demos. Once you understand the importance of deep linking for Flash sites, you won't make a site without it. This tutorial borrows heavily from the SEO example provided by the SWFAddress website capitalising on the combination of Rainbow Live and SWFAddress.

SEO Preferences

OK, so now that you are ready to enable sitemap generation, log on to your Rainbow install and open up the preferences section. You will see there is a new section named SEO near the bottom. This is where you can customise the necessary properties to enable generation for your site. The SEO preference section also contains properties used for automated HTML data source generation - this is the perfect companion for your sitmap and takes SEO to the next level by allowing search engines and users without the Flash Player to be able to view and navigate through the content on your site. More about that in the Automated HTML Backup Generation tutorial.
 

Let's go through the properties you'll need to set:
  • generatesitemap - Firstly you'll want to set generatesitemap to true, this tells Rainbow to create and export the sitemap.xml file when you save. In this way you'll never have to manually update your sitemap file and you can be sure that it remains current with your latest changes.
  • pagetypes - This tells Rainbow which of your nodes to consider URL destinations. You can set multiple types by using a comma delimiter so if you had 'album' nodes and 'artist' nodes you could enter 'page,album'
  • swfattribute - This tells rainbow which attribute to use in order to build the swfaddress location for each page. This can be either cumulative or absolute as explained in the next property
  • swfaddressabsolute - There are a myriad of ways you may have set up your Flash file, so in terms of the swfAddress you may choose to explicitly hand code the complete swfaddress location of each of your pages into your XML data, or you might make use of XML's nested structure and build the address as you navigate through to the selected data. By setting the absolute value to true or false you can control how the sitemap determines each page's URL
  • texttypes - This specifies which nodes types to grab text content from. This can be a single item, or a comma delimited string. You can also specify a nested node by using the "/" delimiter. So for instance I might have a text node in my page named 'text' and also a pullout node on my page that contains two sub nodes - 'text' and 'image' in this case I enter 'text,pullout/text' as the value for texttypes.
  • imagetypes - This works in the same was as texttypes, but is for image items. If you wish to target an attribute you can use the "@" symbol. For instance, if your image url is stored in an attribute named "image_src" on your page node, you would enter '@image_src'. As with text nodes you can also target a nested node, for instance if you had a child node named 'image' with it's text value used to store the image url you would set 'image' as the value. If instead you were storing the image url in an attribute on that child node named 'image_src' you would enter 'image/@image_src'. (notice the "/" character which divides the node name from the attribute name).
  • videotypes - Video types aren't fully supported yet, but they work in the same manner as image types.
Now that you understand the relevant properties, let's go through an example.

Example Site Structure

Let's say we've set up a simple company site with the following pages:

Introduction
About Us
Project
Contact
Each page can contain the following content:
Text
Images
Sub Pages
So, our basic XML structure might look like this:

<website>
  <pages>
    <page title="Introduction">
      <text>Introduction Text</text>
      <images>
        <image image_src="image_1.jpg"/>
      </images>
    </page>
    <page title="About Us">
      <text>About Us Text</text>
      <images>
        <image image_src="image_1.jpg"/>
      </images>
    </page>
    <page title="Projects">
      <text>Projects Text</text>
      <images>
        <image image_src="image_1.jpg"/>
      </images>
    </page>
    <page title="Contact">
      <text>Contact Text</text>
      <images>
        <image image_src="image_1.jpg"/>
      </images>
    </page>
  </pages>
</website>

In addition we might add a couple of sub pages into the Projects section, so that it now looks like this
<page title="Projects">
 <text>Projects Text</text>
 <images>
        <image image_src="image_1.jpg"/>
     </images>
 <pages title="pages">
  <page title="Film">
    <images>
   <image image_src="images/1.jpg"/>
    </images>
    <text>Film Text</text>
  </page>
  <page title="TV">
    <images>
   <image image_src="images/1.jpg"/>
   <image image_src="images/2.jpg"/>
    </images>
    <text>TV Text</text>
  </page>
  <page title="Radio">
    <text>Radio Text</text>
    <images>
   <image image_src="images/1.jpg"/>
   <image image_src="images/2.jpg"/>
    </images>
  </page>
 </pages>
</page>

If you want to see the full data for the site, click here

Example Settings

So now we know the structure of our site and the XML data we can set the appropriate settings:
  • generatesitemap - true (obviously)
  • pagetypes - page (In this simple set up we only have one type of node that represents the equivalent of a page url)
  • swfattribute - title (we have set up the title attribute to be the swfaddress value for each of our pages)
  • swfaddressabsolute - false (we are going to use the comulative node path to create our swfAddress paths. For instance, the address to the Radio page would end up being '/projects/pages/radio' - Rainbow automatically converts all strings to lowercase and replaces spaces with a dash (-) and special characters with an underscore (_))
  • texttypes - text (this one is self explanatory - it will also capture any text located in the page node itself.
  • imagetypes - images/image/@image_src (this tells rainbow to drill down into the images node of a page and grab 'image_src' attribute from the individual image node entries)
  • videotypes - (not used)
Now with those settings in place, you can close the SEO preferences window and the click on SAVE to save your changes. With generatesitemap set to true Rainbow will export a new sitemap.xml file everytime you save. This way you can be sure your site map is always up to date.

Sitemap.xml Output File

Here is the example sitemap generated by Rainbow Live from our example.

URL rewrites

If you look at the URL locations within the sitemap you'll notice that the are in the standard form such as "http://www.codeandvisual.com/demo/rainbow_seo/about-us" when using swfAddress with your flash sites, the deep links are represented as HTML anchor points within the page hence they are prefixed with a hash character "#" such as: "http://www.codeandvisual.com/demo/rainbow_seo/#/about-us". This poses a bit of a problem as google ignores anchors in URLs when indexing pages. The end result is that google will only end up linking to the site root if you specify such links. This is where Apache and PHP come in to the picture. Thanks mostly to some handy work from the Asual (SWFAddress) guys, there is a brilliant solution for dynamically converting addresses that use a hash (#) anchor into a standard style URL (and vice versa), You can grab their example HTML/PHP and .htaccess files from their SEO examples. This technique requires that your server supports PHP and that you can set your own .htaccess rewrite rules. This will convert any incoming links that aren't already in the hash (#) format so that the appropriate deep linking address can be sent to Flash.

Submitting Sitemap to Google

Now that Rainbow has generated the sitemap you will want to submit it to google so that it know where to read it from. Log in to their Webmaster Tools Section and use the guides to show you how.

Next Steps - Rainbow datasource generator

In addition to the Sitemap generator, Rainbow Live 1.5.1 introduces an automated datsource generator that will enable you to export an HTML backup version of your Flash site. This then allows search engines and users without the Flash Player installed an avenue to navigate through the data, links and images in your site. Check out the Datasource Generator Tutorial here.