Getting Started

Detailed View
Below is a more detailed description of the work flow diagram.
1. Create SWFSEO controller swf

Following the SWFSEO swfseo.swf template, create a standalone swfseo.swf. This swf will act as the main controller of your swf website site. It will communicate with all your page.swfs navigation button swfs, template swfs and load in all media content from your html pages. The ActionScript code in your flash file should something like the example below.
See the SWFSEO class documentation for more detail on various settings options.
package{
   import com.asual.swfaddress.SWFAddress;
   
   import com.pcthomatos.swfseo.*;
   import com.pcthomatos.swfseo.navStyles.*;
   
   import flash.display.StageScaleMode;
   import flash.display.StageAlign;
   import flash.display.Sprite;
   import flash.events.Event;
   import flash.external.ExternalInterface;
   
   public class MyWebsite extends MovieClip {
     private var swfseo:SWFSEO;
     
     public function MyWebsite():void {
       if (stage)init_Listener();
       else addEventListener(Event.ADDED_TO_STAGE, init_Listener);
     }
     
     private var init_Listener:Function = function (e:Event = null):void {
       removeEventListener(Event.ADDED_TO_STAGE, init_Listener);

       stage.scaleMode = StageScaleMode.NO_SCALE;
       stage.align = StageAlign.TOP_LEFT;
       stage.addEventListener(Event.RESIZE, resizeListener);
       
       loadBg();

       swfseo = new SWFSEO(stage);
       setSWFSEO();
       swfseo.load();

       
       cleanMain();
       cleanMain = null;
     }
	 
     // all these settings are optional 
	 // if the are not set default values will be used.
     private var setSWFSEO:Function = function ():void { 
       swfseo.rootPage = "indexPage.html"; // *Note: Case Sensitivity       
       swfseo.swfMinWidth = 1300;
       swfseo.swfMinHeight = 700;
       swfseo.scrollbarsEnabled = true;
       swfseo.lockNav = true;
       swfseo.styleNav = Transition;
       swfseo.tabNavEnabled = true;
       swfseo.tabFocusRect = true;
       swfseo.tabFocusRectColor = 0xCCCCCC;
       swfseo.navFont = "Blackadder ITC";
       swfseo.navSize = 20;
       swfseo.navOverTextColor = 0x00FF00;
       swfseo.navOffTextColor = 0xBFBDFB;
       swfseo.navOnTextColor = 0xFFFFFF;
       swfseo.navBold = true;
       swfseo.navItalic = true;
       swfseo.navUnderline = true;
       swfseo.navKerning = true;
       swfseo.navLetterSpacing = null;
       swfseo.preloaderTextColor = 0xFFFFFF;
       swfseo.preloaderBytesColor = 0xFF6666;
       swfseo.preloaderBarColor = 0x66FF66;
       swfseo.preloaderBarBorderColor = 0x666666;       
       swfseo.preloadBufferOnly = true;
       swfseo.trackingFunction = function():void {
         ExternalInterface.call("googlePageTracker._trackPageview", SWFAddress.getValue());
       }
     }
     
     private final function resizeListener(e:Event):void {
	 // place code here if you want your background to stretch or center on resize
     
     }

     private var loadBg:Function = function ():void {
	 // if you want an overall background image or something that stretches on resize - place code in here and add code to the resizeListener if necessary
       
     }

     private var cleanMain:Function = function ():void {
       loadBg = null;
       setSWFSEO = null;
       init_Listener = null;
       
       swfseo = null;       
     }
   }
}
See the SWFSEO class for more settings details.
1a. Update swfseosettings.js - If Necessary

/js/libs/swfseosettings/1.71/swfseosettings.js - should be updated if necessary.
//################## SWFSEO Settings    /js/libs/swfseosettings/1.71/swfseosettings.js
var rootPageName = "index.html";
//################## SWFObject Settings
var swfFilename = 'swfseo.swf';
var swfObjectDivId = 'altContent';
var flashVersion = '9.0.0';

if (typeof flashvars == "undefined") var flashvars = {}; // allows for creation of flashvars in html page head tag

var params = {
	menu: 'false',
	scale: 'noScale',
	AllowScriptAccess: 'always',
	AllowFullScreen : 'true'
};
var attributes = {
	id : 'mainSite'
}
2. Create HTML Pages

Following the SWFSEO HTML template, create html or server side pages that output HTML. Below is the html template that should be used on all pages.
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<title>Your Title Goes Here</title>	
		<script language="JavaScript" type="text/javascript"><!--
	    	//var flashvars = {  name1: "hello",  name2: "world"};
	    //--></script>
	 	<script src="http://www.google.com/jsapi"></script>	
		<script type="text/javascript" src="js/libload1.js"></script>
		<script type="text/javascript" src="js/libload2.js"></script>
	</head>
	<body>
		<div id="altContent">
	
		</div>
		<script type="text/javascript" src="js/google-analytics1.js"></script>
		<script type="text/javascript" src="js/google-analytics2.js"></script>
	</body>
