Requirements:
1. two layers (one layer with the workarounds and the other with the menu code)
2. three empty movieclips with the linkage names: subButtonSymbol, mainButtonSymbol and popUpMenuSymbol
3. one xml-file named xmlMenuTree
that’s it. Click on read more to see the code.
btw: by now it’s just a beta version. If you recognize any mistakes or things that could be improved I would be thankful if you’d write me a mail.
download fla
download xml
show example
Workarounds:
// :: GET_NEXT_DEPTH :: //
MovieClip.prototype.getNextDepth = function(){
var t = -Infinity;
for(var i in this){
if(this[i].getDepth() != null && this[i]._parent == this){
t = Math.max(t, this[i].getDepth());
}
}
return (t > -1) ? ++t: 0;
}
// :: GET_TEXT_EXTENT :: //
_global.TextFormat2 = TextFormat;
TextFormat = function(){
super();
delete this.getTextExtent;
}
TextFormat.prototype = new TextFormat2();
TextFormat.prototype.getTextExtent2 = TextFormat.prototype.getTextExtent;
TextFormat.prototype.getTextExtent = function ( the_str ) {
// create temporary textfield
_root.createTextField(”getTextExtentTemp_txt“, 1000000, 1, 1, 10, 10);
// local reference to text field
var temp_txt = _root [ “getTextExtentTemp_txt” ];
// set the text format
temp_txt.setNewTextFormat( this );
// populate textfield with string
temp_txt.text = the_str;
// get dimensions
var w = temp_txt.textWidth;
var h = temp_txt.textHeight;
// wrap in object
var textExtent = { width: w, height: h };
// remove the textfield
temp_txt.removeTextField();
// return dimensions object
return textExtent;
}
ASSetPropFlags(_global,”TextFormat,TextFormat2“,131);
// :: CREATE_TEXT_FIELD :: //
MovieClip.prototype.createTextField2 = MovieClip.prototype.createTextField;
MovieClip.prototype.createTextField = function(name, depth, x, y, w, h){
this.createTextField2(name, depth, x, y, w, h);
return this[name];
}
Code:
MovieClip.prototype.useHandCursor = false;
// :: POP_UP_MENU_CLASS :: //
PopUpMenuClass = function(){
this._x = 0;
this._y = 0;
this.width = Stage.width;
this.height = 20;
this.xmlFile = “xmlMenuTree.xml“;
this.init();
}
PopUpMenuClass.prototype = new MovieClip();
PopUpMenuClass.prototype.init = function(){
this.loadXMLFile();
this.drawBackground();
}
PopUpMenuClass.prototype.loadXMLFile = function(){
var xml = new XML();
xml.master = this;
xml.ignoreWhite = true;
xml.onLoad = function(success){
if(success){
this.master.menuTree_arr = this.master.handleXMLData(this.firstChild.childNodes);
this.master.createMainMenu();
}
}
xml.load(this.xmlFile);
}
PopUpMenuClass.prototype.handleXMLData = function(child){
var menuTree_arr = new Array();
for(var i=0; i < child.length; i++){
var temp_obj = new Object();
temp_obj.title = child[i].attributes.title;
temp_obj.func = child[i].attributes.func;
temp_obj.link = child[i].attributes.link;
temp_obj.symbol = child[i].attributes.symbol;
if(child[i].childNodes.length > 0){
temp_obj.subMenu = this.handleXMLData(child[i].childNodes);
}
menuTree_arr.push(temp_obj);
}
return menuTree_arr;
}
PopUpMenuClass.prototype.drawBackground = function(){
this.createEmptyMovieClip(”background_mc“, this.getNextDepth());
with(this.background_mc){
beginFill(0xD4D0C8, 100);
lineStyle(1, 0×404040, 100);
moveTo(0, this.height);
lineTo(this.width, this.height);
lineStyle(0, 0×404040, 0);
lineTo(this.width, 0);
lineTo(0, 0);
lineTo(0, this.height);
endFill();
}
}
PopUpMenuClass.prototype.createMainMenu = function(){
for(var i=0; i<this.menuTree_arr.length; i++){
this.attachMovie(”mainButtonSymbol“, “mainButton“+i, this.getNextDepth());
this[”mainButton“+i].master = this;
with(this[”mainButton“+i]){
_x = this[”mainButton“+(i-1)]._x+this[”mainButton“+(i-1)]._width+2;
_y = 2;
}
this[”mainButton“+i].init(this.menuTree_arr[i]);
}
}
PopUpMenuClass.prototype.createSubMenu = function(x, y, subMenu_arr, target){
target.createEmptyMovieClip(”subMenu“, target.getNextDepth());
with(target.subMenu){
_x = x;
_y = y;
}
var tF = new TextFormat();
tF.bold = true;
tF.font = “Tahoma“;
tF.size = 12;
for(var i=0; i < subMenu_arr.length; i++){
var size;
var textWidth = tF.getTextExtent(subMenu_arr[i].title).width;
if(textWidth>size){
size = textWidth;
}
}
for(var i=0; i < subMenu_arr.length; i++){
target.subMenu.attachMovie(”subButtonSymbol“, “subButton“+i, target.subMenu.getNextDepth());
target.subMenu[”subButton“+i].master = [this, target.subMenu];
target.subMenu[”subButton“+i].width = size;
with(target.subMenu[”subButton“+i]){
_x = 1;
_y = target.subMenu[”subButton“+(i-1)]._y+target.subMenu[”subButton“+(i-1)]._height;
}
target.subMenu[”subButton“+i].init(subMenu_arr[i]);
}
var height = target.subMenu._height-1;
var width = target.subMenu._width+2;
with(target.subMenu){
clear();
beginFill(0xD4D0C8, 100);
lineStyle(1, 0xFFFFFF, 100);
moveTo(width, -1);
lineTo(0, -1);
lineTo(0, height);
lineStyle(1, 0×404040, 100);
lineTo(width, height);
lineTo(width, -1);
endFill();
}
}
PopUpMenuClass.prototype.removeSubMenu = function(target){
target.subMenu.removeMovieClip();
for(var i in target){
if(typeof target[i] == “movieclip“){
target[i].setToDefault();
}
}
}
PopUpMenuClass.prototype.onMouseDown = function(){
if(this.hitTest(_root._xmouse, _root._ymouse, true) == false){
this.removeSubMenu(this);
}
}
// :: BUTTON_CLASS :: //
ButtonClass = function(){};
ButtonClass.prototype = new MovieClip();
ButtonClass.prototype.init = function(dataObj){
this.title = dataObj.title;
this.func = dataObj.func;
this.link = dataObj.link;
this.symbol = dataObj.symbol;
this.subMenu = dataObj.subMenu;
this.defineTextFormat();
this.defineColors();
this.defineSize();
this.setSymbol();
this.draw();
this.createTitle();
}
ButtonClass.prototype.setSymbol = function(){
this.attachMovie(this.symbol, “symbol_mc“, this.getNextDepth());
this.symbol_mc._x = 2;
this.symbol_mc._y = this.height/2;
this.width += this.symbol_mc._width+this.symbol_mc._x;
}
// :: MAIN_BUTTON_CLASS :: //
MainButtonClass = function(){};
MainButtonClass.prototype = new ButtonClass();
MainButtonClass.prototype.init = function(dataObj){
this.type = “main“;
super.init(dataObj);
}
MainButtonClass.prototype.defineTextFormat = function(){
this.tF = new TextFormat();
this.tF.bold = true;
this.tF.font = “Tahoma“;
this.tF.size = 12;
}
MainButtonClass.prototype.defineColors = function(){
this.background_color = 0xD4D0C8;
this.line1_color = 0xFFFFFF;
this.line2_color = 0×404040;
}
MainButtonClass.prototype.defineSize = function(){
this.textSize = this.tF.getTextExtent(this.title);
this.width = this.textSize.width+4;
this.height = 16;
}
MainButtonClass.prototype.draw = function(status){
with(this){
clear();
beginFill(this.background_color, 100);
if(status == “pressed“) lineStyle(1, this.line2_color, 100);
else if(status == “active“) lineStyle(1, this.line1_color, 100);
moveTo(this.width, 0);
lineTo(0, 0);
lineTo(0, this.height);
if(status == “pressed“) lineStyle(1, this.line1_color, 100);
else if(status == “active“) lineStyle(1, this.line2_color, 100);
lineTo(this.width, this.height);
lineTo(this.width, 0);
endFill();
}
}
MainButtonClass.prototype.createTitle = function(){
this.createTextField(”title_txt“, this.getNextDepth(), 0, 0, 0, 0);
this.title_txt._x = this.symbol_mc._x+this.symbol_mc._width;
this.title_txt._y = (this.height-this.textSize.height)/2-2;
this.title_txt.autoSize = “left“;
this.title_txt.selectable = false;
this.title_txt.htmlText = this.title;
this.title_txt.setTextFormat(this.tF);
}
MainButtonClass.prototype.openSubMenu = function(){
this.master.createSubMenu(this._x, this._y+this.height+3, this.subMenu, this.master);
}
MainButtonClass.prototype.closeSubMenu = function(){
this.master.removeSubMenu(this.master);
}
MainButtonClass.prototype.setToDefault = function(){
this.draw();
this.pressed = false;
}
MainButtonClass.prototype.onRollOver = function(){
if(!this.pressed){
if(this.master.subMenu != undefined
&& this.subMenu != undefined){
this.closeSubMenu();
this.openSubMenu();
this.draw(”pressed“);
this.pressed = !this.pressed;
} else {
this.draw(”active“);
}
}
}
MainButtonClass.prototype.onRollOut = function(){
if(!this.pressed){
this.draw();
}
}
MainButtonClass.prototype.onPress = function(){
if(!this.pressed){
this.closeSubMenu();
if(this.subMenu != undefined){
this.openSubMenu();
}
this.draw(”pressed“);
this.pressed = !this.pressed;
} else {
this.closeSubMenu();
this.draw();
}
}
// :: SUB_BUTTON_CLASS :: //
SubButtonClass = function(){};
SubButtonClass.prototype = new ButtonClass();
SubButtonClass.prototype.init = function(dataObj){
this.type = “sub“;
super.init(dataObj);
}
SubButtonClass.prototype.defineTextFormat = function(){
this.tFStatic = new TextFormat();
this.tFStatic.bold = true;
this.tFStatic.font = “Tahoma“;
this.tFStatic.color = 0×000000;
this.tFStatic.size = 12;
this.tFActive = new TextFormat();
this.tFActive.color = 0xFFFFFF;
}
SubButtonClass.prototype.defineColors = function(){
this.backgroundStatic_color = 0xD4D0C8;
this.backgroundActive_color = 0×0A246A;
}
SubButtonClass.prototype.defineSize = function(){
this.textSize = this.tFStatic.getTextExtent(this.title);
this.width = this.width+20;
this.height = 16;
}
SubButtonClass.prototype.draw = function(status){
with(this){
clear();
status == “active” ? beginFill(this.backgroundActive_color, 100) : beginFill(this.backgroundStatic_color, 100);
moveTo(this.width+w, 0);
lineTo(0, 0);
lineTo(0, this.height);
lineTo(this.width+w, this.height);
lineTo(this.width+w, 0);
endFill();
}
if(this.subMenu != undefined){
with(this){
status == “active” ? beginFill(0xFFFFFF, 100) : beginFill(0×000000, 100);
moveTo(this.width-4, this.height/2);
lineTo(this.width-10, this.height/2-5);
lineTo(this.width-10, this.height/2+5);
lineTo(this.width-4, this.height/2);
}
}
}
SubButtonClass.prototype.createTitle = function(){
this.createTextField(”title_txt“, this.getNextDepth(), 0, 0, 0, 0);
this.title_txt._x = this.symbol_mc._width+this.symbol_mc._x+2;
this.title_txt._y = (this.height-this.textSize.height)/2-2;
this.title_txt.autoSize = “left“;
this.title_txt.selectable = false;
this.title_txt.htmlText = this.title;
this.title_txt.setTextFormat(this.tFStatic);
}
SubButtonClass.prototype.openSubMenu = function(){
this.master[0].createSubMenu(this._x+this.width, this._y, this.subMenu, this.master[1]);
}
SubButtonClass.prototype.closeSubMenu = function(){
this.master[0].removeSubMenu(this.master[1]);
}
SubButtonClass.prototype.setToDefault = function(){
this.draw();
this.pressed = false;
this.title_txt.setTextFormat(this.tFStatic);
}
SubButtonClass.prototype.onRollOver = function(){
this.closeSubMenu();
if(this.subMenu != undefined){
this.openSubMenu();
}
this.draw(”active“);
this.title_txt.setTextFormat(this.tFActive);
}
// example
Object.registerClass(”popUpMenuSymbol“, popUpMenuClass);
Object.registerClass(”mainButtonSymbol“, mainButtonClass);
Object.registerClass(”subButtonSymbol“, subButtonClass);
this.attachMovie(”popUpMenuSymbol“, “popUpMenuCon_mc“, this.getNextDepth());
5 Responses to “Windows Style Menu”
hy simon !
i have tried your xml-menue, itīs fantastic !!!
but please, can you tell me how i can set a link in the xml-file.
such as: http:www.domain.net
i have tried averything, but it donīt works.
thx for being helpful !!!
gtx, mario
Hi Mario!
Sorry for the delay but just recognized your comment. Add the following to the Button-Class:
ButtonClass.prototype.onRelease = function(){
if(this.func == “getURL”){
var linkArray = this.link.split(”,”);
this.getURL(linkArray[0], linkArray[1]);
}
}
And then copy the following into the xml-file:
Should work now.
Simon
Damn. He absorbed the few lines aftern And then copy… .
So here’s another try. The value of the func var must be getURL and the value of the link var must look like the following: http://www.flashforum.de, _blank.
I love your menu.. but i get this error in flash MX…
”
**Warning** Scene=Szene 1, layer=Script:, frame=1:Line 18: Case-insensitive identifier ‘xml’ will obscure built-in object ‘XML’.
var xml = new XML();
Total ActionScript Errors: 1 Reported Errors: 1
”
what’s wrong?
Jorge
Hi Jorge.
There’s nothing wrong. It’s just a warning. It occurs because I used a case-insensitive identifier. That means that the term ‘xml’ shouldn’t be used as identifier because it overlaps with the XML-Class (same name only one time big and the other small letters).
To get rid of that error just rename xml with something like myXML or so.