January
---
2003




Dynamic Flash Banner from XML data.

This XML driven navbar parses one of three XML files and then starts building the main items and the corresponding sub items. It is intelligent enough to re-arrange the positions and spacing of all items dynamically cretaed, according to the amount of items or subitems. I have included 3 sample XML files below. Compare them and see that any XML fed to this app will work, as long as it is correctly structured. Also the attributes in the main items specify whether the item is clickable and what to do, i.e.: getURL or gotoAnStop at a particular frame. This navabr is great for variable menu items, like when different users receive different options according to their rights or something.

XML dynamic navigation bar

Try it out: click the image above to open the new window. CTry out the navbar. Then click on any of the red buttons, to load a new navbar...

Idealy, the XML is fed by a database stream, tied together with their login authentication process. According to their permission level, when they log in, the XML will contain restricted buttons and embedded commands. These commands, can refer to internal frames or app stages, external URL's, or even Javascript function calls..

Also note that this Flash app uses only one single frame. All animation is controlled through Actionscript. No tweening or motion was used in this app. All buttons and drop down menus are created on the fly. Sounds like a great idea for a component, huh?

Source files: source.as Datasource: xml1, xml2, xml3

actionscript code

// ActionScript Document by Miguel Moreno - - Menu Demo #8

//Constants & Init Vars----------------------------
menu_maxwidth = 619;
menu_startmarging = 5;
menu_totalwidth = 0;
menu_speed = 15;
menu_timeoutdropup = 15;
menu_slider.menuitem._visible = 0;
Arr_sep = new Array();
//---------------------------------------------------------------
//Single_point XML Access function! --the following two functions will handle 
//ALL XML DB calls.--------------------------
function getXML(url, successcallback, objXML, err_id, critic){
 loading("on");
 objXML.ignoreWhite=true;	
 objXML.onLoad = function(){getXML_onLoad(url, 
  successcallback, 
  objXML, 
  err_id, critic)};
 objXML.load(url);
}
//-----------------------------------------------------------------------
//This function checks for all errors in all database calls--------------
//--------DO NOT MODIFY!---MM---------------------
function getXML_onLoad(url, successcallback, objXML, err_id, critic){
 if(objXML.loaded){
  if(objXML.status == 0){
   switch(objXML.firstChild.nodeName){
    //-------------------------------
     case "Error":
     errordescription = "\\n\\n" + 
      objXML.firstChild.firstChild.nextSibling.firstChild.nodeValue + ". "
	 errordescription += "Errorcode: "+
	  objXML.firstChild.firstChild.firstChild.nodeValue
	 errordescription += "\\n\\nFunction in: "+url.parseUrl();

	if(critic ==0){//depends on whether error is critical or not \				
	 errordescr=
	  objXML.firstChild.firstChild.nextSibling.firstChild.nodeValue+". ";
	 errordescr += objXML.firstChild.firstChild.firstChild.nodeValue;
	 errordescr += " "+url.parseUrl();
	 usermsg = Arr_messages[err_id];
	 GetErrorPage(usermsg,errordescr);
	 //displayusermsgonerror(err_id, errordescription);
    }else if(critic==1){
     showerrormsg(1,err_id, errordescription);
    }
   delete errordescription;	
   break;
   //-------------------------------
   case "Timeout":
    gotoAndPlay("redirect");
    break;			
    //-------------------------------				
   default: 
    successcallback(objXML);
    break;
   }
  }else{
   showerrormsg(1,13,"\\n\\nErrorcode: 
    XMLDoc.status = "+objXML.status + ". Function in: "+url.parseUrl());
  }
 }else{
 showerrormsg(1,13,"\\n\\nErrorcode: 
  XMLDoc.loaded = "+objXML.loaded + ". Function in: "+url.parseUrl());
 }
 delete objXML;
}
//........................................................................
//This loads XML document and checks for validity
function startmenu(XMLID){
 XML_menu_parsemenuxml = new XML();
 getXML("GetMenuItems"+XMLID+".xml", 
  menu_parsemenuxml, XML_menu_parsemenuxml,
  14, 0)
}

//_root function imports the XML and runs as soon as XML has been loaded
function menu_parsemenuxml(menuXML) {
 if (menuXML.firstChild.hasChildNodes()){
  Arr_menuXMLData1 = new Array();
  Arr_menuXMLData1 = menuXML.firstChild.childNodes;

  Arr_menu_Node = new Array();

  //Dip into <main> node and insert the incoming values into 
  //their respective arrays;
  for (i=0;i<Arr_menuXMLData1.length;++i){

   delete Arr_menu_Node1;
   Arr_menu_Node1 = new Array();

   if (Arr_menuXMLData1[i].nodeName == "Main"){		
    Arr_menu_Node1[0] = Arr_menuXMLData1[i].attributes.Title
    Arr_menu_Node1[1] = Arr_menuXMLData1[i].attributes.ItemVal
    Arr_menu_Node1[2] = Arr_menuXMLData1[i].attributes.ItemType;

    delete Arr_menuXMLData2
    Arr_menuXMLData2 = new Array();
    Arr_menuXMLData2 = Arr_menuXMLData1[i].childNodes

    //dip into <item> Nodes
    for (k=0;k<Arr_menuXMLData2.length;++k){
     delete Arr_menu_Node2;
     Arr_menu_Node2 = new Array();

     if (Arr_menuXMLData2[k].nodeName == "Item"){
      Arr_menu_Node2[0]= Arr_menuXMLData2[k].attributes.Title;
      Arr_menu_Node2[1]= Arr_menuXMLData2[k].attributes.ItemVal;
      Arr_menu_Node2[2]= Arr_menuXMLData2[k].attributes.ItemType;
//--------------------------------------------------------------------
     //Turn on if sub sub items

     //delete Arr_menu_Node3;
     //Arr_menu_Node3 = new Array();

     //delete Arr_menuXMLData3
     //Arr_menuXMLData3 = new Array();
     //Arr_menuXMLData3 = Arr_menuXMLData2[k].childNodes

     //dip into  element
     //for (t=0;t<Arr_menuXMLData3.length;++t){

     // delete Arr_menu_Node4;
     // Arr_menu_Node4 = new Array();

     //	if (Arr_menuXMLData3[t].nodeName == "subitem"){
     //	 Arr_menu_Node4[0]= Arr_menuXMLData3[t].attributes.title;
     //	 Arr_menu_Node4[1]= Arr_menuXMLData3[t].attributes.itemvalue;
     //	 Arr_menu_Node4[2]= Arr_menuXMLData3[t].attributes.itemtype;
     //	}
     //Arr_menu_Node3[t] = Arr_menu_Node4;							
     //}
     //Arr_menu_Node2[3] = Arr_menu_Node3;
     //--------------------------------------------------------
     }
    Arr_menu_Node1[k+3] = Arr_menu_Node2;
   }
  Arr_menu_Node[i] = Arr_menu_Node1;
 }
}

//Laundry list here 
delete Arr_menu_Node1
delete Arr_menu_Node2	
delete Arr_menu_Node3
delete Arr_menu_Node4
delete Arr_menuXMLData1
delete Arr_menuXMLData2
delete Arr_menuXMLData3
delete i;
delete j;
delete t;
delete k;
delete menuXML;
}
menu_mainmenu_populate();
}

//-------------------------------------------------
function menu_mainmenu_populate(){	
 //duplicates the clips and calculates the width of the labels
 for(i=0;i<Arr_menu_Node.length;++i){
  duplicateMovieClip(_root.menu_slider.menuitem, "menuitem"+i, 100+i);

  //embeds an ID so we can pass it when clicked on
  _root.menu_slider["menuitem"+i].ID = i;

  _root.menu_slider["menuitem"+i].labelbutton.useHandCursor = true; 

  _root.menu_slider["menuitem"+i].menutext.text = Arr_menu_Node[i][0];

  if(Arr_menu_Node[i][0] == "Help"){
   MenuTabIndex_help = Arr_menu_Node[i][3][1];
  }else if (Arr_menu_Node[i][0] == "Logout"){
   MenuTabIndex_logout = Arr_menu_Node[i][1];
  }

  _root.menu_slider["menuitem"+i].menutext.autoSize = true;
  menu_totalwidth += _root.menu_slider["menuitem"+i].menutext._width
 }

 //repositions the labels
 for(i=0;i<Arr_menu_Node.length;++i){	
  if(i==0){
   _root.menu_slider["menuitem"+i]._x = menu_startmarging;
  }else{
   _root.menu_slider["menuitem"+i]._x = 
    _root.menu_slider["menuitem"+(i-1)]._x + _
    root.menu_slider["menuitem"+(i-1)].menutext._width+
    (((menu_maxwidth-menu_totalwidth)/Arr_menu_Node.length));
  }
  
  //avoids the last label to get a separator
  if(i!=Arr_menu_Node.length-1){
   duplicateMovieClip(_root.menu_slider.separator, "separator"+i, 200+i);
   _root.menu_slider["separator"+i]._x = 
    _root.menu_slider["menuitem"+i]._x + 
    _root.menu_slider["menuitem"+i].menutext._width +
    (((menu_maxwidth-menu_totalwidth)/Arr_menu_Node.length)/2);
   Arr_sep[i] = _root.menu_slider["separator"+i]._x;
  }
  
  //sets the position of the separators
  _root.menu_slider["menuitem"+i].labelbutton._xscale = 
   ((_root.menu_slider["menuitem"+i].menutext._width+20)/
   _root.menu_slider["menuitem"+i].labelbutton._width )*100;
  _root.menu_slider["menuitem"+i].labelbutton._x = 
   _root.menu_slider["menuitem"+i].menutext._x-10;
  }
 delete _root.menu_slider.menuitem;
 delete _root.menu_slider.separator;

 menu_generatemenu();
}

//---------------------------------------------------------------------------
function menu_generatemenu(){
 for(i=0;i<Arr_menu_Node.length;++i){
  if(Arr_menu_Node[i].length-3 >0){
   _root.dropdown.menu_dropdown.duplicateMovieClip("dropdown_"+i,i+2000);

   //the number three (t+3) relates to the amount of parameters in the Array
   for(t=0;t<Arr_menu_Node[i].length-3;++t){
    if(Arr_menu_Node[i][t+3][0] != "separator" && Arr_menu_Node[i][3]){
     _root.dropdown["dropdown_"+i].
      menu_buttonclip.duplicateMovieClip("menu_button_"+t,t+300);
     _root.dropdown["dropdown_"+i]["menu_button_"+t]._y = 
      (_root.dropdown["dropdown_"+i].menu_buttonclip._y-44) +(20*(t+2));

     _root.dropdown["dropdown_"+i]["menu_button_"+t].button_text = 
      Arr_menu_Node[i][t+3][0];
     _root.dropdown["dropdown_"+i]["menu_button_"+t].button_ID =
      Arr_menu_Node[i][t+3][1];
     _root.dropdown["dropdown_"+i]["menu_button_"+t].button_target =
      Arr_menu_Node[i][t+3][2];

     _root.dropdown["dropdown_"+i]["menu_button_"+t].
      menu_button.useHandCursor = false;

    }else{
     _root.dropdown["dropdown_"+i].
      menu_separator.duplicateMovieClip("menu_separator_"+t,t+200);
     _root.dropdown["dropdown_"+i]["menu_separator_"+t]._y = 
      (_root.dropdown["dropdown_"+i].menu_buttonclip._y-44) +(20*(t+2));
    }
   }
  }
   
  //height of the background
  _root.dropdown["dropdown_"+i].menu_background._height = (t*20)+8;
  _root.dropdown["dropdown_"+i].menu_background._y = 0;

  _root.dropdown["dropdown_"+i].menu_buttonclip._visible=0;
  _root.dropdown["dropdown_"+i].menu_separator._visible=0;
  _root.dropdown["dropdown_"+i].menu_button._visible=0;

  //makes them all invisible	
  _root.dropdown["dropdown_"+i]._visible =0;

  _root.dropdown["dropdown_"+i]._x = menu_slider._x +
   _root.menu_slider["separator"+(i-1)]._x			
  }		
 _root.dropdown.menu_dropdown._visible = 0;
 _root.menu_nowSelect=0;
}		
//-----------------------------------------------------------------
function menu_clickmainlabel(ID){
 clearInterval(menu_animate);
 clearInterval(startmenutimer);

 _root.menu_prevSelect = menu_nowSelect;	
 _root.menu_nowSelect = ID

 //display the title of the item clicked or page displayed
 menu_select = Arr_menu_Node[ID][0];

 //makes them all invisible
 for(i=0;i<Arr_menu_Node.length;++i){
  _root.dropdown["dropdown_"+i]._visible =0;
 }

 //if an item on the mainmenu has no subitems, then goto its 
 //value, else run animate function
 if(Arr_menu_Node[_root.menu_nowSelect].length < 4 ){
  if(Arr_menu_Node[ID][2] == "Frame"){ 
   alert("gotoAndStop(" + Arr_menu_Node[ID][1]+ ");");
  }else{
   getURL(Arr_menu_Node[ID][1], Arr_menu_Node[ID][2]);
  }
 }else{
  //makes only the one selected visible and positions it above 
  //the menu holder
  _root.dropdown["dropdown_"+_root.menu_nowSelect]._visible =1;
  _root.dropdown["dropdown_"+_root.menu_prevSelect]._visible =1;
  if(_root.menu_nowSelect != _root.menu_prevSelect){
   _root.dropdown["dropdown_"+_root.menu_nowSelect]._y = 
    _root.dropdown.menu_dropdown._y - _root.dropdown["dropdown_"+
    _root.menu_nowSelect].menu_background._height; 
  }else{
   menu_down = 0;
  }
  menu_animate = setInterval(menu_menu_animatesubmenu, 20, 
   _root.menu_nowSelect);
 }
}

//triggered when subitem is clicked
function clicksublabel(myID, myTarget){
 if(_root.lockmenusublabels != 0){

  menu_animatesubup = setInterval(menu_menu_animatesubmenu_up, 20);

  //!!-----------------------------------
  _root.lockmenusublabels = 0;
  //!!-----------------------------------

  if(myTarget == "Frame"){ 
   alert("gotoAndStop(" + myID + ");");
   //gotoAndStop(myID);
  }else{
   getURL(myID, myTarget);
  }
 }
}

//-----------------------------------------------------------------------
//Adnimates when items from the main menu are clicked
function menu_menu_animatesubmenu(ID){
 clearInterval(startmenutimer);

 //if the mainitem is different from what is currently displayed
 if(_root.menu_nowSelect != _root.menu_prevSelect){
  if(_root.dropdown["dropdown_"+menu_prevSelect]._y > 
   _root.dropdown.menu_dropdown._y - _root.dropdown["dropdown_"+
    menu_prevSelect].menu_background._height && _root.dropdown["dropdown_"+
     menu_prevSelect]._visible == 1){
   _root.dropdown["dropdown_"+menu_prevSelect]._y -= menu_speed;
  }else{
   _root.dropdown["dropdown_"+menu_prevSelect]._y = 
    _root.dropdown.menu_dropdown._y - _root.dropdown["dropdown_"+
     menu_prevSelect].menu_background._height;
   _root.dropdown["dropdown_"+menu_prevSelect]._visible =0;

   if(_root.dropdown["dropdown_"+ID]._y < _root.dropdown.menu_dropdown._y){
    _root.dropdown["dropdown_"+ID]._y += menu_speed;
   }else{
    _root.dropdown["dropdown_"+ID]._y = _root.dropdown.menu_dropdown._y;
    clearInterval(menu_animate);

    _root.starttheclock(); 
   }
  }
  
  //if the mainitem is equal from what is currently displayed
  }else{
   if(_root.dropdown["dropdown_"+menu_nowSelect]._y > 
    _root.dropdown.menu_dropdown._y - _root.dropdown["dropdown_"+
     menu_nowSelect].menu_background._height && menu_down == 0){
   _root.dropdown["dropdown_"+menu_nowSelect]._y -= menu_speed;
  }else{
   menu_down = 1;		
   if(_root.dropdown["dropdown_"+menu_nowSelect]._y < 
    _root.dropdown.menu_dropdown._y){
    _root.dropdown["dropdown_"+menu_nowSelect]._y += menu_speed;
   }else{
    _root.dropdown["dropdown_"+menu_nowSelect]._y = 
     _root.dropdown.menu_dropdown._y;
    clearInterval(menu_animate);

    _root.starttheclock();	
   }
  }
 }
}

//starts the clock
function starttheclock(){
 clearInterval(startmenutimer);
 menuTimer=0;
 startmenutimer = setInterval(menu_timer, 50); 
}

//if dropdown is left unattended for more than 5 seconds, dropup
function menu_timer(){
 if(_root.submenurollover == 0 || _root.submenurollover == undefined){
  if (menuTimer<menu_timeoutdropup){
   ++menuTimer;
  } else {
   clearInterval(startmenutimer);

   clearInterval(menu_animatesubup);
   menu_animatesubup = setInterval(menu_menu_animatesubmenu_up, 20);
  }
 }
}

//!!---------------------------------------------------------------------
function locksubitems(flip){
 for(i=0;i<Arr_menu_Node[menu_nowSelect][i];++i){
  _root.dropdown["dropdown_"+menu_nowSelect]["menu_button_"+i].
   menu_button.enabled = flip;
 }
}		
//!!---------------------------------------------------------------------

//if subitem is clicked it needs to animate back up
function menu_menu_animatesubmenu_up(){
 if(_root.dropdown["dropdown_"+menu_nowSelect]._y > 
  _root.dropdown.menu_dropdown._y - _root.dropdown["dropdown_"+
   menu_nowSelect].menu_background._height && _root.dropdown["dropdown_"+
    menu_nowSelect]._visible == 1){

  _root.dropdown["dropdown_"+menu_nowSelect]._y -= menu_speed;
 }else{ 
  _root.dropdown["dropdown_"+menu_nowSelect]._y = 
   _root.dropdown.menu_dropdown._y - _root.dropdown["dropdown_"+
    menu_nowSelect].menu_background._height;
  _root.dropdown["dropdown_"+menu_nowSelect]._visible =0;
  clearInterval(menu_animatesubup);
  _root.lockmenusublabels = 1;
 }
}

//this locks all menu buttons and happens when loading("on");
function lockmenubuttons(what){
 for(i=0;i<Arr_menu_Node.length;++i){
  _root.menu_slider["menuitem"+i].labelbutton.enabled = what;
 } 

 //this rolls up the dropdown if the buttons get locked
 if (what==false){
  clearInterval(startmenutimer);
  clearInterval(menu_animatesubup);
  menu_animatesubup = setInterval(menu_menu_animatesubmenu_up, 20);
 }
}

MovieClip.prototype.alert = function(retval){
 if (_root._url.substr(0,4)=="file"){
  trace (retval);
 } else {
  getURL ("javascript:alert('" + retval + "')");
 }
}

Skills: C#, Flash MX.