</html>
2a. Add Navigation Information To HTML Pages

Following the SWFSEO HTML template, create your navigation using the <ol><li> construct.

SWFSEO contains a navigation validator in case your syntax is incorrect.
View trace statements for any errors.


The <ol><li> Construct
All navigation and sub navigation is wrapped in <ol><li> tags. These tags have several attributes and values that specify page an navigation information.


Global vs. Individual Settings
With the exception of the id attribute the <ol><li> construct follows this order of hierarchy.
However, as you'll see further down, the data-templateswf is inherited by all children, but it can be overridden just like all other attributes.

<ol Attributes apply to all <li> tags inside this block. >
        <li Attributes override <ol> tag and are specific only to this tag. />
        <li Attributes override <ol> tag and are specific only to this tag. />
        . . . etc.
</ol>




The <ol> construct
Below is a description of usage of the <ol> construct.
Notice how most attributes are prefixed with "data-", this is for X/HTML 5 compliance
[ ]: optional
{ }: user defined
<ol 
	id="{ol id: case sensitive, no spaces}" 
	[data-x="{number}"] 
	[data-y="{number}"] 
	[data-xhome="{number}"] 
	[data-yhome="{number}"] 
	[data-singlenavswf="{path to swf file} | {noNav}"] 
	[data-btnswf="{path to swf file}"] 
	[data-templateswf="{path to swf file}"] 
	[data-padding="{number}"] 
	[data-direction="{h|v}"]
>
	{li html 5 compliant navigation tags see below}
</ol>

id: Specifies the parent page name or "navigation" for the root page.

See Navigation and Subnavigation below for more details.
data-x: Specifies the x coordinate for all <li> navigation tags contained in the <ol> block.

It can be overridden by each individual <li> tag. This will act as a default if an data-x coordinate is not specified in an <li> tag.
data-y: Specifies the y coordinate for all <li> navigation tags contained in the <ol> block.

It can be overridden by each individual <li> tag. This will act as a default if a data-y coordinate is not specified in an <li> tag.
data-xhome: Used by root navigation and it's sub navigation only
(1st and 2nd level only).

Specifies an alternative x coordinate that will only display on the initial load of the root swf page of your website. If a user switches back to the index page, later on, the navigation will be positioned at what is specified in data-x, not data-xhome.

If data-xhome is used it must be used on all 1st and 2nd level navigation elements. If data-xhome is being used data-yhome must be specified as well.

Like the data-x parameter this will be used by all <li> navigation tags contained in the <ol> block.

It can be overridden by each individual <li> tag. This will act as a default if an data-xhome coordinate is not specified in an <li> tag.
data-yhome: Used by root navigation and it's sub navigation only
(1st and 2nd level only).

Specifies an alternative y coordinate that will only display on the initial load of the root swf page of your website. If a user switches back to the index page, later on, the navigation will be positioned at what is specified in data-y, not data-yhome.

If data-yhome is used it must be used on all 1st and 2nd level navigation elements. If data-yhome is being used data-xhome must be specified as well.

Like the data-y parameter this will be used by all <li> navigation tags contained in the <ol> block.

It can be overridden by each individual <li> tag. This will act as a default if an data-yhome coordinate is not specified in an <li> tag.
data-singlenavswf: Specifies the path of the navigation swf to be used instead of multiple buttons swfs. However it is up to the user to specify everything including the SWFAddress click states and the actual link copy. There is currently no way for this navigation swf to read in the text for navigation at this time.

Alternatively, if no navigation is needed in your swfseo you can specify "noNav" and no navigation will be loaded.

Note: This attribute overrides any data-btnswf attribute, specified in either the <ol> or <li>. Those btnSwfs will not show.
data-btnswf: Specifies the single navigation button swf to be used for all <li> navigation tags contained in the <ol> block.

It can be overridden by each individual <li>. This will act as a default if a data-btnswf is not specified in an <li> tag.

If no data-btnswf is specified here or in the <li> navigation tag then text will be used. The settings for the text are set in the main controller file, swfseo.swf.
data-templateswf: Specifies the template swf to be used for all <li> navigation tags contained in the <ol> block and all children <ol> blocks.

It can be overridden by every child <ol> tag or each individual <li>. This will act as a default if a data-templateswf is not specified in an <li> tag.
data-padding: Specifies how much space to place between each navigtation element.

Used only if both data-x and data-y are being used exclusively in the <ol> block, with no data-x or data-y being used in the individual <li> tags.
data-direction: Specifies if the navigation will flow horizontally or vertically.

