Flash Tutorial – Vertical Menu with Actionscript 3 and XML

 
<menu>

    <buttons>

        <button>
            <label>Home</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Tutorials</label>
            <linkTo>http://tutorials.flashmymind.com/complete-list-of-flash-and-actionscript-3-tutorials/</linkTo>
        </button>
        <button>
            <label>Forum</label>
            <linkTo>http://tutorials.flashmymind.com/forum/</linkTo>
        </button>
        <button>
            <label>About</label>
            <linkTo>http://tutorials.flashmymind.com/about/</linkTo>
        </button>
        <button>
            <label>Label 5</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 6</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 7</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 8</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 9</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 10</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 11</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 12</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 13</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 14</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 15</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 16</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 17</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 18</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 19</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 20</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 21</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 22</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 23</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 24</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>

    </buttons>

</menu>

//Import TweenMax
import gs.*;

//The path for the XML file (use your own here)
var xmlPath:String = "http://flashmymind.com/SWF/menu.xml";

//We will store the loaded XML to this variable
var xml:XML;

//Create a loader and load the XML. Call the function "xmlLoaded" when done.
var loader = new URLLoader();
loader.load(new URLRequest(xmlPath));
loader.addEventListener(Event.COMPLETE, xmlLoaded);

//This function is called when the XML file is loaded
function xmlLoaded(e:Event):void {

	//Make sure that we are not working with a null variable
	if ((e.target as URLLoader) != null ) {

		//Create a new XML object with the loaded XML data
		xml = new XML(loader.data);

		//Call the function that creates the menu
		createMenu();
	}
}

//Create a menu holder that will contain all the menu items
var menuHolder:MovieClip = new MovieClip();

//Give it the same position as the mask
menuHolder.x = myMask.x;
menuHolder.y = myMask.y;

//Assign a mask for the menu
menuHolder.mask = myMask;

//Add the holder to the stage
addChild(menuHolder);

//We want to keep count how many menu items have been created
var count:Number = 0;

function createMenu():void {

	//Loop through all the <button></button> nodes in the XML
	for each (var button:XML in xml.buttons.button) {

		//Create a new menu item
		var menuItem:MenuItem = new MenuItem();

		//Position the menu item with some padding (space between the items)
		menuItem.x = 0;
		menuItem.y = count * menuItem.height * 1.05;

		//Add a menu text
		menuItem.menuText.text = button.label.toString();

		//Assign a "linkTo" variable. This contains the URL where the menu will link to when clicked.
		menuItem.linkTo = button.linkTo.toString();

		//We don't want the item text field to catch mouse events
		menuItem.mouseChildren = false;

		//Add listeners for the mouse over, mouse out and click.
		menuItem.addEventListener(MouseEvent.MOUSE_OVER, mouseOverItem);
		menuItem.addEventListener(MouseEvent.MOUSE_OUT, mouseOutItem);
		menuItem.addEventListener(MouseEvent.CLICK, itemClicked);

		//Add the item to the menu holder
		menuHolder.addChild(menuItem);

		//Update the count (how many items have been created)
		count++;
	}

	//Call the function that adds listeners for the whole menu
	addMenuListeners();
}

//This function is called when the mouse is over an item
function mouseOverItem(e:Event):void {

	//Get the item that dispatched the event
	var item:MenuItem = e.target as MenuItem;

	//Tween the alpha
	TweenMax.to(item.menuFill, 0.5, {alpha: 1});
}

//This function is called when the mouse moves out from an item
function mouseOutItem(e:Event):void {

	//Get the item that dispatched the event
	var item:MenuItem = e.target as MenuItem;

	//Tween the alpha
	TweenMax.to(item.menuFill, 1, {alpha: 0.3});
}

//This function is called when an item is clicked
function itemClicked(e:Event):void {

	//Get the item that dispatched the event
	var item:MenuItem = e.target as MenuItem;

	//Navigate to the URL that's assigned to the menu item
	var urlRequest:URLRequest = new URLRequest(item.linkTo);
	navigateToURL(urlRequest);
}

//This function adds mouse event listeners for the whole menu
function addMenuListeners():void {

	//Add mouse over and out listeners
	menuHolder.addEventListener(MouseEvent.MOUSE_OVER, mouseOverMenuF);
	menuHolder.addEventListener(MouseEvent.MOUSE_OUT, mouseOutMenuF);

	//Add an ENTER_FRAME listener for the animation
	addEventListener(Event.ENTER_FRAME, enterFrameHandler);

}

//We want to know when the mouse is over the menu
var mouseOverMenu:Boolean = false;

//This function is called when the mouse is over the menu
function mouseOverMenuF(e:Event):void {

	//Set mouseOverMenu to true
	mouseOverMenu = true;
}

//This function is called when the mouse moves out from the menu
function mouseOutMenuF(e:Event):void {

	//Set mouseOverMenu to false
	mouseOverMenu = false;
}

//This function is called in each frame
function enterFrameHandler(e:Event):void {

	//Check if the mouse is over the menu
	if (mouseOverMenu) {

		//Calculate the vertical distance from the mouse to the mask's top left corner (=registration point)
		var distance:Number = mouseY - myMask.y;

		//Calculate the percentage
		var percentage:Number = distance / myMask.height;

		//Calculate the new target y coordinate (remember that y reduces as we go up)
		var targetY:Number = -((menuHolder.height - myMask.height) * percentage) + myMask.y;

		//Tween to the new coordinate
		TweenMax.to(menuHolder, 0.2, {y: Math.round(targetY)});
	}
}