Friday, June 3, 2011

Create A Dynamic XML Navigation Menu using Actionscript 2.0 | dynamic tutorial

This tutorial by Flash Farmer covers how to create a dynamic Flash XML navigation menu using Actionscript 2.0 and XML. Each button has a roll over and roll out animation. Control the clickthroughs, button titles and the total number of buttons with the external XML file. Once the Flash file is created you can update the menu just by editing the XML file.
This file consists of a nice structure and code is well commented.  Also, files to be downloaded comes along with full offline documentation.
Example of final product:










In This example and Tutorial you have learn how to createVertical Menu.

By Modifing its Action Script we can change this vertical menu to Horizontal Menu.

//FLASH FRAMER NAVIGATION MENU 1
//www.flashframer.com

//Store Button Position
var yPosition:Number = 0;

//Declare New XML Object
var myXML:XML = new XML();
//Set Flash to ignore the XML file's white space
myXML.ignoreWhite = true;
//Declare new Array to store the links from the XML file
var links:Array = new Array();
//Declare new Array to store the names from the XML file
var names:Array = new Array();

//Set XML onLoad function
myXML.onLoad = function(){
    //Set varible to store the XML childNodes
    //This allows you to get the number of buttons in the XML file.
    //You'll use this tell flash how many times to loop the for loop.
    var linkname:Array = this.firstChild.childNodes;
    //Set a for loop
    for(i=0;i<linkname.length;i++){
        //Push the button name into the names Array
        names.push(linkname[i].attributes.NAME);
        //Push the button link into the links Array
        links.push(linkname[i].attributes.LINK);
        //Attach the button Movie Clip from the libray give it an instance name and place it on the next highest level
        _root.attachMovie("button","btn"+i,_root.getNextHighestDepth());
        //Set the y position of the buttons
        _root["btn"+i]._x = yPosition;
        //Increace the varible yPosition 15 pixel each time the loop runs to place each button under each other
        yPosition = yPosition + 125
        //Place the button name from names Array into the blackTxt text box
        _root["btn"+(i)].blackTxt.Txt.text = (names[i]);
        //Place the button name from names Array into the whiteTxt text box
        _root["btn"+(i)].whiteTxt.Txt.text = (names[i]);
        //Assign the btnOver function to the button onRollOver state.
        _root["btn"+(i)].onRollOver = btnOver;
        //Assign the btnOut function to the button onRollOut state.
        _root["btn"+(i)].onRollOut = btnOut;
        //Assign the btnRelease function to the button onRelease state.
        _root["btn"+(i)].onRelease = btnRelease;
    }
}
//Load the XML file
myXML.load("links.xml");

//Button Over function
function btnOver(){
    //This referse to the current button the mouse is over
    //Go To And Play frame 2 of the current button the mouse is over
    this.gotoAndPlay(2);
}
//Button Out function
function btnOut(){
    //Go To And Play frame 16 of the current button the mouse rolls out from
    this.gotoAndPlay(16);
}
//Button Release function
function btnRelease(){
    //Set a varible named currentBtn equal to the instance name of the current button the mouse clicked on
    var currentBtn:String = this._name;
    //Set a varible named currentIndex equal to the varible currentBtn and the characters between 3rd letter and 5th of that string.
    //This will return a number between 0 and the total number of buttons
    var currentIndex:String = currentBtn.substring(3,5);
    //Get the URL from the links Array
    //Use the currentIndex varible as the index number
    getURL(links[currentIndex]);
}

//FLASH FRAMER NAVIGATION MENU 1
//www.flashframer.com


Its Define the position of menu from where the menu start to create.
_root["btn"+i]._x

This Define the space difference between two menu buttons .
  yPosition = yPosition + 125

NOTE :-
In this Tutroial we need to take care about text length for next menu position.


Now your flash will show as


No comments: