Create a Dynamic Deep Linking Flash Web Site with SWFAddress

// set stage settings

var fileStage:Stage = this.stage;

fileStage.scaleMode =  StageScaleMode.NO_SCALE;

fileStage.align = StageAlign.TOP_LEFT;

// import caurina tweener

import caurina.transitions.Tweener;

// main timeline object

var index:Object = this;

// New Xml Object

var fileXml:XML;

// check how many menu items we have.

var totalMenuItems:Number;

// New URL Request - Add a COMPLETE event listener to load the site once the XML load has been completed.

var xmlLoader:URLLoader = new URLLoader(new URLRequest ("main.xml"));

xmlLoader.addEventListener(Event.COMPLETE, createSite);

function createSite (e:Event):void {

// store the xml file in our xml variable	

	fileXml = new XML(e.target.data);

// use a constructor function to use the xml 	

	index.createMainMenu(fileXml.menu);

} 

function createMainMenu(xmlData:XMLList):void {

	// create the length of our menu 

	index.totalMenuItems = xmlData.*.length();

	// create a movie clip with the instance name menu_clip and add it to the stage.

	// then use a <code>for</code> loop to create our menu

	for (var i:uint = 0; i < index.totalMenuItems; i++) {

		/*

		create a movieclip and export for actionscript with the class name: menuItem

		it should contain one dynamic textbox with the instance name of menu_item_text.

		*/

		// create our new menu item

		var menu_item:menuItem = new menuItem();

		// set the identification 

		menu_item.id = i;

		menu_item.name = "id" + i;    

		// position our menu items dynamically

		menu_item.x = (i * menu_item.width);

		// add the xml values to the text box inside the new item.

		menu_item.menu_item_text.text = xmlData.item.@item_name[i];

		// add the module address to the menu variable / It will come in useful later.

		menu_item.item_module = xmlData.item.@item_module[i];

		/*

		create a new layer and place the menu_clip movieclip onto that layer. 

		Give it an instance name of menu_clip

		*/

		// add each menu item to the menu_clip movieclip using addChild()

		index.menu_clip.addChild(menu_item);

	}

}

	// assign events to menu buttons. 

	// rollover & rollout effects 

	menu_item.addEventListener(MouseEvent.MOUSE_OVER, menuRollOver);

	menu_item.addEventListener(MouseEvent.MOUSE_OUT, menuRollOut);

	menu_item.addEventListener(MouseEvent.MOUSE_DOWN, menuPress);

function menuRollOver (e:MouseEvent) {

	// menu button variable - We use getChildByName to aim at the correct menu item

	// e.target.id is referring to the menu_item.id we defined earlier.

	var button:MovieClip = index.menu_clip.getChildByName("id" + e.target.id) as MovieClip;

	// set the animation usign caurina tweener

	Tweener.addTween( button, {alpha: 0.5, time: 2, transition:"easeOutExpo"});

}

function menuRollOut (e:MouseEvent) {

	// menu button variable - We use getChildByName to aim at the correct menu item

	// e.target.id is referring to the menu_item.id we defined earlier.

	var button:MovieClip = index.menu_clip.getChildByName("id" + e.target.id) as MovieClip;

	// set the animation using caurina tweener

	Tweener.addTween( button, {alpha: 1, time: 2, transition:"easeOutExpo"});

}

function menuPress (e:MouseEvent) {

	// SWFAddress set value function

	SWFAddress.setValue(e.target.deep_link);

}

function handleSWFAddress(e:SWFAddressEvent) {

	/*

	set html title names

	*/

	var htmlTitle:String= "XML Deep linking Tutorial";

	for (var i:Number = 0; i < e.pathNames.length; i++) {

		htmlTitle+=' / '+String(e.pathNames[i].substr(0,1).toUpperCase()+e.pathNames[i].substr(1)).split("_").join(" ");

	}

	/*

	To format the HTML title we use the split and join techniques. 

	These replace _ with a space. We make it a string to ensure it is useable, like so:

	String(e.pathNames[i].substr(0,1).toUpperCase()+e.pathNames[i].substr(1)).split("_").join(" ");

	*/

	// this function does all the work and  assigns the HTML title

	SWFAddress.setTitle(htmlTitle);

}

// when the SWFAddress.setValue() is fired this event listens for it and inits the function above.

SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleSWFAddress);

// Place this code in our <code>for</code> loop below the addEventListeners

		/*

		this variable contains a function that will contain the events when the swfaddress in changed.

		*/

		menu_item.init = function () {

			/*

			create a new movieclip and call it module_clip, then place it on a new layer then give it

			the instance name of module_clip

			*/

			// new variable that has contains the path of the swf we are loading in.

			var module:String = this.item_module;

			// fade out our current module if any, then commence the load of our new module using the tweener's onComplete function

			Tweener.addTween( index.module_clip, {alpha: 0, time: 2, transition:"easeOutExpo", onComplete:function () 

				{

					index.createModule(module);

					// remove the previous module only if it isn't the first load

					if (index.firstLoad == false) {

						index.module_clip.removeChildAt(0);

					}            

				}

			});

		}

// At the top of the actionscript place this:

var firstLoad:Boolean = true; // prevents null errors

function createModule (url:String) {

	// we create a new loader

    var loader:Loader = new Loader();

	// we create a new url request for our loader

    var moduleURL:URLRequest = new URLRequest(url);

	// we add event listeners to the loader. some are not necessary but I included them for convenience

    loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress);

	// when the module has loaded we trigger loadComplete() with a event listener.

    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);

    loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, loadError);

    loader.load(moduleURL);

    function loadProgress (e:ProgressEvent) {

    }

	// triggered when module has loaded

    function loadComplete (e:Event) {

		// fade in the module

		Tweener.addTween( index.module_clip, {alpha: 1, time: 2, transition:"easeOutExpo"});

		// add the current module to the module_clip movieclip by using addChild

		index.module_clip.addChild(e.currentTarget.content);

		// now we have the first load we set firstLoad to false. It then remains false for the whole session.

		index.firstLoad = false;

    }

    function loadError (e:Event) {

        trace("error");

    }

}

// set the menu item deep link plus formatting with split and join. toLowerCase() makes every character lowercase. 

menu_item.deep_link = xmlData.item.@item_name[i].split(" ").join("_").split("/").join("_").toLowerCase();

// function to handle swfaddress events.

function handleSWFAddress(e:SWFAddressEvent) {

	/*

	set html title names

	*/

	var htmlTitle:String= "XML Deep linking Tutorial";

	for (var i:Number = 0; i < e.pathNames.length; i++) {

		htmlTitle+=' / '+String(e.pathNames[i].substr(0,1).toUpperCase()+e.pathNames[i].substr(1)).split("_").join(" ");

	}

	/*

	To format the HTML title we use the split() and join() techniques. 

	These replace _ with a space. We make it a string to ensure it is useable, like so:

	String(e.pathNames[i].substr(0,1).toUpperCase()+e.pathNames[i].substr(1)).split("_").join(" ");

	*/

	// this function does all the work and  assigns the HTML title

	SWFAddress.setTitle(htmlTitle);

	// create a <code>for</code> loop to iterate through the total number of menu items. use index.totalMenuitems to do so.

	/* 

	You may be wondering why I am using n instead of i in the <code>for</code> loop. Well if there are two <code>for</code> loops in the same function

	and both loops are iterating through the variable i it throws an error. Using n or another var solves this error.

	*/

	for (var n:uint = 0;  n < index.totalMenuItems; n++) {

		// this var is used to iterate through all our menu items

		var button:MovieClip = index.menu_clip.getChildByName("id"+ n) as MovieClip;

		// the if statement below is the most important part of our code. 

		// SWFAddress.getValue() is explained in the next step

		// we need to get rid of the "/" on the front in order for it to equal the button's deep link

		if (button.deep_link == SWFAddress.getValue().split("/")[1]) {

			// if any of button deep links equal the URL set then it initiates the menu_item.init function we set earlier

			button.init();

			// to stop the code we use return.

			return;

		}

	}

}

SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleSWFAddress);

trace(SWFAddress.getValue());

// this var is referenced to the first menu item

var firstButton:MovieClip = index.menu_clip.getChildByName("id" + 0) as MovieClip;

// use the dispatch event to fire the press event on the first button. This then sets the deep link. The swfAddress on change listener function inits.

// Therefore the <code>for</code> loop above will load the first module.

firstButton.dispatchEvent( new MouseEvent(MouseEvent.MOUSE_DOWN));

