Using the menu component – part 1.

Earlier I had a request from a user for a Menu component example, because they were trying to create a menu and running into some problems. Given that it seemed like an area that did need a bit more “coverage”, the following examples might help.

Now, there are two ways you can work with the menu components – using inline or external XML. The following example shows how you can load Menu items based on an external XML file. Next blog, inline.

For the set up, do the following.

1. Add an instance of the MenuBar component to the Stage.
2. Give it the instance name myMenuBar (in hurry, forgot to use a suffix).
3. Add the following code to Frame 1 of the Timeline.

myMenuBar.setStyle(“fontSize”, 10);
var ds:XML = new XML();
ds.ignoreWhite = true;
ds.onLoad = function(success:Boolean) {
if (success) {
myMenuBar.dataProvider = ds.firstChild;
var menuListener:Object = new Object();
menuListener.change = function(evt:Object) {
switch (evt.menuItem.attributes.instanceName) {
case “file_new” :
trace(“File > New”);
case “file_open” :
trace(“File > Open”);
case “file_openFromSite” :
trace(“File > Open from Site”);
case “file_openRecent” :
trace(“File > Open Recent”);
case “file_openRecent_01” :
case “file_openRecent_02” :
case “file_openRecent_03” :
case “file_openRecent_04” :
case “file_openRecent_05” :
case “file_openRecent_06” :
case “file_openRecent_07” :
case “file_openRecent_08” :
trace(“File > Open Recent > “+evt.menuItem.attributes.fileName);
case “file_close” :
trace(“File > Close”);
case “file_closeAll” :
trace(“File > Close All”);
default :
trace(“unknown instance name for: “+evt.menuItem.attributes.label);
myMenuBar.addEventListener(“change”, menuListener);

Before you test your code, save the following XML file into the same directory as the FLA: Or, you can target this XML file instead.

That’s it!

27 Responses to Using the menu component – part 1.

  1. stupod says:

    hmmm, i tried it exactly as you’ve explained and it didn’t work at all. just a blank page really. any ideas about why that might happen?

  2. jdehaan says:

    Did you drag the component to the Stage, and link to or copy the XML file to your hard drive?

  3. stupod says:

    I did both those things. I tried using the local xml & your online xml, neither worked. Both were a blank page. I tried debugging it & the instances are certainly there in the debugger panel, but nothing on the stage.

  4. jdehaan says:

    Gave it another try off the website, and I still don’t have any problems. (Component to stage, instance name, enter code).Are you waiting a second or two for the XML to load/parse?

  5. Kev says:

    I am getting a blank screen as well, but I am still checking for my own errors.

  6. A.Brady says:

    Jen-I’ve had no success with this either.When you say link to the external file – do you mean bind via a component, XML Connector?Also, I tried to this via the Data Wizard per your tutorial, Data for Designers. The Data Wizard fails to “Next” any of the xml files I’ve tried. (I get the red arrow, but no “Next” button.)I’m working well with the XML files with the ComboBox and XML Connector, but would like to learn more about the Menu Component.-A

  7. A.Brady says:

    Okay, I mussed up on the first line item.I had confused the Get Schema with the actual document – doh'(it’s almost too simple to figure out.)I’m going to get back to populating a Menu Component with this info, and maybe I’ll actually learn some script after that, one day.-A.

  8. jdehaan says:

    Hey there,No XMLConnector necessary. These are the steps:1. Add an instance of the MenuBar to the Stage.2. Give it the instance name myMenuBar.3. Add the following code to Frame 1 of the Timeline.For the XML, you have two choices. You can download the XML file to your hard drive, or you can link/connect to it online. The line that does so is:ds.load(“ds.xml”);So, if you want to connect to it online instead of having it on your hard drive (as above), you need to target it using the link provided in the post. You would change the above line to:ds.load(““);Hope that helps,Jen.

  9. Alen Ramos says:

    ah thanks so much. I always wanted to use this component but never knew how too really. Not that I gave it too much time to research, but this example is awsome. Thanks so much.

  10. Mike says:

    doesn’t work online using the http addressError opening URL “file:///Macintosh%20HD/Library/WebServer/Documents/retardTests/ds.xmleven though the xml was told to load from the http address, flash for some reason still looks locally.this happens when testing from within a vrowser or testMovie.

  11. jdehaan says:

    Mike, are you positive you changed it from ds.xml to can’t reproduce those results on the Mac either in test movie or test in browser (OSX 10.3.8, Safari). I haven’t happened to run into that with other projects either.You should see that error if you still have ds.xml in the code, but don’t have the ds.xml file saved on your hard drive in the same folder as the FLA…

  12. Garyl says:

    I got it to work fine. However you might wanna go into more detail on your next tutorial if ur going to use the online xml file of where to put it. I think that’s what threw most people off..Instead of ds.load(“ds.xml”);Use ds.load(““);-Garyl

  13. Lucian says:

    The events are working?

  14. madhav says:

    Hello,This helped me a lot. What if i want to type radio? can u suggest me?thanks in advance,madhava ram

  15. danny says:

    Can you tell me where to get the xml file ds.xml I do not see the file on the page.Thanks

  16. peter says:

    Danny,You can grab the XML file from:

  17. Luis Casillas says:

    This is an awesome tutorial. I was wondering how to add the events and behaviors to make the menu items open pages or specific frames in the swf. Could I add a field to the XML document and then add the behavior to the fla actionscript? Thanks.Luis

  18. compu says:

    Hi, great tutorial. I can see menubar with all the submenus but when I click on the menuitems nothing happens. No trace. I tried an getURL(““, “_new”); instead of the traces and no response. Is the cource code correct?I really need some help urgently with this. My boss is getting pissed off at me.Would somebody kindly help me?

  19. Florin Georgescu says:

    There are 2 things that bother me in using Menubar component:1. Why doesn’t appear the hand-cursor icon when hovering the menu?2. Is it possible to use onRollover event when hovering submenus?

  20. SirAlucard says:

    Hi, for all those who had the problem of seeing everything ok but nothing happens when you click an item, well, this worked for me… it seems that Flash doesnt recognize the MenuBar.change, im using Flash 7, because it seems to be originally made for Menu.change, so:delete the last code line…myMenuBar.addEventListener(“change”, menuListener);and edit the code of the ds load so it looks like this:ds.onLoad = function(success:Boolean) {if (success) {myMenuBar.dataProvider = ds.firstChild;for(var i:Number = 0; (menu_item = myMenuBar.getMenuAt(i)) != undefined; i++)menu_item.addEventListener(“change”, menuListener);delete menu_item;}};This for will add the event listener to each menu contained on the menuBar.Hope this helps anybody… (sorry 4 my english)

  21. Paulo says:

    Great job and thank you for sharing this code.It worked perfectly.

  22. I have edited the xml to make it work for the site Im working on. My question is, I want to have the items on the menu bar open up new pages, example, you click on contact us, and it opens the contact us page….simple enough i think.If this is possible, please let me know.thanksJasen BurkettYhwh Design

  23. donna says:

    I cant get it to work either; I have done a lot of stuff with Flash and XML but this isnt working; I am using Flash 8. I get the trace in the output box, but no HTML or SWF file opens, that I am calling for in the xml file. I dont get it.

  24. ds.xml file looks like this:Using Flash MX Professional 2004Flash MenuBar instance name:”myMenuBar”ActionScript in layer 1:frame 1 – Looks like this:myMenuBar.setStyle(“fontSize”, 10);//var ds:XML = new XML();ds.ignoreWhite = true;ds.onLoad = function(success:Boolean) {if (success) {myMenuBar.dataProvider = ds.firstChild;}};ds.load(“ds.xml”);//var menuListener:Object = new Object();menuListener.change = function(evt:Object) {switch (evt.menuItem.attributes.instanceName) {case “file_new” :trace(“File > New”);break;case “file_open” :trace(“File > Open”);break;case “file_openFromSite” :trace(“File > Open from Site”);break;case “file_openRecent” :trace(“File > Open Recent”);break;case “file_openRecent_01” :case “file_openRecent_02” :case “file_openRecent_03” :case “file_openRecent_04” :case “file_openRecent_05” :case “file_openRecent_06” :case “file_openRecent_07” :case “file_openRecent_08” :trace(“File > Open Recent > “+evt.menuItem.attributes.fileName);break;case “file_close” :trace(“File > Close”);break;case “file_closeAll” :trace(“File > Close All”);break;default :trace(“unknown instance name for: “+evt.menuItem.attributes.label);}};myMenuBar.addEventListener(“change”, menuListener);.swf file loads the mene but doesnt go anywhere when items are clicked on. As you can see in the ds.xml file, I have tried several variations of the url=”” or what=”” and window=”” or target=”” either way, nothing works.

  25. sorry ’bout ds.xml file is linked below:

  26. Can someone see what I’m doing wrong?

  27. kundan kumar says:

    how to add icon in menu