Skip to main content
September 24, 2010
Question

Linking accordian menu

  • September 24, 2010
  • 1 reply
  • 486 views

I want to lik the images and swf to local files but I'm not able to do so. Could you please tell me how?

I took the code from an accordian menu tutorial

This is the xml code

<?xml version="1.0" encoding="utf-8"?>
  <menu menuOpen="1" moveOnMouseOver="false">
             <item Ititle="home" IcontentType="image/swf" IcontentData="image2.jpg"/>
            <item Ititle="about" IcontentType="text" IcontentData="Our company is based on UK! Know how we have born!; Click here"/>
             <item Ititle="Products" IcontentType="image/swf" IcontentData="image5.jpg"/>
            <item Ititle="Services" IcontentType="image/swf" IcontentData="item2.swf"/>
            <item Ititle="Contact" IcontentType="image/swf" IcontentData="image1.jpg"/>
  </menu>

This is the AS code
//import tweenlite classes
  import gs.TweenLite;
  import gs.easing.*;

  var MENU_ARRAY:Array; //used to save the items data
  var OPENED_MENU:int; //to inform the menu that should be open at startup
  var MOVE_ON_MOUSE_OVER:Boolean=false; //tha name says everything
  var xmlLoader:URLLoader; //the xml loader

loadXML("menu.xml"); //load the xml

function loadXML(Uri:String):void {
  xmlLoader = new URLLoader();
  xmlLoader.addEventListener(Event.COMPLETE, onComplete);
  xmlLoader.addEventListener(IOErrorEvent.IO_ERROR, onError);
  xmlLoader.load(new URLRequest(Uri));
  }

function onError(evt:ErrorEvent):void {
  trace("cannot load xml file");
}

function onComplete(evt:Event):void {
  //read and load xml into array, by parsing it using prepareMenu
  MENU_ARRAY=prepareMenu(xmlLoader.data.toString());
  placeItemsOnStage(); //place all required items on stage.
}

function placeItemsOnStage():void {
     var pos:Number=0;
  //define the container properties
  menuContainer.x=0;
  menuContainer.y=0;

     for(var c:int=0; c<MENU_ARRAY.length; c++) {
       var it:menuItem = new menuItem; //load out menuItem, because its exported to AS, we can use it here
            it.x=c*27; //its the gray border width
            it.y=0; //place on top
            it.id="Item-"+c; //id the menuItem
            it.name="Item-"+c; //name de menuItem
            it.posX=pos; //actual pos, useful to open and know is position
            it.itemLabel.text=String(MENU_ARRAY.Ititle).toUpperCase(); //load the label in uppercase
            it.addEventListener(MouseEvent.CLICK, onMouseClick); //add mouse click listener
            if(MOVE_ON_MOUSE_OVER==true) it.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver); //if configured, load the mouse over event
            it.useHandCursor=true;  //use hand cursor
            it.buttonMode=true; //buttonMode
            it.itemText.visible=false; //hide the textField
            menuContainer.addChild(it); //add the menu item as child

           if(String(MENU_ARRAY.IcontentType)=="image/swf")     { //check the content and load things accordint to it
                 var ldr:Loader = new Loader();
                 ldr.x=27;
               ldr.y=0;
                 it.addChild(ldr);
                 ldr.load(new URLRequest(MENU_ARRAY.IcontentData.toString()));
            }
          else if(String(MENU_ARRAY.IcontentType)=="text") {
                 it.itemText.visible=true;
                 it.itemText.text=MENU_ARRAY.IcontentData.toString();
            }
     pos+=27; //the next menuItem x position
  }

 //put mask in place
  masker.width=(MENU_ARRAY.length*27+325)
  masker.height=menuContainer.height;
  masker.x=0;
  masker.y=0;

 moveItem(OPENED_MENU-1); //open menu confirured in XML

}

  function onMouseOver(evt:MouseEvent):void {
       if(evt.target.name.toString()=="buttonBack") prepareMove(evt)
  }

function prepareMove(evt:MouseEvent):void {
  var targetName:String = evt.currentTarget.name.toString(); //get the menuItem
  var temp:Array = targetName.split("-"); //split his name: Item-x
  var itemNumber:int=(temp[1]); //got item number
  moveItem(itemNumber); //move it
}

function onMouseClick(evt:MouseEvent):void {
  if(evt.target.name.toString()=="buttonBack")  prepareMove(evt); //mouse action was done in buttonBack
  else trace("Item "+evt.currentTarget.name+" clicked!"); //mouse action was made on accordion area
 }

function moveItem(num:int):void {
  var itemToMove:menuItem=menuContainer.getChildByName("Item-"+String(num)) as menuItem;
  //get the menuItem child
  for(var m=0;m<MENU_ARRAY.length;m++) //move one-by-one to the new position
  {
  var tempMc = menuContainer.getChildByName("Item-"+m);
  if(tempMc.x > itemToMove.x) TweenLite.to(tempMc, 1, {x:((tempMc.posX) + itemToMove.width-27), ease:Quart.easeOut}); //see tweenLite for info about this.
  else if(tempMc.x <= itemToMove.x) TweenLite.to(tempMc, 1, {x:(tempMc.posX), ease:Quart.easeOut});
  }
}

function prepareMenu (XMLData:String):Array
  {
  //make sure it cames in XML
  var menuXML:XML = new XML(XMLData);
  //just in case
  menuXML.ignoreWhitespace = true;

  //get XML item's entrys
  var XMLItems = menuXML.descendants("item");

 //load all items into an array
  var itemsArray:Array = new Array();
  var itemObj:Object;
  for(var i in XMLItems)
  {
  itemObj=new Object();
  itemObj.Ititle=XMLItems.@Ititle;
  itemObj.IcontentType=XMLItems.@IcontentType;
  itemObj.IcontentData=XMLItems.@IcontentData;
  itemObj.itemID="menu"+i;
  itemsArray.push(itemObj);
  }
  OPENED_MENU=menuXML.@menuOpen; //get menu for open.
  MOVE_ON_MOUSE_OVER=(menuXML.@moveOnMouseOver.toString()=="true" ? true : false); //get the option for load or not mouseOver open
  return itemsArray;
}

//finish.
stop();

This topic has been closed for replies.

1 reply

Participant
August 16, 2011

Bring up this post! I am also inquiring something similiar in another thread http://forums.adobe.com/message/3855478#3855478

Thanks peeps!