Advanced XML Menu with ActionScript 3
February 15, 2009 by: smonteIn this tutorial I will teach you how to create an advanced XML menu. We will first set up everything ready in Flash, then create the XML file and finally add some ActionScript 3 for the functionality. Hope you enjoy the tut!
Note: You need TweenMax to fully complete this tutorial.
Setting up the environment
1. Create a new document of size 400×350.
2. First, let’s create a menu item. Draw a rectangle of size 40×40. Convert it into a movie clip named “menuItem”. Set the registration point to the bottom left corner. I used a 4 pixels wide white stroke and for the fill #ff8800.
3. Inside the menu item movie clip, create a new layer and add a dynamic text field in the center of the menu item. Set the text-align to center. Type some number in the text field, e.g. “1″. I used a font size of 16 for my textfield.
4. Embed the numberals in the text field.
5. Give the text field an instance name of “menuText“.
6. Linkage the menu item movie clip to a class named “MenuItem“. If you don’t know how to linkage movie clips, please see step 4 from the External Classes tutorial.
7. Delete the menu item from the stage. We will create all the items dynamically with XML and ActionScript 3.
Creating the XML
8. Create a new text file and type the following.
<?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>
9. Save the file as “flash_menu.xml“.
Moving to ActionScript 3
10. Type the following in the first frame of your Flash movie. Feel free to change the XML filepath to match your settings!
//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}}); } }
11. You are done, test your movie! Remember, if you have any questions, feel free to visit the forum.
Related tutorials:
Hi .. This is great.
Wish list : adding functionality – a timer that when the menu Item is not clicked ( or is not being used any more for certain time) – It will retract back to the original position. This way, the sub menu item will not distract the stage layout… Tnx ..
Kids have all kinds of fun hunting around and seeing how many hidden eggs they can find.
Google says it had actually shot its Pittsburgh street views already, but agreed,
since this was a “good opportunity,” to come by again.
http://www.googleeastereggs.com/
I would really like to know what the line below means.
mainItem.belongsToMenu = menuItems;
“belongsToMenu” what is this is, i see that its being used again when a mainItem has been clicked, and you comment it as being saved. But how is it being saved – “belongsToMenu” has not been created as a variable.
Hope you will explain the logi behind this
thxx
Mike
Tutorial was great but it was so hard to follow.
I keep getting confused with menuItem and menuItems
Tutorial was great but it was so hard to follow.
menuItem
menuItems
never mind , got it working through type attribute in xml
Hi guys,
I managed to get the mouseEvent working for the menuitems, now there are two issues I have:
- How do I close the ( tweenUp) the selected mainmenuitem, now it only closes when you hit another mainmenu
- How can I get the menuitem to display an dynamic textfield like a full website combined with GetUrl function already in place
Please let know
nike
hi ,a great example,but i don’t know “mainItem.belongsToMenu = menuItems;” this line, is it a property of mainItem? where is it from?
tq very much
hi all
very good!
hi. i’m finish your tutorial, a great one in ded, but now i need to give to item an url. how do i do that? i put the html code in the xml file, but in flash just apear “item”. he ignores the entire code i.e helder pereiraand just insert to the button the item word.
it’s a cool flash menu,but… do you know how to add an url to the sub itens?
thank you
Hey,
check out this thread
http://tutorials.flashmymind.com/forum/actionscript-30/adding-mouseevent-actions-to-advanced-xml-menu-with-actionscript-3/
That should get you started!
Regards,
smonte
Hey,
You shouldn’t create a menuItem.as file. So delete the file and it should work ok. Flash will create that class for us in runtime.
Where is i must put the last script? in the first fla?
tq for your help..
^_^
I have been reading and doing your tutorial but i have a message error when i want to execute the fla.
Help me please..
menuItem.as, Line 1 5007: An ActionScript file must have at least one externally visible definition.
how would you add function for every subbutton which will be opening url from XML?
Thanks for the great tutorial smonte.
In case you ever read this comments:
Did you noticed the issues when printing this page? Nothing appears after step 6! (firefox 3.0.8)
Keep up the good work.
Cheers.
-B
Hai smonte,
First off great tutorial i learned allot of it only i have a question maybe u could help me with it,
I am tweaking your code i changed click in roll Over and Roll Out, so the submenus come up when u roll over and leave when u roll out, only i want to add the submenus to the menu items so that if u roll over a menu and go down/up ( i made it go down) it doesnt clap in because of u roll out mainitem
can you help me?
Could you write how to add function for every subbutton which will be opening url from XML?
I think that I will not move to video tutorials. Since I am mostly doing ActionScript, I don’t see the benefit of coding in video…
very good training, Can you do video
I think you are correct, I added a link where to see how to linkage a movie clip. And feedback is always welcome
After all, I’m doing these tuts for my readers, not for me!
This is great.
Wish list : adding functionality – a timer that when the menu Item is not clicked ( or is not being used any more for certain time) – It will retract back to the original position. This way, the sub menu item will not distract the stage layout.
Well done!
6. Linkage the menu item movie clip to a class named “MenuItem“.
Maybe this line should be explained a little bit more clearly ?
You know, like Properties of your movie clip >> Linkage >> Export for ActionScript; or a screen.
I’m not sure everyone knows where to find this, even if this is a basic of your tutorials.
– Kemipso
(sorry if I’m bothering you)