Multiple sprites added in loop, but only last sprite clickable

Question

I have multiple bitmap images added into sprites(each image added into 1 sprite) in a loop, then all the sprites added to 1 _contentHolder(Sprite) then that is added to a viewport.

What the problem is, the multiple sprites that are added inside the loop, everything displays with no problem but only the last sprite added is clickable. None of the sprite added before it is clickable. Wondering what the problem is, they are not overlapping and when i hover the mouse over the top of all the sprites, it turns into the mouse clicker but it just won't click.

Thanks for your time!

My code:

function onImageLoaded(e:Event):void {

                loadedArray.push(e.target.content as Bitmap);

                for(var i:int = 0; i < loadedArray.length; i++){
                var currentY1:int = 200;
                var image: Sprite= new Sprite;

                e.currentTarget.loader.content.height =200;
                e.currentTarget.loader.content.y += currentY1;


                 image.mouseChildren = true;    // ignore children mouseEvents
                 image.mouseEnabled = true;      // enable mouse on the object - normally set to true by default
                 image.useHandCursor = true;     // add hand cursor on mouse over
                 image.buttonMode = true; 

                  image.addChild(loadedArray[i]);

                    _contentHolder.addChild(image);
                }

            newArray.push(image);
            var viewport:Viewport = new Viewport();

            viewport.y = 0;

            viewport.addChild(_contentHolder);


            var scroller:TouchScroller = new TouchScroller();
            scroller.width = 300;
            scroller.height = 265;
            scroller.x = 10;
            scroller.y = 100;
            scroller.viewport = viewport;
            addChild(scroller);


             image.addEventListener(MouseEvent.CLICK, gotoscene);

                    }
loadImage();

Edit:

 function gotoscene(e: MouseEvent):void{




        var index:Number;

        index = newArray.indexOf(e.target);

         trace(index);


        blackBox.graphics.beginFill(0x000000);
        blackBox.graphics.drawRect( -1, -1, stage.width, stage.height);
        blackBox.alpha = 0.7;
        addChild(blackBox);








        var originalBitmap : BitmapData = loadedArray[index].bitmapData;
                var duplicate:Bitmap = new Bitmap(originalBitmap);
                duplicate.width = stage.width;


                 _contentHolder1.addChild(duplicate);



  // Use counter here to only add _contentHolder1 once


  //Assuming that `samedata` is a class member (I can't see the rest of your code)

      addChild(_contentHolder1);







           }

Edit2:

     private var image:Array = new Array;


    //In the For loop 

    image[i] = new Sprite();
           image[i].addChild(loadedArray[i]);
                    image[i].addEventListener(MouseEvent.CLICK, gotoscene);


function gotoscene(e:MouseEvent):void{


 index = image.indexOf(e.target);
         trace(index);

}

May be this will give you some idea: http://stackoverflow.com/questions/19739366/create-a-set-of-anonymous-functions-with-parameters-defined-at-definiton-time/19739427#19739427 — Ivan Chernykh, May 24 '14 at 12:30
I had a look at that link, but i am still not very sure why my sprites won't click tho. As in what is the reason for only the last sprite clicking but not any other ones — Benyaman, May 24 '14 at 14:16

score 0 · Answer 1 · answered May 24 '14 at 19:56

You should move image.addEventListener(MouseEvent.CLICK, gotoscene); statement into the loop where you add child sprites. Once you do, the listener will be added to all of the sprites, not just the last one that's currently stored in image variable, and is the only one that responds to your clicks.

        for(var i:int = 0; i < loadedArray.length; i++){
            var currentY1:int = 200;
            var image: Sprite= new Sprite;
            e.currentTarget.loader.content.height =200;
            e.currentTarget.loader.content.y += currentY1;


            image.mouseChildren = true;    // ignore children mouseEvents
            image.mouseEnabled = true;      // enable mouse on the object - normally set to true by default
            image.useHandCursor = true;     // add hand cursor on mouse over
            image.buttonMode = true; 
            image.addEventListener(MouseEvent.CLICK, gotoscene); // <-- THIS
            image.addChild(loadedArray[i]);

            _contentHolder.addChild(image);
        }

And for all that is holy, learn to indent your code, so that you will be able to visually find the start and end of your loops and see if a certain statement is within the loop or not.

I am not able to do it, when i moved the image.addEventListener line inside the loop, then in the Edit part where gotoscene from the EventListener, i have an Error #1010: A term is undefined and has no properties for the first 2 image, the last image is still ok(clickable), but now the first 2 images won't click and give that error, and the index became -1. On the line, var originalBitmap : BitmapData = loadedArray[index].bitmapData; — Benyaman, May 25 '14 at 10:12
I tried switching the index from var originalBitmap : BitmapData = loadedArray[index].bitmapData; to [0] and it is like what you said, all the sprites became clickable. but not sure why when i try to find the index, the first 2 became -1, and the last sprite trace index correctly. — Benyaman, May 25 '14 at 10:49

score 0 · Answer 2 · answered May 26 '14 at 06:35

I did work for a few years in AS3 and this was a weird an usual problem. I used to solve it with a function that adds the event to each clip:

function someFunction():void {
   for (...) {
      var image:Sprite = new Sprite();

      addSceneListener(image);
   }
}

function addSceneListener(mc:Sprite):void {
   mc.addEventListener(MouseEvent.CLICK, gogoscene);
}

Multiple sprites added in loop, but only last sprite clickable

2 Answers2