I have this xml driven menu with submenus that works horizontally and i want to space the menu items and submenu by getting the textWidth of the first item and placing the 2nd item next to it and then the 3rd item next to the 2nd and 4th next to the 3rd etc etc so they all sit side by side horizontally without using a fixed space for all of them. here is my code:
this._lockroot = true;
//
_level0.fmt_container = _level0.text_formats_container || {};
ASSetPropFlags(_level0, "fmt_container", 7, 1);
_level0.fmt_container.swisBT_fmt = this.swisBT_txt.getNewTextFormat();
_quality = "BEST";
//
var roman_fmt = _level0.fmt_container.swisBT_fmt;
var menu_fmt = new TextFormat(menu_fmt.font = roman_fmt.font, 11, 0x996633, false, false, false, "", "_self", "center", 0, 0, 0, 18);
// generates a list of menu items (effectively one menu)
// given the inputted parameters. This makes the main menu
// as well as any of the submenus
GenerateMenu = function (container, name, x, y, depth, node_xml) {
// variable declarations
var curr_node;
var curr_item;
var xpositions:Numbe
var curr_menu = container.createEmptyMovieClip(name, depth);
curr_menu._y = 18;
// for all items or XML nodes (items and menus)
// within this node_xml passed for this menu
for (var i = 0; i<node_xml.childNodes.length; i++) {
// movieclip for each menu item
curr_item = curr_menu.attachMovie("menuitem_mc", "menuitem"+(i)+"_mc", i);
// item properties assigned from XML
curr_node = node_xml.childNodes*;
curr_item.action = curr_node.attributes.action;
curr_item.variables = curr_node.attributes.variables;
//
curr_item.createTextField("name_txt", 10, i*100, 0, curr_item.name_txt._width, 16),
curr_item.name_txt.setNewTextFormat(menu_fmt),
curr_item.name_txt.selectable=false,
curr_item.name_txt.embedFonts=true,
curr_item.name_txt.text=curr_node.attributes.name;
curr_item.name_txt.autoSize = true;
curr_item.trackAsMenu = true;
// item submenu behavior for rollover event
if (node_xml.childNodes*.nodeName == "menu") {
// open a submenu
curr_item.node_xml = curr_node;
curr_item.onRollOver = curr_item.onDragOver=function () { GenerateMenu(curr_menu, "submenu_mc", x, y, 1000, this.node_xml);mx.transitions.TransitionManager.start(curr_menu.submenu_mc, {type:mx.transitions.Fade, direction:0, duration:0.5, easing:mx.transitions.easing.Regular.easeOut, param1:empty, param2:empty});var col = new Color(this);col.setRGB(0xffffcc);};
} else {
//nodeName == "item"
// curr_item.arrow._visible = false;
// close existing submenu
curr_item.onRollOver = curr_item.onDragOver=function () { curr_menu.submenu_mc.removeMovieClip();var col = new Color(this);col.setRGB(0xcccc99);};
}
curr_item.onRollOut = curr_item.onDragOut=function () { var col = new Color(this);col.setTransform({ra:100, rb:0, ga:100, gb:0, ba:100, bb:0});};
// any item, menu opening or not can have actions
curr_item.onRelease = function() {
Actions[this.action](this.variables);
CloseSubmenus();
};
}
// end for loop
};
// create the main menu, this will be constantly visible
CreateMainMenu = function (x, y, depth, menu_xml) {
// generate a menu list
GenerateMenu(this, "mainmenu_mc", x, y, depth, menu_xml.firstChild);
// close only submenus if visible durring a mouseup
// this main menu (mainmenu_mc) will remain
mainmenu_mc.onMouseUp = function() {
if (mainmenu_mc.submenu_mc && !mainmenu_mc.hitTest(_root._xmouse, _root._ymouse, true)) {
CloseSubmenus();
}
};
};
// closes all submenus by removing the submenu_mc
// in the main menu (if it exists)
CloseSubmenus = function () {
mainmenu_mc.submenu_mc.removeMovieClip();
};
// load XML, when done, run CreateMainMenu to interpret it
menu_xml = new XML();
menu_xml.ignoreWhite = true;
menu_xml.onLoad = function(ok) {
// create main menu after successful loading of XML
if (ok) {
CreateMainMenu(0, 0, 0, this);
//message_txt.text = "Menu Loaded sucessfully";
//Load home page
} else {
message_txt.text = "error: Menu failed to open";
}
};
// load first XML menu
menu_xml.load("scripts/menu.xml");
everything seems to work fine here but i was wondering if there was a way of spacing the menu items by getting the textWidths of each menu item and sub menu item and placing them horizontally so they all sit side by side as opposed to the way i have it in the line of code that reads:
curr_item.createTextField(“name_txt”, 10, i*100, 0, curr_item.name_txt._width, 16),
rather than spacing each item 100 x my counter at 100 pixels apart i want to get the width of the first menu item and put the 2nd menu items _x position at the end of the 1st menu items width and the 3rd items _x position on the end of the 2nd menu items width etc etc…
can anyone please help as i have been playing around with this for ages and am unable to figure a way of doing this…
my menu xml file looks like this:
<?xml version="1.0"?>
<menu name="links">
<item name="Home" action="loadswf" variables="home.swf"/>
<menu name="Products">
<item name="Catalogue" action="loadswf" variables="products.swf"/>
<item name="General info" action="loadswf" variables="Info.swf"/>
<item name="Installation gallery" action="loadswf" variables="installation.swf"/>
</menu>
<menu name="Services">
<item name="Restoration" action="loadswf" variables="restore.swf"/>
<item name="Maintainence" action="loadswf" variables="maintain.swf"/>
</menu>
<menu name="About Us">
<item name="Company info" action="loadswf" variables="compInfo.swf"/>
<item name="Showroom" action="loadswf" variables="showroom.swf"/>
</menu>
<menu name="Contact Us">
<item name="Email us" action="loadswf" variables="form.swf"/>
<item name="Location" action="loadswf" variables="location.swf"/>
</menu>
</menu>
