SWFSEO
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.
//################## 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'
}
For example:
If a top level page is named aboutUs.html,
a sub page could be named aboutUsOurHistory.html
<!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>
<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>
<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. |
<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>
<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. |
<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>
<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>
<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>
<ul id="anythingyouwant">
<li data-type="string" id="longstring">
Lots of Copy
</li>
</ul>
...
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;
...
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.