Duplicating Children with For Loop But Need each object to have a Unique Name

[knottyDJ]

I'm duplicating a sprite with this for loop and placing them sequentially on the stage. However they all seem to have the same name.

Any help on how to get them to be have unique "instance" names so I can access them individually or populate them with unique content?



public function galleryItem():void{

for (var i:uint=1; i<=5; i++) {
thumbBox.name = "thumbBox"+i;
thumbBox.graphics.beginFill(gBgColor, 1);
thumbBox.graphics.drawRect((gPosX+gWidth)*i, gPosY, gWidth, gHeight);
thumbBox.graphics.endFill();
thumbBox.alpha = .5;
thumbBox.buttonMode = true;
trace("ThumBoxNum: "+thumbBox.name);
addChild(thumbBox);
}

thumbBox.addEventListener(MouseEvent.CLICK,countIt );
}

public function countIt(event:MouseEvent):void{
trace("Clicked: "+thumbBox.name);
}
}


So, when I trace before the addChild I get: ThumBoxNum: thumbBox1 | thumbBox2 | etc...
when I trace it in the countIt function I get: Clicked: thumbBox5 for each object on the stage.

And if this is possible it would be ideal to set up a single event listener for each:
thumbBox[i].addEventListener(MouseEvent.CLICK,countIt);
Obviously I'm new to AS3 and trying to make the switch, have mercy .
thanks

[5TonsOfFlax]

Names are not a good way to organize things. Use an array instead. It will even give you the syntax you wanted for the addEventListener statement.

But, let's talk about the code you did post.

You are not duplicating anything with that code. You have a single thumbBox Sprite, and you're drawing 5 different rectangles on it. You are also changing its name each time through the loop.

What I think you want is this:

var thumbs:Array = new Array();
var thumbBox:Sprite;

public function galleryItem():void{
  for (var i:uint=1; i<=5; i++) {
   thumbBox = new Sprite();
   thumbBox.graphics.beginFill(gBgColor, 1);
   thumbBox.graphics.drawRect((gPosX+gWidth)*i, gPosY, gWidth, gHeight);
   thumbBox.graphics.endFill();
   thumbBox.alpha = .5;
   thumbBox.buttonMode = true;
   thumbBox.addEventListener(MouseEvent.CLICK,countIt );
   addChild(thumbBox);
   thumbs.push(thumbBox);
  }
}

public function countIt(event:MouseEvent):void{
  DisplayObject(event.currentTarget).x += 50;  
}

I changed the countit function so that I could illustrate the fact that you do NOT need to resort to names for this.

[knottyDJ]

Thanks a bunch 5Tons!

though when I add the line you suggested in the countIt function. then click on one of the thumbs all of them move with eachother, and the trace still says that regardless of which box I click it is still boxNum 5,

I assumed I'd be able to control each individually..


is there something I'm missing there?

[5TonsOfFlax]

You're missing an import statement.

import flash.display.DisplayObject;

[knottyDJ]

thanks I actually do have the import statement.
and the behavior I get is that all of the thumbBoxes move together. So this is what I've got now:


public function galleryItem():void{

var thumbs:Array = new Array();

for (var i:uint=1; i<=5; i++) {
thumbBox.name = "thumbBox"+i;
thumbBox.graphics.beginFill(gBgColor, 1);
thumbBox.graphics.drawRect((gPosX+gWidth)*i, gPosY, gWidth, gHeight);
thumbBox.graphics.endFill();
thumbBox.alpha = .5;
thumbBox.buttonMode = true;
trace("ThumBoxNum: "+thumbBox.name);


addChild(thumbBox);
thumbs.push(thumbBox)

}
thumbBox.addEventListener(MouseEvent.CLICK, countIt);


}

public function countIt(event:MouseEvent):void{
trace("Clicked: "+thumbBox.name);
DisplayObject(event.currentTarget).x += 50;

}

[5TonsOfFlax]

You've gone back to doing the same thing you were. You don't have 5 things there, you have one thing that has 5 rectangles drawn on it.

You have to create a new object (Sprite, Thumbbox, whatever) each time through the loop, or else you're going to be re-using the same one over and over.

[knottyDJ]

Thanks again. That works each thumbBox now moves independently when clicked. I had declared the thumbBox var with all the other vars above my constructor and thought that would have covered it. Though having thumbBox = new Sprite(); within the for loop was missing.

though my trace now states that each time I click the box it is thumbBox7, but the for loop only goes to 5?

and on my event listener now if I say:
thumbBox[2].addEventListener(MouseEvent.CLICK, countIt);

I get an error that says : Property 2 not found on flash.display.Sprite and there is no default value.

thanks for your help... any other suggestions/

[5TonsOfFlax]

I'm not sure why it would say thumbBox7. You should only have 1 through 5. Oh, and you should probably change that to 0 - 4 to match the array indices.

You can't do

thumbBox[2].addEventListener(MouseEvent.CLICK, countIt);

because thumbBox is a Sprite. The array is thumbs.

thumbs[2].addEventListener(MouseEvent.CLICK, countIt);

thumbs[2] is thumbBox3, because arrays start at 0, but your names start at 1.

In countIt, you shouldn't be using the thumbBox variable, which is going to be the same thing no matter which you click. You need to use event.currentTarget

public function countIt(event:MouseEvent):void{
  var tbox:DisplayObject = DisplayObject(event.currentTarget);
  trace("Clicked: "+tbox.name);
  tbox.x += 50;
}

[knottyDJ]

Thanks a ton for your help!
I'm waaaaay closer. using your suggestion though I am able to listen for click events on specifically item 0 - 4 : thumbs[0].addEventListener(MouseEvent.CLICK, countIt);

my trace still tells me the Clicked: instance, instance name starts at 3(being 0) and goes to 7(being 4). I still get 5 objects with the loop and the above listener targets the right box when clicked. but weirdness with the trace...

you've been uber helpful though and I'll keep cracking away at it and can deal in that I'll have a manageable number of thumbs. I was hoping to be able to build it out in a proper AS 3 approach, to dynamically grow if I used xml to generate the gallery thumbs.

The other thought I had was that in games people use something similar to say place enemies on the screen as duplicates of eachother but each with unique identifiers for health or life points etc... that behave independent of eachother. If you know of any good resources for learning about that I'd be grateful for a nudge in the right direction.

cheers

[5TonsOfFlax]

You've actually already got a system which will let you dynamically grow the number of boxes. You've got all your boxes in the array, and you can access them that way. You should realize that names don't have to matter. You don't even have to set them.

For example, you don't know my name, and I don't know your name, but we are able to pass messages back and forth to each other because we have a reference to each other.