Problem with event listeners

programming flash
1

Hi there,

I’m trying to create a dynamic xml based menu with my “limited” AS3 knowledge and ran into a problem. I managed to create the menu but I’m running into some problem with the event listeners. I’m adding an eventlistener inside a for loop which is working fine, every single button detects the MouseEvents (MOUSE_OVER and MOUSE_OUT) but the attached function only works for the last button.

I guess I’m not targetting the MCs I need to change correctly but can’t figure out how fix it.

I just set my first footsteps in the big and mysterious world of AS3 so every help is sincerely appreciated!

Thanks,
Kevin

The addEventListener part:


for (var i:uint=0; i < workList.length(); i++) {

	...

	//making the different buttons do something!!
	myBtn.addEventListener(MouseEvent.MOUSE_OVER, changeBtnColorOn);
	myBtn.addEventListener(MouseEvent.MOUSE_OUT, changeBtnColorOut);
	
	//myTxtField and myBtnBg are both children of myBtn
	function changeBtnColorOn(evt:MouseEvent):void {
		TweenLite.to(myTxtField, 0, {tint:0xffffff});
		TweenLite.to(myBtnBg, 0, {tint:0x445555});
	}
	function changeBtnColorOut(evt:MouseEvent):void {
		TweenLite.to(myTxtField, 0.7, {tint:0x445555});
		TweenLite.to(myBtnBg, 0.7, {tint:0xffffff});
	}
}

Full code:


package be.bundl{

	import flash.display.*;
	import flash.events.*;
	import flash.net.*;
	import flash.text.*;
	import gs.TweenLite;

	public class Main extends MovieClip {

		public function Main() {
			var xmlLoader:URLLoader = new URLLoader();
			var xmlData:XML = new XML();

			xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
			xmlLoader.load(new URLRequest("xml/portfolio.xml"));

			function LoadXML(e:Event):void {
				xmlData=new XML(e.target.data);
				CreateMenu(xmlData);
			}

			function CreateMenu(workInput:XML):void {
				//creating a container to hold the generated buttons
				var myMenu:MovieClip = new MovieClip();
				myMenu.x=10;
				myMenu.y=10;
				addChild(myMenu);
				
				var workList:XMLList=workInput.project;
				for (var i:uint=0; i < workList.length(); i++) {
					var workElement:XML=workList*;

					var btnHeight:uint=12;
					
					//create a container for each button
					var myBtn:MovieClip = new MovieClip();
					myBtn.name="myBtn"+i;//set unique name
					myBtn.x=0;
					myBtn.y=i*(btnHeight+1);

					myMenu.addChild(myBtn);
					
					//create the background of each button and add it to the buttoncontainer myBtn
					var myBtnBg:MovieClip = new MovieClip();
					myBtn.addChild(myBtnBg);
					myBtnBg.graphics.beginFill(0xffffff);
					myBtnBg.graphics.drawRect(0,0,200,12);
					myBtnBg.graphics.endFill();
					
					//create the textfield of each button and add it to the buttoncontainer myBtn
					var myTxtField:TextField = new TextField();
					var myTxtInput:String;
					myTxtInput = (workElement.company + " " + workElement.title).toUpperCase();//create button string from xml

					myTxtField.text=myTxtInput;
					myTxtField.width=190;
					myTxtField.x=5;
					myBtn.addChild(myTxtField);

					myTxtField.selectable=false;
					myTxtField.border=false;
					myTxtField.autoSize=TextFieldAutoSize.LEFT;
					myTxtField.antiAliasType=AntiAliasType.ADVANCED;
					
					//create the format of the textfield style
					var myFormat:TextFormat = new TextFormat();

					myFormat.color=0x445555;
					myFormat.size=10;
					myFormat.font="Arial";

					myTxtField.setTextFormat(myFormat);
					
					//making the different buttons do something!!
					myBtn.addEventListener(MouseEvent.MOUSE_OVER, changeBtnColorOn);
					myBtn.addEventListener(MouseEvent.MOUSE_OUT, changeBtnColorOut);

					function changeBtnColorOn(evt:MouseEvent):void {
						TweenLite.to(myTxtField, 0, {tint:0xffffff});
						TweenLite.to(myBtnBg, 0, {tint:0x445555});
					}
					function changeBtnColorOut(evt:MouseEvent):void {
						TweenLite.to(myTxtField, 0.7, {tint:0x445555});
						TweenLite.to(myBtnBg, 0.7, {tint:0xffffff});
					}
				}
			}
		}
	}
}