Used only if both data-x and data-y are being used exclusively in the <ol> block, with no data-x or data-y being used in the individual <li> tags.


Below is an example of the <ol> construct.
 
 
<ol id="pages" data-x="450" data-y="15" data-xhome="250" data-yhome="115" data-btnswf="swf/navbutton.swf" data-templateswf="swf/template.swf" data-padding="10" data-direction="h">
	<li data-x="430" data-y="0" data-xhome="225" data-yhome="100">
		<a href="page1.html">Page 1</a>
	</li>
	<li data-x="450" data-y="15" data-xhome="250" data-yhome="115" data-btnswf="swf/navbutton.swf" data-templateswf="swf/template.swf">
		<a href="page2.html">Page 2</a>
	</li>
</ol>



The <li> construct
Below is a description of usage of the <li> construct.
[ ]: optional
{ }: user defined
<li
	[data-x="{number}"] 
	[data-y="{number}"] 
	[data-xhome="{number}"]
	[data-yhome="{number}"] 
	[data-btnswf="{path to swf file}"] 
	[data-templateswf="{path to swf file}"]
>
	<a href="{path to webpage file}">[{navigation title text}]</a>
</li>

id: Specifies the name for the individual page. This will be used by sub navigation if any is present. And as a grouping reference for that page's content.

See step 2b. Add Content to HTML Pages for more details.
See Navigation and Subnavigation below for more details.
data-x: Specifies the x coordinate for this <li> tag.

Overrides the <ol> tag's data-x if one is present.
data-y: Specifies the y coordinate for this <li> tag.

Overrides the <ol> tag's data-y if one is present.
data-xhome: Used by root navigation and it's sub navigation only
(1st and 2nd level only).

Specifies an alternative x coordinate that will only display on the initial load of the root swf page of your website. If a user switches back to the index page, later on, the navigation will be positioned at what is specified in data-x, not data-xhome.

If data-xhome is used it must be used on all 1st and 2nd level navigation elements. If data-xhome is being used data-yhome must be specified as well.
data-yhome: Used by root navigation and it's sub navigation only
(1st and 2nd level only).

Specifies an alternative y coordinate that will only display on the initial load of the root swf page of your website. If a user switches back to the index page, later on, the navigation will be positioned at what is specified in data-y, not data-yhome.

If data-yhome is used it must be used on all 1st and 2nd level navigation elements. If data-yhome is being used data-xhome must be specified as well.
data-btnswf: Specifies the navigation button swf to be used for this <li> tag.

If no data-btnswf is specified here or in the <ol> tag then text will be used. The settings for the text are set in the main controller file, swfseo.swf.
data-templateswf: Specifies the template swf to be used for this <li> tag.


Below is an example of the <li> construct.
 
<li data-x="450" data-y="15" data-xhome="250" data-yhome="115" data-btnswf="swf/navbutton.swf" data-templateswf="swf/template.swf">
	<a href="pagefile.html">Page Name</a>
</li>



Navigation and Subnavigation
Any page can have children pages. And every page except your root page has a parent page.

Below is an example of root level navigation on a swfseo site.
This code would be place inside the altContent div of index.html.
 
 
<ol id="navigation" data-x="450" data-y="35" data-xhome="450" data-yhome="320" data-padding="10" data-direction="h" data-btnswf="swf/navbutton.swf" data-templateswf="swf/template.swf">
	<li data-x="400" data-y="35" data-xhome="400" data-yhome="320">Home</li>
</ol>
 	
<ol id="index" data-x="450" data-y="35" data-xhome="500" data-yhome="320" data-padding="10" data-direction="h" data-templateswf="swf/template.swf">
	<li data-btnswf="swf/navbuttonalt.swf" data-templateswf="swf/template3.swf">
		<a href="page1.html">Page 1</a>
	</li>
	<li data-btnswf="swf/navbuttonalt.swf" data-templateswf="swf/template2.swf">
		<a href="page2.html">Page 2</a>
	</li>
	<li data-btnswf="swf/navbutton.swf">
		<a href="page3.html">Page 3</a>
	</li>
	<li data-templateswf="swf/template3.swf">
		<a href="page4.html">Page 4</a>
	</li>
</ol>
If page1.html in the previous example contains more sub navigation underneath it. This is how the <ol> tags would look in page1.html.
<ol id="navigation">
	<li><a href="index.html">Home</a></li>
</ol>	
<ol id="index">
	<li>Page 1</li>
	<li><a href="page2.html">Page 2</a></li>
	<li><a href="page3.html">Page 3</a></li>
	<li><a href="page4.html">Page 4</a></li>
