How to remove all children of a static shape on stage?

Question

I am making a projectile motion simulation, and one of the options involves the use of a graph function.

So when I press the Graph button (button_2), the graph template layer is visible. There is a pre-calculated array with the coordinates of the values which must be plotted on the graph.

For every coordinate (per 0.1 seconds, as indicated by the countdown timer), a movie-clip 'point' is placed there. A new circle shape is then created and placed on the same point (copying its coordinates). Thus, the stage now has a parabolic dotted line. However, when pressing the 'back' button, all the created circles do not disappear/reset (removing all children) as intended.

I tried to use a loop function which removes all children, but I keep getting error messages.

button_2.addEventListener(MouseEvent.CLICK, goToGraph);

function goToGraph(event:MouseEvent):void
{

graphTemplate.visible = true;
backToSim1.visible = true;
point.visible = true;

point.x = 42
point.y = 608

var vx = velocity*Math.cos(angle/(180/Math.PI));
var vy = velocity*Math.sin(angle/(180/Math.PI));
var Time = int(((2*vy)/9.81)*100)/100

if (Time != 0) {


    var t :Number = 0;
    var position:Array = new Array();
    var pos_idx :int = 0; //the position within the array


    while(t <= Time)
    {
        position[ pos_idx ] = (vy * t) - 4.905 * (t * t);
        trace("position[" + pos_idx + "]: " + position[ pos_idx ] );

        t += 0.1;
        t = Number( t.toFixed(3) ); 
        trace("t is: " + t);

        pos_idx += 1; 
    }



    var fl_TimerInstance:Timer = new Timer(100, (Time*10));
    fl_TimerInstance.addEventListener(TimerEvent.TIMER, fl_TimerHandler);
    fl_TimerInstance.start();
    var a = 0;
    var timeElapsed = 0;


    function fl_TimerHandler(event:TimerEvent):void
    {
        a = a+1;



        point.x = point.x + (vx*1.2);
        point.y = 608 - (position[a]*10);
        timeElapsed = timeElapsed + 1;

        var circle:Shape = new Shape();
        circle.graphics.clear();
        circle.graphics.lineStyle(2,0x000000);
        circle.graphics.beginFill(0x990000);
        circle.graphics.drawCircle(0,0,1);
        circle.graphics.endFill();
        addChild(circle);
        circle.x = point.x
        circle.y = point.y


        if (position[a+1] == null) {
            point.visible = false;

            }

    }

}

    backToSim1.addEventListener(MouseEvent.CLICK, fl_ClickToHide_2);

    function fl_ClickToHide_2(event:MouseEvent):void
    {
    graphTemplate.visible = false;
    backToSim1.visible = false;
    point.visible = false;

    while (circle.numChildren > 0) {
    circle.removeChildAt(0);
    }


    }

}

I get the following errors:

• Access of possibly undefined property numChildren through a reference with static type flash.display:Shape.

• Call to a possibly undefined method removeChildAt through a reference with static type flash.display:Shape.

I expect all the created 'circle' variables to be reset/deleted. How can I do that?

Answer 1

There are a few ways how to structurize the picture. Personally I'd go for Array solution, but your code is messy (bad formatting, functions inside functions) so resorting to names it is.

var Circles:Array = new Array;

function fl_TimerHandler(event:TimerEvent):void
{
    // ...

    var circle:Shape = new Shape();

    circle.name = "Circle";

    // ...
}

function fl_ClickToHide_2(event:MouseEvent):void
{
    // ...

    for (var i:int = numChildren - 1; i >= 0; i--)
    {
        var aChild:DisplayObject = getChildAt(i);

        if (aChild.name == "Circle")
        {
            removeChildAt(i);
        }
    }
}