How to remove object from index in array AS3

Question

Hey Everyone so I've been killing myself over this and this is probably the last thing I need help on to finally finish this project.

So I have a timer event that puts the Movie clip in the array onto the Stage. The MovieClip is named mSquare and from the timer event I add it like so:

private function addSquare(e:TimerEvent):void 
    {

            mSquare = new mcSquare();
            stage.addChild(mSquare);
            mSquare.x = (stage.stageWidth / 2);
            mSquare.y = (stage.stageHeight / 2) + 450;
            aSquareArray.push(mSquare);
            trace(aSquareArray.length);

    }

Now what I am trying to Accomplish is when the user clicks or has its mouse down on the object, I want that object that the user clicked to be removed from the stage.

Now I can't get it to function properly when the user clicks on one of the MovieClips from the array thats added to the stage. Or if I do then MovieClip that was currently clicked doesnt get destroyed but rather another instance of it on the stage gets destroyed. Its just real bad.

So Here is how I have it set up so far...

In my Constructor:

    stage.addEventListener(MouseEvent.MOUSE_DOWN, movieClipHandler);

Then the movieClipHandler MouseEvent:

private function movieClipHandler(e:MouseEvent):void //test
    {

        mSquare.addEventListener(MouseEvent.MOUSE_DOWN, squareIsBeingClicked);

    }

Then in the squareIsBeingClicked Function:

private function squareIsBeingClicked(e:MouseEvent):void 
    {

         var square:DisplayObject = e.target as DisplayObject; // clicked square
         var i:int = aSquareArray.indexOf(square); // index in the array

         if (i < 0)   //THIS IS WHERE I GET CONFUSED
         {
            // the MC is out of the array
               trace("Clicked");
               mouseIsDown = true;
               checkSquareIsClicked();


         } else 
         {
            // the MC is in the array


         }


   }

And finally i have a function called checkSquareIsClicked to do all the work:

private function checkPopIsBeingClicked():void 
    {

        //Loop through all pops
        for (var i:int = 0; i < aPopArray.length; i++)
        {
            //Get current pops in i loop
            var currentpop:mcPop = aPopArray[i];

            if (mouseIsDown)
            {
                trace("Current Pop Destroyed")
                aPopArray.splice(i, 1);
                currentpop.destroyPop();
                nScore ++;
                updateHighScore();
                updateCurrentScore();
                mouseIsDown = false;

                //Add Explosion Effect
                popExplode = new mcPopExplode();
                stage.addChild(popExplode);
                popExplode.y = currentpop.y;
                popExplode.x = currentpop.x;

            }

        }
    }

I know I am doing something really wrong because it shouldnt take this much functions to initiate this array of mouse event. Also someone on here helped me out with the display object and idex as shown above but not sure how to truly implement it. I've exhausted all ideas. Any Help would be appreciated or any pointers. Thank you!

Bennett Keller · Accepted Answer · 2014-02-25 20:58:15Z

2

As @Rajneesh answer indicates, adding your mouse event listener to your MovieClip instead of using the stage mouse event to add the listener, is the correct way to go. That means instead of doing this...:

stage.addEventListener(MouseEvent.MOUSE_DOWN, movieClipHandler); 

private function movieClipHandler(e:MouseEvent):void {
    mSquare.addEventListener(MouseEvent.MOUSE_DOWN, squareIsBeingClicked);
}

Would be replaced in your addSquare function:

private function addSquare(e:TimerEvent):void {
    mSquare = new mcSquare();
    stage.addChild(mSquare);
    mSquare.x = (stage.stageWidth / 2);
    mSquare.y = (stage.stageHeight / 2) + 450;
    aSquareArray.push(mSquare);
    //look here
    mSquare.addEventListener(MouseEvent.MOUSE_DOWN, squareIsBeingClicked);
    trace(aSquareArray.length);
}

Now you can change your removal functions. I'm going to alter some of this code to help you optimize it and still achieve the desired effect. Let's start with squareIsBeingClicked:

private function squareIsBeingClicked(e:MouseEvent):void {

    var square:DisplayObject = e.target as DisplayObject; // clicked square
    var i:int = aSquareArray.indexOf(square); // index in the array

    //this is where you will no longer be confused :)
    if (i != -1) { 
        trace("Clicked");
        mouseIsDown = false;
        onSquareIsClicked( square ); //this is in place of your checkSquareIsClicked
        square.parent.removeChild( square );
        aSquareArray.splice( i, 1 ); //remove element from the array
        //remove the listener, very important
        square.removeEventListener( MouseEvent.CLICK, squareIsBeingClicked );
        square = null; //null it if we are not using it again, ready to be garbage collected
     }

}