</ol>
<ol id="page1" data-y="135">
	<li data-x="400" data-btnswf="swf/navbutton.swf">
		<a href="page1sub1.html">Sub Page 1</a>
	</li>
	<li data-x="600">
		<a href="page1sub2.html">Sub Page 2</a>
	</li>
	<li data-x="800" data-btnswf="swf/navbuttonalt.swf">
		<a href="page1sub3.html">Sub Page 3</a>
	</li>
	<li data-x="1000">
		<a href="page1sub4.html">Sub Page 4</a>
	</li>
</ol>
2b. Add Content to HTML Pages

Following the SWFSEO HTML Template, add media content to each page using the <ul><li> construct. The content will be preloaded and accessible by all page swfs. The content included on these html pages is search engine friendly.

UltraLoader is used to load in media content. It uses the th><ul><li> construct.

For more details on UltraLoader and how to create UltraLoader tags see the UltraLoader documentation.

One important UltraLoader note when used by SWFSEO.
Each page is broken out as a seperate grouping.

If you are on a page named page3.html, and add a <ul><li> tag like this:
	<ul id="anythingyouwant">
     <li data-type="string" id="longstring">
      Lots of Copy
     </li>
    </ul>

You can access "longstring" in one of 3 ways in your page3.swf (or any of your page swfs):
...
var ulObj:Object = SWFSEOUL.ul;

addEventListener(SWFSEOPageEvent.READY, render_Listener);

function render_Listener(e:Event):void{
	removeEventListener(SWFSEOPageEvent.READY, render_Listener);
    //You can access longstring in one of 3 ways:
    var longString:String = ulObj.page3.anythingyouwant.longstring; // or
    //var longString:String = ulObj.page3.$string.longstring; // or
    //var longString:String = ulObj.$string.longstring;
	...
3. Create Corresponding Page Swfs

Following the SWFSEO page swf templates, create page swfs that match the name of the html page and utilize SWFSEOPageEvent listeners in order to communicate with swfseo.swf.

It is recommended that your page swf's use a document class that extends com.pcthomatos.swfseo.swfResources.SWFSEOPage in order to better control the size of your page swf as well as communicate more effectively with SWFSEO. However it is not necessary to do so.

See the SWFSEOPage class for more details.


Page SWF Naming
Page swf names must match their html counterpart. For example, if an html page is named aboutUs.html?anyname=somevalue a page swf must exist that is named aboutUs.swf.
*Note: Case Sensitivity


Page Events
To communicate with the main controller, swfseo.swf, each page swf listens for, or dispatches specific events.

See the SWFSEOPageEvent class for a list of all the event types and explanation of their usage.


Accessing Content
Based on the html asset information loaded in using the <ul><li> construct. All assets are accessible via the static object SWFSEOUL.ul.

See the SWFSEOUL class for more details.


Controlling Page Dimensions
Your website's dimensions are controlled by each page. If you are using template swfs, always make sure your page swf's dimensions exceed your template's.

There are 2 ways to guarantee that your template wont get cut off.
  1. Have your document class extend com.pcthomatos.swfseo.swfResources.SWFSEOPage and then after the SWFSEOPageEvent.READY event has been dispatched change the value of the manualHeight propterty.

    See the SWFSEOPage class for more details.
  2. If you insist on not using a document class add code that is similar to the example below.
    	var dimensionsSprite:Sprite = new Sprite();
    		dimensionsSprite.graphics.clear();
    		dimensionsSprite.graphics.beginFill(0x000000, 0);
    		dimensionsSprite.graphics.drawRect(0,0,980,580);
    		addChildAt(dimensionsSprite,0);
    
    In short, draw an invisible rectangle, with the dimensions needed to exceed the template, and add it as the first element of your page.swf's display list.
3a. Create Navigation Button Swfs (optional)

Following the SWFSEO navigation button swf templates, create navigation button swfs that utilize SWFSEONavBtnEvent to communicate with the main controller, swfseo.swf.

See the SWFSEONavBtnEvent class for a list of all the event types and an explanation of their usage.


All pages can either:
3b. Create Template Swfs (optional)

Following the SWFSEO template swf templates, create template swfs that can optionally utilize SWFSEOPageEvent to communicate with swfseo.swf.

It is recommended that your template swf's use a document class that extends com.pcthomatos.swfseo.swfResources.SWFSEOTemplate in order to communicate more effectively with SWFSEO. However it is not necessary to do so.

See the SWFSEOTemplate class for more details.


Page Events can be used by Template swfs
Template swfs can also use the same page events to communicate with the main controller, swfseo.swf, Each template swf can listen for, or dispatch specific events.

See the SWFSEOPageEvent class for a list of all the event types and an explanation of their usage.


Accessing Content
Template swfs also have access to any content loaded in using the <ul><li> construct. All assets are accessible via the static object SWFSEOUL.ul.


All pages can either: