A Menu is Born
That pretty much completes things there. We load XML, interpret the first node into menu whose items are then given actions either opening another menu and/or calling commands from an Actions object. Not too bad once you think about it.

We can still tweak things a little bit, though. The attached menuitem movieClip is made out of movieclips. There are no buttons within it at all. However, if you use the menu, you'll notice that there is a rollover effect. This is controlled by actionscript. It's nothing special, but its good to have to help keep yourself oriented when using the menu - so you can visually tell which menu item you're hovering over more easily. This effect can be added fairly easily using the color object in some of the events we set up for each item thereby giving the button rollover effect. The one thing to be careful of is to not apply the color to the entire item movieclip. Instead, we can just apply it to the background clip so the title of that menu item is still very easily discernable.

var col = new Color(this.background);

col.setRGB(0xf4faff);

In the end, the final complete script looks like the following.

GenerateMenu = function(container, name, x, y, depth, node_xml) { var curr_node; var curr_item; var curr_menu = container.createEmptyMovieClip(name, depth); for (var i=0; i<node_xml.childNodes.length; i++) { curr_item = curr_menu.attachMovie("menuitem","item"+i+"_mc", i); curr_item._x = x; curr_item._y = y + i*curr_item._height; curr_item.trackAsMenu = true; curr_node = node_xml.childNodes[i]; curr_item.action = curr_node.attributes.action; curr_item.variables = curr_node.attributes.variables; curr_item.name.text = curr_node.attributes.name; if (node_xml.childNodes[i].nodeName == "menu"){ curr_item.node_xml = curr_node; curr_item.onRollOver = curr_item.onDragOver = function(){ var x = this._x + this._width - 5; var y = this._y + 5; GenerateMenu(curr_menu, "submenu_mc", x, y, 1000, this.node_xml); var col = new Color(this.background); col.setRGB(0xf4faff); }; }else{ curr_item.arrow._visible = false; curr_item.onRollOver = curr_item.onDragOver = function(){ curr_menu.submenu_mc.removeMovieClip(); var col = new Color(this.background); col.setRGB(0xf4faff); }; } curr_item.onRollOut = curr_item.onDragOut = function(){ var col = new Color(this.background); col.setTransform({ra:100,rb:0,ga:100,gb:0,ba:100,bb:0}); }; curr_item.onRelease = function(){ Actions[this.action](this.variables); CloseSubmenus(); }; } }; Createmainmenu = function(x, y, depth, menu_xml){ GenerateMenu(this, "mainmenu_mc", x, y, depth, menu_xml.firstChild); mainmenu_mc.onMouseUp = function(){ if (mainmenu_mc.submenu_mc && !mainmenu_mc.hitTest(_root._xmouse, _root._ymouse, true)){ CloseSubmenus(); } }; }; CloseSubmenus = function(){ mainmenu_mc.submenu_mc.removeMovieClip(); }; Actions = Object(); Actions.gotoURL = function(urlVar){ getURL(urlVar, "_blank"); }; Actions.message = function(msg){ message_txt.text = msg; }; Actions.newMenu = function(menuxml){ menu_xml.load(menuxml); }; menu_xml = new XML(); menu_xml.ignoreWhite = true; menu_xml.onLoad = function(ok){ if (ok){ Createmainmenu(10, 10, 0, this); message_txt.text = "message area"; }else{ message_txt.text = "error: XML not successfully loaded"; } }; menu_xml.load("menu1.xml");

And that, combined with 3 xml files, menu1.xml, menu2.xml and menu3.xml, gives you this as a final result.

[ menu in Flash defined with XML ]

Senocular

Prev Page