Advanced XML Menu with ActionScript 3

February 15, 2009 by: smonte

In 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.

Menu Item

4. Embed the numberals in the text field.

Embedding numerals in Flash

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.

 version="1.0" encoding="utf-8"?>
 
>
 
         id="1">
                >1.1>
                >1.2>
        >
 
         id="2">
                >2.1>
                >2.2>
                >2.3>
                >2.4>
        >
 
         id="3">
                >3.1>
                >3.2>
                >3.3>
                >3.4>
        >
 
         id="4">
                >4.1>
                >4.2>
                >4.3>
        >
 
>

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 = "https://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.

  • Digg
  • Sphinn
  • del.icio.us
  • Mixx

Related tutorials:

  1. Vertical 3D Carousel with ActionScript 3 and XML
  2. Creating a Menu via XML
  3. Colorful Menu with XML and ActionScript 3
  4. Vertical 3D Carousel with ActionScript 3
  5. Vertical Menu with Actionscript 3 and XML



Filed under: ActionScript 3 Advanced
Tags:

Comments

24 Responses to “Advanced XML Menu with ActionScript 3”
  1. Dogum Gunu says:
    October 19, 2009 at 8:02 am

    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 ..

    Log in to Reply
  2. says:
    July 26, 2009 at 8:44 pm

    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.

    Log in to Reply
  3. Mike says:
    June 20, 2009 at 2:42 pm

    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

    Log in to Reply
  4. John says:
    June 10, 2009 at 11:04 pm

    Tutorial was great but it was so hard to follow.

    I keep getting confused with menuItem and menuItems

    Log in to Reply
  5. John says:
    June 10, 2009 at 11:03 pm

    Tutorial was great but it was so hard to follow.

    menuItem
    menuItems

    Log in to Reply
  6. nike says:
    June 10, 2009 at 11:26 am

    never mind , got it working through type attribute in xml

    Log in to Reply
  7. nike says:
    June 10, 2009 at 9:09 am

    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

    Log in to Reply
  8. cy says:
    June 10, 2009 at 7:37 am

    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

    Log in to Reply
  9. quy says:
    June 9, 2009 at 10:51 pm

    hi all

    Log in to Reply
  10. quy says:
    June 9, 2009 at 10:50 pm

    very good!

    Log in to Reply
  11. helder says:
    May 22, 2009 at 5:44 pm

    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

    Log in to Reply
  12. smonte says:
    May 16, 2009 at 9:58 pm

    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.

    Log in to Reply
    • Mamatozay says:
      May 18, 2009 at 3:15 pm

      Where is i must put the last script? in the first fla?

      tq for your help..

      ^_^

      Log in to Reply
  13. Mamatozay says:
    May 16, 2009 at 2:55 pm

    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.

    Log in to Reply
  14. CC says:
    April 25, 2009 at 1:04 pm

    how would you add function for every subbutton which will be opening url from XML?

    Log in to Reply
  15. B says:
    April 8, 2009 at 9:16 am

    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

    Log in to Reply
  16. SiebZer0 says:
    March 19, 2009 at 5:57 am

    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?

    Log in to Reply
  17. adi says:
    March 19, 2009 at 3:03 am

    Could you write how to add function for every subbutton which will be opening url from XML?

    Log in to Reply
  18. smonte says:
    February 17, 2009 at 4:44 am

    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…

    Log in to Reply
  19. paslanmaz boru says:
    February 16, 2009 at 11:32 pm

    very good training, Can you do video

    Log in to Reply
  20. smonte says:
    February 16, 2009 at 4:50 am

    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!

    Log in to Reply
  21. Beebs says:
    February 16, 2009 at 1:21 am

    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!

    Log in to Reply
  22. Kemipso says:
    February 15, 2009 at 1:17 pm

    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)

    Log in to Reply

Leave a Reply

You must be logged in to post a comment.