James McNess

James McNess is a Flash developer, game designer and owner of Code and Visual, living in Sydney, Australia. With over ten years commercial experience James specialises in developing Flash games, HTML and Flash websites and also Flash applications for a variety of clients both large and small. He also develops Rainbow - a free online XML editor that can be used as an easy to install Flash CMS for small to medium based websites. You can find out more at: http://www.codeandvisual.com

View all articles by James McNess

Generated HTML Format


The HTML content generated by the datasource.php file has the the following structure:

<div id="page">
  <div id="introduction">
    <div id="menu">
      <ul id="menu_parent">
        <li id="home">
          <a href="http://www.mySite.com/">Home</a>
        </li>
 <li id="parent">
          <a href="http://www.mySite.com/...">Parent Page Name</a>
        </li>

        <li>
          <ul id="menu_siblings">
            <li id="selected">
              <a href="http://www.mySite.com/...">Page Name</a>
            </li>
            <li id="">
              <a href="http://www.mySite.com/...">Page Name</a>
            </li>
            <li id="">
              <a href="http://www.mySite.com/...">Page Name</a>
            </li>
            <li id="">
              <a href="http://www.mySite.com/...">Page Name</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div id="menu_children">
      <ul />
    </div>
    <div id="content_area">
      <div id="text">
        <span id="title">Text</span>
        <div class="text_item">
Text content goes here - this will retain any Flash based htmlText you include, 
but will automatically convert FONT tags to span and put the textformat attributes 
into a style attribute
        </div>
      </div>
      <div id="images">
        <span id="title">Images</span>
        <img class="image_item" src="http://..."/>
      </div>
      <div id="videos">
        <span id="title">Video</span>
      </div>
    </div>
  </div>
</div>


So as you can see there the output starts with a menu that that contains a link to the site root; a link to the parent page which is one level higher than the current (this is if you have sub menu navigation, otherwise this link will not appear); and finally the content of the page is displayed as a text section, an images section and a video section (video is currently not supported but it should display the URL links to the videos you include.) Here is the example HTML file created by using the datasource.


Next steps CSS formatting and your index file.

As we have done with the example, you can use CSS to format your alternative content making it's appearance in line with that of your actual Flash site. Here is the CSS file used in the example. A complete overview on CSS is beyond the scope of this tutorial but you can see that ids and classes are placed within the output markup in order to enable you to control the visual styling. The index.php file you use is also important. You will need to use the php functionality provided in the example index.php as well as SWFObject to enble the smooth transition from Flash to non Flash content. In most cases you will just be able to use an exact copy of the php file and just change the page title value along with the name of your .swf file. So that's all it takes to enable automated generation of backup content for your Flash file. It might seem like an involved process but in reality there is not much you need to understand. The most important thing you need to understand are the settings in the Rainbow Live preferences sections and how they related to the data structure you have set up.


Example Files

Grab the complete package of examples files for this tutorial. NOTE - because you need to register and setup Rainbow to work via FTP on your own domain it is not possible to merely copy these files on to your server without setting your rainbow preferences. The recommendation is to use the Rainbow easy install wizard and then copy the required files into the appropriate location.

In addition to Rainbow, the minimum you will need will is:
index.php file
swfaddress folder and contents
swfobject folder and contents
.htaccess file

Once Rainbow is installed you can import the example project.rbw file includes, or build your own structure.

These files are generated by Rainbow:
datsource.php
sitemap.xml
Learn more about Rainbow Live - The simplest Flash CMS.