Website Integration - Flash Front End

The entire point of Red Rocket is to create completely generic, clean content. And with that clean content, allow for a way to create rich, dynamic Flash websites that are still seach engine friendly, bookmarkable, and usable right over the top of it all.

 

To do all this, you are going to need some tools to do it. This is a list of all the files you are going to need, what they do, and how to use them.

Template File

The template file is the key to the whole process. The template file creates the HTML framework to create the site. Each content bucket in your content manager gets created as an HTML page using this same template file. Therefore, it is important to acknowlege a few things

 

  • The template is the same for all pages, so just t he template variables change from page to page.
  • The template gets parsed as if it were an "internal" page in the publish directory. For this reason, when you create the template, create relative urls from this loaction. so use "../../assets/movies/loader.swf" instead of "assets/loader.swf" and the home page will get fixed afterwards.
  • Never link to relative files at the root of the project. Always create a sub-folder and use relative links from there. Hence, all relative links should begin with "../../".
  • Many of the template functions have a tab paramter to tell the parser how many tabs to add to the beginning of the string.
  • Template files get created as ascii, but can hold UTF-8 data. This is a PHP 4 issue we are currently trying to resolve. So, it helps to add UTF-8 meta tags and doctypes to the template.

 

You can see the example template at /source/php/template.php

Loader "shim"

The RRC framework, and the swf that has all your graphics, baselines, and whatnot, is probably pretty big. With all the components and 3rd party components, you are probably looking at 200k, if not more. Granted, that isnt huge for an entire site, but the problem is all those components sit right there on the first frame — before the preloader.

 

So what we need is a "shim". A loader file that does some simple tasks to get us on our way. Those two tasks are to check for flash 8 using ExpressInstall (and SWFObject that is integrated in the Javascript Toolkit), and most importantly, to provide visual feedback to your user to explain to them you are loading up your site framework.

 

An example loader shim can be found in /source/fla/loader.fla

RRC Framework & Site file

The Red Rocket Component (RRC) framework & site file is the file with all the components, and baselines, and graphics, or whatever you need to style and render your content.

 

The example source is located at /source/fla/core.fla

The example swf is at /project/assets/movies/core.swf

Soundtrack Source

The Soundtrack Source is the "engine" for the site soundtrack. If you plan on using a site soundtrack, you will need this swf. It is located in your sample files here:

 

/project/assets/movies/soundtrack.swf

 

All you need to do is embed the movie on the page somewhere. if you wish, you can rename and relocate this file to suit your organizational/filenaming conventions.

CSS

Because we are using SWFObject to embed the swfs, and we’re working within clean XHTML content, you are going to need a stylesheet to get your flash movie looking right.

 

An example stylesheet can be found at /project/assets/css/style.css

Red Rocket Javascript Toolkit

As of the time of this writing, the current javascript toolkit is here:

 

/project/assets/javascript/redrocket.utilities.compressed.2006.09.27.js

 

This is a compresses javascript file containing many other javascript files and classes that are essential to creating a flash site. This toolkit contains the following classes/utilities:

 

Deconcept’s SWFObject version 1.4

Theta Interactive SWFObject update for ExpressInstall

UnFocus’s HistoryKeeper for Usability/Bookmarking

Theta Interactive Javascript Utilities

Theta Interactive Cookie class

HTML Dog’s Suckerfish Shoal (class-ized by Theta Interactive)

Theta Interactive History Wrapper for HistoryKeeper

 

The source files for all of these are in /source/javascript and are uncompressed so you can see what they are and what they do, but in the end of the day, you really need to know these features:

 

UseFlash - Boolean as to whether or not to use flash as the website’s main renderer. You can toggle this value by appending ?flash=false|true to the url and it will set this value. It is also session-cookie based, so it will remeber the last setting you did. That way, if you disable flash, and start clicking around the html site, it will remain html.

 

ForceRoot() - lets say you turn flash off, and start navigation the flash site, or if, say, google indexes a deep link within your html content (which it will). ForceRoot returns the url back to the root of your site ands the appropriate bookmark hash to the url to alert flash of the proper content to load.

 

SWFObject - use this to create swf objects on the page.

 

History.SWFID() - once you have embedded flash in your site, you need to pass the History class the name of the flash file. This is the "id" of the flash, not a reference to the SWFObject instance.

 

An example of this toolkit in action is here:

 

<script type="text/javascript">

// <![CDATA[

if (UseFlash) {

ForceRoot();

History.SWFID("loader");

var container = new SWFObject("assets/movies/loader.swf", "loader", "100%", "100%", "8.0.23", null, true);

container.setAttribute("redirectUrl", REDIRECT_URL);

container.write("container");

}

// ]]>

</script>