ActionScript 3 Looping

Question

I just started using Looping in AS3 recently and I have much to learn. here is the question. Below is a Loop that puts 5 balls one on top of the other on the stage. So far so good. however, I'd like to create a situation when clicking on a button, the bottom ball is removed, and then each ball take the place of the ball below it one by one, continue this for each click until all the balls are gone. . I have created this situation with add/remove child and I thought it could be more efficient with looping. I just don't know how to access the balls since I don't have instance name or class name that I can reference too.

var ball: gBall4M;
var i: Number;

for (i = 0; i < 5; i++) {

  ball = new gBall4M();
  ball.x = 331.30;
  ball.y = 25 + i * 17
  addChild(ball);
}
function release2Ball2(event: MouseEvent): void {

This is the effect I want to get https://youtu.be/B4GLolw8QVA

Answer 1

As mentioned in the answer of @daniel-messer, you can use an Array to store your balls, and for the second part of your question, when removing the last ball and moving the other ones, you can use array.pop() to remove the last element of the array, and then you can use array.map() to move the other balls :

function release2Ball2(event:MouseEvent): void
{
    if(balls.length > 0){
        ball = balls.pop();             // remove and get the last element of the array
        ball.parent.removeChild(ball);  // remove that element from the DisplayObjectContainer 
        function move_ball(item:Ball, index:int, array:Array):void {
            item.y += 17;
        }
        // move the rest of elements
        balls.map(move_ball, this);
    }
}

EDIT :

Take a look on the code working, I added numbers to understand how balls are moving :

Your full code can be like this :

var balls:Array = [],
    ball:gBall4M;

for (var i:int = 0; i < 5; i++) {
    ball = new gBall4M();
    ball.x = 331.30;
    ball.y = 25 + i * 17;
    balls.push(ball);
    addChild(ball);
}

btn.addEventListener(MouseEvent.CLICK, release2Ball2);
function release2Ball2(event:MouseEvent):void {
    if (balls.length > 0) {
        ball = balls.pop();
        ball.parent.removeChild(ball);
        function move_ball(item:gBall4M, index:int, array:Array):void {
            item.y +=  17;
        }
        balls.map(move_ball, this);
    }
}

EDIT 2:

To do that kind of animation, you can use a Timer like this :

var balls:Array = [],
    ball:gBall4M;

for (var i:int = 0; i < 5; i++) {
    ball = new gBall4M();
    ball.x = 30;
    ball.y = 25 + i * 17;
    balls.push(ball);
    addChild(ball);
}

btn.addEventListener(MouseEvent.CLICK, release2Ball2);
function release2Ball2(event:MouseEvent):void {
    if (balls.length > 0) {
        ball = balls.pop();
        ball.parent.removeChild(ball);
        if(balls.length > 0){
            timer.start();
        }
    }
}

var timer:Timer = new Timer(150);
    timer.addEventListener(TimerEvent.TIMER, function(e:TimerEvent){
        if(balls.length >= timer.currentCount){
            balls[balls.length - timer.currentCount].y += 17;
        } else {
            timer.reset();
        }
    })

Which will give you something like this :

Hope that can help.

Answer 2

OK I figured it out. using this code on frame 1

function release2Ball2(event: MouseEvent): void {
  if (ballA.length > 0) {
  ball = ballA.pop();
  removeChild(ball);
  ball = null
  gotoAndPlay(2);

  }
}
stop();

using this code on frame 10:

for (i = 0; i < ballA.length; i++) {
  ballA[i].y += 17;
stop();

That does the trick.

Thank you so much for your help

Answer 3

Just save the instances inside an array or similar that you can use later.

I hope you are using a code file and not writing the code directly inside a frame inside the flash editor. Otherwise you might end up with issues.

Something similar to this should work

package {
  class Main {
    var balls:Array = [];

    function createBalls() {
      var ball: gBall4M;
      var i: Number;

      for (i = 0; i < 5; i++) {

        ball = new gBall4M();
        ball.x = 331.30;
        ball.y = 25 + i * 17;
        balls.push(ball); //Save them to array
        addChild(ball);
      }
    }

    function release2Ball2(event: MouseEvent): void {
      var clickedBall:gBall4M = event.currentTarget as gBall4M; //this might be wrong depending on what you are listening for, and what type of object gBall4M is...
      for(var i=0; i<balls.length; ++i) {
        if(balls[i] == clickedBall) {
          balls[i].splice(i, 1); //remove instance from array
          removeChild(clickedBall); //remove instance from display list
          break;
        }
      }
    }
  }
}