MENU BAR COMPONENT IN AS2                                          as2


    This tutorial shows how to use actionscript 2.0 MenuBar component to create cool looking drop down menu bar. This component is no longer available in actionscript 3.0. At the end we should get something like this :

    We start by creating new actionscript 2.0 flash file. All we are going to need on the stage is MenuBar component. Open components window ( ctrl + F7 ) and drag the MenuBar component on the stage. Set its width to around 400 (in this case), depends on how many submenus you want to have there. Set its <Instance Name> to my_mb. Open actions pannel and insert the following actionscript code: 


import mx.controls.Menu;
import mx.controls.MenuBar;

var my_mb:MenuBar;

var Index1:Menu = my_mb.addMenu("Menu 1");
Index1.addMenuItem({label:"Option 1.1", instanceName:"option11"});
Index1.addMenuItem({label:"Option 2.1", instanceName:"option21"});

var Index2:Menu = my_mb.addMenu("Menu 2");
Index2.addMenuItem({label:"Option 1.2", instanceName:"option12"});
Index2.addMenuItem({label:"Option 2.2", instanceName:"option22"});
Index2.addMenuItem({label:"Option 3.2", instanceName:"option32"});

var Index3:Menu = my_mb.addMenu("Menu 3");
Index3.addMenuItem({label:"Option 1.3", instanceName:"option13"});
Index3.addMenuItem({label:"Option 2.3", instanceName:"option23"});
Index3.addMenuItem({label:"Option 3.3", instanceName:"option33"});

var Index4:Menu = my_mb.addMenu("Menu 4");
Index4.addMenuItem({label:"Option 1.4", instanceName:"option14"});
Index4.addMenuItem({label:"Option 2.4", instanceName:"option24"});
Index4.addMenuItem({label:"Option 3.4", instanceName:"option34"});
Index4.addMenuItem({label:"Option 4.4", instanceName:"option44"});


//Create listener object.
var mbListener:Object = new Object();
mbListener.change = function(evt_obj:Object) {
 var menuItem_obj:Object = evt_obj.menuItem;
 switch (menuItem_obj.attributes.instanceName) {
 case "option11":
 gotoAndStop(1);
break;
 case "option21":
 gotoAndStop(2);
break;
 case "option12":
 gotoAndStop(3); 
break;
 case "option22":
 gotoAndStop(4); 
break;
 case "option32":
 gotoAndStop(5); 
break;
 case "option13":
 gotoAndStop(6);
break;
 case "option23":
 gotoAndStop(7); 
break;
 case "option33":
 gotoAndStop(8); 
break;
 case "option14":
 getURL("http://google.com","_self");
break;
 case "option24":
 getURL("http://google.com","_self");
break;
 case "option34":
 getURL("http://google.com","_self");
break;
 case "option44":
 gotoAndStop(9); 
break;
 }
}
Index1.addEventListener("change", mbListener);
Index2.addEventListener("change", mbListener);
Index3.addEventListener("change", mbListener);
Index4.addEventListener("change", mbListener);
Index5.addEventListener("change", mbListener);


    Lines 6-24 creates all the submenus with all of their buttons. Label part is text shown on the stage , while instanceName is the name used later to assign functions to each button. By adding or removing entire Index blocks you can either add or remove additional submenus. Lines 28-69 creates function which will run every time any of the buttons is clicked and based on what instanceName is send back to the function from button will execute corresponding operation defined between break; tags. For example if the functional recieves option14 it will open google page while if it recieves option32 it will move to frame 5. Those functions are entirely up to you.



DOWNLOAD SOURCE FILE