Flash Tutorial – Advanced XML Menu

<?xml version="1.0" encoding="utf-8"?>

<menus>

	<menu id="1">
		<item>1.1</item>
		<item>1.2</item>
	</menu>

	<menu id="2">
		<item>2.1</item>
		<item>2.2</item>
		<item>2.3</item>
		<item>2.4</item>
	</menu>

	<menu id="3">
		<item>3.1</item>
		<item>3.2</item>
		<item>3.3</item>
		<item>3.4</item>
	</menu>

	<menu id="4">
		<item>4.1</item>
		<item>4.2</item>
		<item>4.3</item>
	</menu>

</menus>

//Import TweenMax for animation
import gs.*;
import gs.easing.*;
import gs.plugins.*;
TweenPlugin.activate([GlowFilterPlugin]);

//Save menu item's height to a constant variable
const ITEM_HEIGHT:Number = 50;

//Save the path to the XML file
var xmlPath:String = "http://flashmymind.com/xml/flash_menu.xml";

//The XML data will be inserted into this variable
var xml:XML;

//Set the floor (= y coordinate) for the menu items
var floor:Number = stage.stageHeight - 20;

//We want to know which menu array is currently selected
var selectedMenu:Array;

//We want to keep track how many menus have been created
var menuCounter:uint = 0;

// Load the XML file
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 we're not working with a null loader
	if ((e.target as URLLoader) != null ) {

		//Insert the loaded data to our XML variable
		xml = new XML(loader.data);

		//Ignore white space
		xml.ignoreWhitespace = true;

		//Call the function that creates the whole menu
		createMenus();
	}
}

//This function creates the menus
function createMenus():void {

	//Loop through the menus found in the XML file
	for each (var menu:XML in xml.menu) {

		//We create a menu for each menu found in the xml.
		//We pass the "menu" xml data as a parameter to the function.
		var menuItems:Array = createMenu(menu);

		//Position the menu items that are in the menuItems
		for (var i= 0; i< menuItems.length; i++) {

			//Set the x and y coordinates
			menuItems[i].y = floor;
			menuItems[i].x = -30 + menuCounter * 80;

			//Add the item to stage
			addChild(menuItems[i]);
		}
	}
}

//This function creates a single menu (= one vertical menu).
//It returns all the menu items which belong to the created menu.
function createMenu(menu:XML):Array {

	//Create an array which contains all the items in this menu
	var menuItems:Array = new Array();

	//Loop through the items found in the menu
	for each (var item:XML in menu.item) {

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

		//Set the item text
		menuItem.menuText.text = item.toString();

		//Set the menuItem to have no mouseChildres
		menuItem.mouseChildren = false;

		//Add the item to the menuArray
		menuItems.push(menuItem);
	}

	//We also need to create the main MenuItem for the menu
	var mainItem:MenuItem = new MenuItem();

	//Set the mainItem to have no mouseChildren
	mainItem.mouseChildren = false;

	//Add the main item to menuArray
	menuItems.push(mainItem);

	//Save the array to which this mainItem belongs to.
	//We need this in the animation later on.
	mainItem.belongsToMenu = menuItems;

	//Set the "id" attribute to be the main item's text
	mainItem.menuText.text = menu. @ id;

	//Add CLICK listener for the mainItem
	mainItem.addEventListener(MouseEvent.CLICK, mainItemClicked);

	//Update the menuCounter since we just created a new menu
	menuCounter++;

	//Return the menuArray that contains all the items in this menu
	return menuItems;
}

//This function is called when a menu's mainItem is clicked
function mainItemClicked(e:Event):void {

	//Animate the previous menu down if there is one
	if (selectedMenu) {
		for (var i =0; i<  selectedMenu.length-1; i++) {
			TweenMax.to(selectedMenu[i], 0.5 , {y:floor, glowFilter:{color:0x324df, alpha:0, blurX:0, blurY:0}});
		}
	}

	//Get the menu where the mainItem is located
	var clickedMenu:Array = e.target.belongsToMenu;

	//Set the clickedMenu to be our selectedMenu
	selectedMenu = clickedMenu;

	//Loop through the items except for the last one which is the mainItem.
	//We don't animate the mainItem
	for (var j =0; j<  selectedMenu.length-1; j++) {

		//Save the item to a local variable
		var item = selectedMenu[j];

		//Calcute the target y coordinate for the item.
		var targetY:Number = floor - ITEM_HEIGHT*1.2*(1 + j);

		//Tween an item up.
		TweenMax.to(item, 0.5 , {y:targetY, glowFilter:{color:0xffffff, alpha:1, blurX:20, blurY:20}});
	}
}