for (var i:uint = 0; i < index.totalMenuItems; i++) {

	var button:MovieClip = index.menu_clip.getChildByName("id" + i) as MovieClip;

	if( button != this ) {

		button.enabled = true;

		button.addEventListener(MouseEvent.MOUSE_OUT, menuRollOut);

		button.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_OUT));

	} else {

		button.enabled = false;

		button.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_OVER));

		button.removeEventListener(MouseEvent.MOUSE_OUT, menuRollOut);

	}

}

// set stage settings

var fileStage:Stage=this.stage;

fileStage.scaleMode=StageScaleMode.NO_SCALE;

fileStage.align=StageAlign.TOP_LEFT;

// import caurina tweener

import caurina.transitions.Tweener;

// main timeline object

var index:Object=this;

// New Xml Object

var fileXml:XML;

// check how many menu items we have.

var totalMenuItems:Number;

// prevents null errors

var firstLoad:Boolean = true;

// New URL Request - Add a complete event listener to load the site once the load has been completed.

var xmlLoader:URLLoader = new URLLoader();

xmlLoader.load (new URLRequest("main.xml"));

xmlLoader.addEventListener( Event.COMPLETE, createSite);

function createSite(e:Event) {

    // store the xml file in our xml variable

    fileXml=new XML(e.target.data);

    // use a constructor function to use the xml

    index.createMainMenu(fileXml.menu);

}

function createMainMenu(xmlData:XMLList) {

    // create the length of our menu

    index.totalMenuItems=xmlData.*.length();

    // create a movie clip with the instance name menu_clip and add it to the stage.

    // then use a <code>for</code> loop to create our menu

    for (var i:uint = 0; i < index.totalMenuItems; i++) {

        /*

        create a movieclip and export for actionscript with the class name: menuItem

        it should contain one dynamic textbox with the instance name of menu_item_text.

        */

        // create our new menu item

        var menu_item:menuItem = new menuItem();

        // set the identification

        menu_item.name="id"+i;

        menu_item.id=i;

        // set the menu item deep link plus formatting with split and join. toLowerCase() makes every character lowercase

        menu_item.deep_link = xmlData.item.@item_name[i].split(" ").join("_").split("/").join("_").toLowerCase();

        // give it a button cursor & make the target the button and not its children

        menu_item.buttonMode=true;

        menu_item.mouseChildren=false;

        // position our menu items dynamically

        menu_item.x = (i * menu_item.width);

        // add the xml values to the text box inside the new item.

        menu_item.menu_item_text.text=xmlData.item.@item_name[i];

        // add the module address to the menu variable / It will come in useful later.

        menu_item.item_module=xmlData.item.@item_module[i];

        /*

        create a new layer and place the menu_clip movieclip onto that layer.

        Give it an instance name of menu_clip

        */

        // assign events to menu buttons. place the functions to handle these events below the createMainMenu function

        // rollover & rollout effects

        menu_item.addEventListener(MouseEvent.MOUSE_OVER, menuRollOver);

        menu_item.addEventListener(MouseEvent.MOUSE_OUT, menuRollOut);

        menu_item.addEventListener(MouseEvent.MOUSE_DOWN, menuPress);

        /*

        this variable contains a function that will contain the events when the swfaddress in changed.

        */

        menu_item.init = function () {

            /*

            create a new movieclip and call it module_clip, then place it on a new layer then give it

            the instance name of module_clip

            */

            // new variable that has contains the path of the swf we are loading in.

            var module:String = this.item_module;

            // fade out our current module if any, then commence the load of our new module using the tweener's onComplete function

            Tweener.addTween( index.module_clip, {alpha: 0, time: 2, transition:"easeOutExpo", onComplete:function () {

                    index.createModule(module);

                    if (index.firstLoad == false) {

                        index.module_clip.removeChildAt(0);

                    }

            }});

            for (var i:uint = 0; i < index.totalMenuItems; i++) {

                var button:MovieClip = index.menu_clip.getChildByName("id" + i) as MovieClip;

                if( button != this ) {

                    button.enabled = true;

                    button.addEventListener(MouseEvent.MOUSE_OUT, menuRollOut);

                    button.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_OUT));

                    } else {

                    button.enabled = false;

                    button.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_OVER));

                    button.removeEventListener(MouseEvent.MOUSE_OUT, menuRollOut);

                }

            }

        }

        // add each menu item to the menu_clip movieclip using addChild()

        index.menu_clip.addChild(menu_item);

    }

    // function to handle swfaddress events.

    function handleSWFAddress(e:SWFAddressEvent) {

        /*

        set html title names

        */

        var htmlTitle:String= "XML Deep linking Tutorial";

        for (var i:Number = 0; i < e.pathNames.length; i++) {

            htmlTitle+=' / '+String(e.pathNames[i].substr(0,1).toUpperCase()+e.pathNames[i].substr(1)).split("_").join(" ");

        }

        /*

        to format the html title we use the split and join technique. It replaces _ with a space. We make it a string to ensure it is useable.

        String(e.pathNames[i].substr(0,1).toUpperCase()+e.pathNames[i].substr(1)).split("_").join(" ");

        */

        // this function does all the work and assigns the html title

        SWFAddress.setTitle(htmlTitle);

        // create a <code>for</code> loop to iterate through the total number fo menu items. hence we use index.totalMenuitems to do so.

        /*

        You may be wondering why I am using n instead of i in the <code>for</code> loop. Well Adobe failed to realise that if there are two <code>for</code> loops in the same function

        and both loops are iterating through the variable i it throws an error. Using n or another var solves this error.

        */

        for (var n:uint = 0; n < index.totalMenuItems; n++) {

            // this var is used to iterate through all our menu items

            // this var is referenced to the first menu item

            var button:MovieClip = index.menu_clip.getChildByName("id"+ n) as MovieClip;

            // the if statement below is the most important part of our code.

            // SWFAddress.getValue() is explained in the next step

            // we need to get rid of the "/" on the front in order for it to equal the button's deep link

            if (button.deep_link == SWFAddress.getValue().split("/")[1]) {

                // if any of button deep links equal the URL set then it initiates the menu_item.init function we set earlier

                button.init();

                // to stop the code we use return.

                return;

            }

        }

        var firstButton:MovieClip = index.menu_clip.getChildByName("id" + 0) as MovieClip;

        // use the dispatch event to fire the press event on the first button. This then sets the deep link.

        // Therefore the <code>for</code> loop above will load the first module.

        firstButton.dispatchEvent( new MouseEvent(MouseEvent.MOUSE_DOWN));

    }

    SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleSWFAddress);

}

