dcsimg
A Flash Developer Resource Site

Results 1 to 7 of 7

Thread: Accessing child properties of items in a container

  1. #1
    Mourning Morning. groupof1's Avatar
    Join Date
    Feb 2008
    Location
    Middle of somewhere
    Posts
    194

    Accessing child properties of items in a container

    Wasn't sure what to call this exactly.

    Basically, I have a menu created using XML. Each menu item has a fill that fades in and out as the user scrolls over them. What I want to happen is that when an item is clicked, it stays highlighted. The problem comes when I click on the second item. I can't get the first item to "unselect."

    Here is the menu code and functions.
    Code:
    var menuHolder:MovieClip = new MovieClip();
    
    menuHolder.x = myMask.x;
    menuHolder.y = myMask.y;
    
    menuHolder.mask = myMask;
    
    addChild(menuHolder);
    
    var count:Number = 0;
    
    function createMenu():void {
    	
    	for each (var button:XML in xml.buttons.button) {
    		
    		var menuItem:MenuItem = new MenuItem();
    		
    		menuItem.x = 0;
    		menuItem.y = count * menuItem.height * 1.10;
    
    		menuItem.menuText.text = button.label.toString();
    		
    		menuItem.linkTo = button.linkTo.toString();
    		
    		menuItem.descriptionText.text = button.descriptionText.toString();
    		
    		menuItem.mouseChildren = false;
    		
    		//Add listeners for the mouse over, mouse out and click.
    		menuItem.addEventListener(MouseEvent.MOUSE_OVER, mouseOverItem);
    		menuItem.addEventListener(MouseEvent.MOUSE_OUT, mouseOutItem);
    		menuItem.addEventListener(MouseEvent.CLICK, itemClicked);
    		
    		//Add the item to the menu holder
    		menuHolder.addChild(menuItem);
    
    		count++;
    	}
    	
    	addMenuListeners();
    }
    
    
    
    //established outside the function for use in other functions
    var itemLink:String; 
    var descriptions:String;
    var isSelected:Boolean = false;
    
    function mouseOverItem(e:Event):void {
    	var item:MenuItem = e.target as MenuItem;
    	TweenMax.to(item.menuFill, 0.5, {alpha: 0.3}); //Tween the alpha 
    }
    
    function mouseOutItem(e:Event):void {
    	//Get the item that dispatched the event
    	var item:MenuItem = e.target as MenuItem;
    	
    	if (item.isSelected != true){
    		TweenMax.to(item.menuFill, 1, {alpha: 0.7}); //Tween the alpha
    	}
    }
    
    
    function itemClicked(e:Event):void {
    	var item:MenuItem = e.target as MenuItem; 
    
    	// This is the part that isn't working
    	if (item.isSelected==true) {
    		var child:DisplayObject;
    		for (var i:uint=0; i < menuHolder.numChildren; i++) {
    			child = menuHolder.getChildAt(i);
    			child.alpha = 0.7;
    		}
    		isSelected=false;
    	}
    	TweenMax.to(item.menuFill, 0.5, {alpha: 0.3});
    	item.isSelected=true;
    }
    Any thoughts or help would be appreciated.
    What the world needs now is a nice hot bath.
    _________________________________________________
    Battles: Silverx2

  2. #2
    Mourning Morning. groupof1's Avatar
    Join Date
    Feb 2008
    Location
    Middle of somewhere
    Posts
    194
    What happens is that the first item, once clicked, remains highlighted, and then the second and so on.

    The eventListeners are assigned to each item as it is created and only fire for each specific item. I can't figure out how to access the other menu items from inside the function when an item is clicked.

    I tried using displayObject with getChildAt() but it only stores the names and I can't access the properties of the other menu items.
    What the world needs now is a nice hot bath.
    _________________________________________________
    Battles: Silverx2

  3. #3
    Will moderate for beer
    Join Date
    Apr 2007
    Location
    Austin, TX
    Posts
    6,801
    In itemClicked, you are only changing the alphas of the other items if the one you clicked on is already selected. That seems wrong.

    Also, you have isSelected=false which refers to a nonexistent isSelected property in the timeline. You need to set isSelected on each of the menuItems instead. To do that, you need to type your child variable as MenuItem, and cast the result of getChildAt. But you shouldn't use getChildAt anyway. You should have an array that holds all the menuitems rather than rely on the displaylist to keep your collection for you.

    getChildAt does NOT store the instance names. It retrieves actual instances. If you trace them, you might get the instance names, because that's what toString does on instances. You are already using getChildAt to get instances and then manipulate those instances, so I don't understand how you made this conceptual mistake.

  4. #4
    Mourning Morning. groupof1's Avatar
    Join Date
    Feb 2008
    Location
    Middle of somewhere
    Posts
    194
    Quote Originally Posted by 5TonsOfFlax View Post
    In itemClicked, you are only changing the alphas of the other items if the one you clicked on is already selected. That seems wrong.
    Yes, this is what is happening now. I had it before where as each item was clicked it would stay selected.

    Also, you have isSelected=false which refers to a nonexistent isSelected property in the timeline. You need to set isSelected on each of the menuItems instead. To do that, you need to type your child variable as MenuItem, and cast the result of getChildAt. But you shouldn't use getChildAt anyway. You should have an array that holds all the menuitems rather than rely on the displaylist to keep your collection for you.
    That makes sense. Arrays kind of freak me out because I don't understand how to take full advantage of them. Let me work on this and see if I can get it to work with your suggestions.

    getChildAt does NOT store the instance names. It retrieves actual instances. If you trace them, you might get the instance names, because that's what toString does on instances. You are already using getChildAt to get instances and then manipulate those instances, so I don't understand how you made this conceptual mistake.
    I must have misread the adobe AS3 help. I thought it said it stored the names and I couldn't access the properties. Just a mistake on my part. I learn this stuff as I go and am not a full time programmer.
    What the world needs now is a nice hot bath.
    _________________________________________________
    Battles: Silverx2

  5. #5
    Mourning Morning. groupof1's Avatar
    Join Date
    Feb 2008
    Location
    Middle of somewhere
    Posts
    194
    Okay, I got it to work. I added the isSelected variable to each item.

    Code:
    var menuHolder:MovieClip = new MovieClip();
    
    menuHolder.x = myMask.x;
    menuHolder.y = myMask.y;
    
    menuHolder.mask = myMask;
    
    addChild(menuHolder);
    
    var count:Number = 0;
    
    function createMenu():void {
    	for each (var button:XML in xml.buttons.button) {
    		
    		var menuItem:MenuItem = new MenuItem();
    
    		var isSelected:Boolean;
    		menuItem.isSelected = false;
    		
    		menuItem.x = 0;
    		menuItem.y = count * menuItem.height * 1.10;
    
    		menuItem.menuText.text = button.label.toString();
    		
    		menuItem.linkTo = button.linkTo.toString();
    		
    		menuItem.descriptionText.text = button.descriptionText.toString();
    		
    		menuItem.mouseChildren = false;
    		
    		//Add listeners for the mouse over, mouse out and click.
    		menuItem.addEventListener(MouseEvent.MOUSE_OVER, mouseOverItem);
    		menuItem.addEventListener(MouseEvent.MOUSE_OUT, mouseOutItem);
    		menuItem.addEventListener(MouseEvent.CLICK, itemClicked);
    		
    		//Add the item to the menu holder
    		menuHolder.addChild(menuItem);
    
    		count++;
    	}
    	
    	addMenuListeners();
    }
    And then in the itemClicked function I typed the variable child as MenuItem, and cast the result of getChildAt as MenuItem.
    Then I could access the properties and use it in TweenMax amd turn isSelected to false.

    Code:
    function itemClicked(e:Event):void {
    	var item:MenuItem = e.target as MenuItem; //Get the item that dispatched the event
    	var child:MenuItem;
    	for (var i:uint=0; i < menuHolder.numChildren; i++) {
    		child = menuHolder.getChildAt(i) as MenuItem;
    		TweenMax.to(child.menuFill, 1, {alpha: 0.7});
    		item.isSelected=false;
    	}
    	TweenMax.to(item.menuFill, 0.5, {alpha: 0.3});
    	item.isSelected=true;
    }
    Thanks once again for your help Flax.
    Last edited by groupof1; 06-09-2011 at 11:43 AM.
    What the world needs now is a nice hot bath.
    _________________________________________________
    Battles: Silverx2

  6. #6
    Mourning Morning. groupof1's Avatar
    Join Date
    Feb 2008
    Location
    Middle of somewhere
    Posts
    194

    resolved

    I'll work on that array issue. I know I need to get more comfortable with them.
    What the world needs now is a nice hot bath.
    _________________________________________________
    Battles: Silverx2

  7. #7
    Mourning Morning. groupof1's Avatar
    Join Date
    Feb 2008
    Location
    Middle of somewhere
    Posts
    194
    Found a bug in the function. here is the correct code. In the for loop, item.isSelected=false should be child.isSelected=false.

    Otherwise previously selected items will reset, but stay highlighted if rolled over again until another item is clicked. Changing this to child resets each item's isSelected value to false. Before it was not, it was only running the tween part of the code effectively.


    Code:
    function itemClicked(e:Event):void {
    	var item:MenuItem = e.target as MenuItem; //Get the item that dispatched the event
    	var child:MenuItem;
    	for (var i:uint=0; i < menuHolder.numChildren; i++) {
    		child = menuHolder.getChildAt(i) as MenuItem;
    		TweenMax.to(child.menuFill, 1, {alpha: 0.7});
    		child.isSelected=false;
    	}
    	TweenMax.to(item.menuFill, 0.5, {alpha: 0.3});
    	item.isSelected=true;
    }
    What the world needs now is a nice hot bath.
    _________________________________________________
    Battles: Silverx2

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center