You now no longer need all the removal pieces in your previous checkSquareIsClicked. As you probably noticed I added a function onSquareIsClicked(), this is to help with any functionality you might need to do when this event is happening. Since you are adding an "explosion" where the object was selected, here's what onSquareIsClicked() looks like:

private function onSquareIsClicked( square:DisplayObject ):void {
    popExplode = new mcPopExplode();
    stage.addChild(popExplode);
    popExplode.y = currentpop.y;
    popExplode.x = currentpop.x;

    //square.destroyPop(); //obviously this function will not work on a type displayObject
    //in which case you just need to cast square to the object containing the method
    nScore ++;
    updateHighScore();
    updateCurrentScore();
}

edited Feb 25, 2014 at 20:58

answered Feb 25, 2014 at 20:19

Bennett Keller

1,7142 gold badges11 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Nathan Over a year ago

Wow. This is just great. I haven't tried to implement it but you explained everything so well. I Probably would have never thought of making the square null when removing the object for garbage collection. Okay so let me try to understand this more because I really want to learn all this. So in the squareIsBeingClicked function its basically stating "If 'i' the display object in the square array is not equal to -1 im going to be removing the square object"? Just need some help on understanding the "-1" in the if statement. But Again Thanks man i appreciate you taking the time to helping me!

Nathan Over a year ago

okay well there are no errors and everything is starting to come together and make sense. But I think I am missing a boolean somewhere on the mousIsDown boolean to be equal to true because currently non of the display objects from the array are interacting with the user Mouse Down event. Whenever I touch the objects nothing happens not even a trace. Ill try to figure it out in the mean time though

Bennett Keller Over a year ago

Not a problem, I'll explain what's happening with the if statement. When you are using the indexOf() on an array, if the element is not found it returns -1. Therefore, if we are using indexOf and it does not = -1, we have found an element and now we can use that index. Also that mouseIsDown boolean can be removed, it isn't necessary I just left it in case you were using it somewhere else. As far as nothing happening when you click on the object there is probably something else not setup correctly, I can run this code on my end with a different setup without issues.

Nathan Over a year ago

Oh okay, that makes perfect sense thanks for the explanation. I seems that when the if statement as you wrote above if(i != -1) the click registration doesnt work but when i changed it back to if( i < 0) the click registration works perfectly fine. i wonder why your statement above isnt registering ??

Bennett Keller Over a year ago

I'm sure there must be something else that is causing it to not work on your end, that code is correct. From Adobe on array indexof "If the search element argument is not found, the return value is - 1". Glad you got it working though.

|

Rajneesh Gaikwad · Accepted Answer · 2014-02-25 14:23:16Z

1

Add mouse click events to objects to be removed and get target and remove it like so:

(Note: Also, no need to add those MovieClips to array ( add only if necessary))

private function addSquare(e:TimerEvent):void 
{
     mSquare = new mcSquare();
     mSquare.addEventListener(MouseEvent.CLICK, removeSquare);
     stage.addChild(mSquare);

     //Position here mSquare       
}

private function removeSquare(e:MouseEvent):void
{
     var tempObject:MovieClip = MovieClip(e.currentTarget); //get the square object
     removeChild(tempObject);
     tempObject = null;
}

edited Feb 25, 2014 at 14:23

answered Feb 25, 2014 at 13:48

Rajneesh Gaikwad

1,1932 gold badges14 silver badges30 bronze badges

7 Comments

The_asMan Over a year ago

You left out all the positioning data and the call to checkSquareIsClicked()

Rajneesh Gaikwad Over a year ago

@The_asMan - I don't believe in spoon feeding? Instead they should get an idea from the answer and not the complete solution.

Craig Over a year ago

2 questions about this: in the 'removeSquare' function why not just: removeChild(e.target) ? And when you say 'e.currentTarget' aren't you in danger of removing the object at the top of the event flow, instead of the square?

The_asMan Over a year ago

@Craig It depends on if capture phase is used or not. In this case capture = false which is the default. currentTarget "should" be the actual object where the event listener was attached to.

The_asMan Over a year ago

@RajneeshGaikwad spoon feeding would be writing the code completely for the person. This person tried and failed and as such has come here looking for help. What might be just a matter of cut and pasting to you might take them days to figure out. In this case you modified the code a lot, and they might not have the skill level to figure it out. Just saying its better to give a full answer then a half though out one. And also the function removeSquare() is prone to memory management issue since you are nullifying the object without removing event listeners.

|

Collectives™ on Stack Overflow

How to remove object from index in array AS3

2 Answers 2

7 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related