function menuRollOver(e:MouseEvent) {

    // menu button variable - We use getChildByName to aim at the correct menu item

    // e.target.id is referring to the menu_item.id we defined earlier.

    var button:MovieClip=index.menu_clip.getChildByName("id"+e.target.id) as MovieClip;

    // set the animation using caurina tweener

    Tweener.addTween( button, {alpha: 0.5, time: 2, transition:"easeOutExpo"});

}

function menuRollOut(e:MouseEvent) {

    // menu button variable - We use getChildByName to aim at the correct menu item

    // e.target.id is referring to the menu_item.id we defined earlier.

    var button:MovieClip=index.menu_clip.getChildByName("id"+e.target.id) as MovieClip;

    // set the animation using caurina tweener

    Tweener.addTween( button, {alpha: 1, time: 2, transition:"easeOutExpo"});

}

function menuPress(e:MouseEvent) {

    // SWFAddress set value function

    SWFAddress.setValue(e.target.deep_link);

}

/*

this is the function that loads the selected module

*/

function createModule (url:String) {

    // we create a new loader

    var loader:Loader = new Loader();

    // we create a new url request for our loader

    var moduleURL:URLRequest = new URLRequest(url);

    // we add event listeners to the loader. some are not necessary but I included them for convenience

    loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress);

    // when the module has loaded we trigger the complete with a event listener.

    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);

    loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, loadError);

    loader.load(moduleURL);

    function loadProgress (e:ProgressEvent) {

    }

    // triggered when module has loaded

    function loadComplete (e:Event) {

        // fade in the module

        Tweener.addTween( index.module_clip, {alpha: 1, time: 2, transition:"easeOutExpo"});

        // add the current module to the module_clip movieclip by using addChild

        index.module_clip.addChild(e.currentTarget.content);

        // now we have the first load we set firstLoad to false

        index.firstLoad = false;

    }

    function loadError (e:Event) {

        trace("error");

    }

}