Actionscript 3.0 - removeChild doesn't work

Question

I'm trying to write the base code for a graphing document that shows a value on the graph each time an int is pushed into an array. Here is the code-

import flash.display.Shape;
import flash.display.MovieClip;
import flash.display.Sprite;
var myShape:Shape = new Shape();
myShape.graphics.lineStyle(2, 0x990000, 2);
var max:Number = 0;
var graph:Array = new Array();
var container:Sprite = new Sprite();
var redrawGraph = setInterval(reDraw,1000);
function reDraw()
    {
        while (container.numChildren)
        {
            container.removeChildAt(0);
        }
        graph.push(randomNum());
        graph.reverse();
        for (var ints in graph)
        {
        if (graph[ints] > max)
        {
            max = graph[ints];
        }
    }
for (var i:Number = 0; i < graph.length-1; i++)
{
    myShape.graphics.moveTo(550-i*50, (max – graph[i])*20);
    myShape.graphics.lineTo(550-(i+1)*50, (max – graph[i+1])*20);
    container.addChild(myShape);
}
this.addChild(container);
graph.reverse();
}

function randomNum():int
{

return Math.floor(Math.random() * 11);`

}

Except the issue i'm having is I end up with the graph overlapping the previous one, the part where it should be removing the old graph shapes doesn't seem to be working...and I can't figure out why.

Any help would be appreciated.

(sorry about the formatting...it wouldn't work properly

It could be a scope issue, I would try putting traces into the `reDraw` function to ensure that `container` and `this` are what you expect them to be. Also, consider using the Timer class instead of `setInterval`. — shanethehat, Apr 17 '12 at 11:32
I checked using traces and it only seems to be calling the removeChildAt(0) once per cycle despite there definitely being more than one. (and it not actually deleting it...) — James McGrath, Apr 19 '12 at 00:36

score 1 · Accepted Answer · answered Apr 17 '12 at 13:06

You have a misunderstanding of the difference between display objects hierarchy and manipulating the graphics object of a display object.

You are using setInterval to call a reDraw callback.

In the reDraw callback, you are using graphics.moveTo and graphics.lineTo to draw your graph. However, every frame you are constantly drawing to the same "canvas", the same Sprite: myShape.

Adding and removing the display objects from each other is unnecessary. In this case, you only need to add the display objects once. And then on each refresh, clear the canvas and start drawing again.

For example, consider the following:

    var myShape:Shape;
    var graph:Array;
    var container:Sprite = new Sprite();

    myShape = new Shape();
    graph = new Array();
    var redrawGraph:int = setInterval(reDraw,1000);

    container.addChild(myShape);
    this.addChild(container);

Here I am creating a the shape, putting the shape into the container, and then adding the container to the root display object, and thats pretty much it. And then...

    private function reDraw():void {
        myShape.graphics.clear();
        myShape.graphics.lineStyle(2, 0x990000, 2);

        graph.unshift(randomNum());

        var i:uint, len:uint = graph.length, max:int = 0;

        for (i=0; i< len; i++) {
            max = Math.max(graph[i], max);
        }

        for (i = 0; i < len; i++)
        {
            myShape.graphics.moveTo(550-i*50, (max - graph[i])*20);
            myShape.graphics.lineTo(550-(i+1)*50, (max - graph[i+1])*20);

        }
    }

Then here, notice that I am not removing or adding anything to the display tree, the tree is already organized the way that I want. All I'm doing on a redraw is clearing my shape, and then redrawing it the way that I want it to be displayed.

Sometimes you do need to manipulate the display hierarchy, but this is not one of those times.

See here for a working example...

Thank you so much that works perfectly. I wasn't aware of the differences but I understand it now. — James McGrath, Apr 19 '12 at 02:30

score 0 · Answer 2 · answered Apr 17 '12 at 05:56

so while creating your myShape object add name to it, so then further this myShapes can be useful to remove by using getChildByName method.

do some following changes...

while creating myShape...

var myShape:Shape = new Shape();
myShape.name = "myShape";
.
.
.
for (var i:Number = 0; i < graph.length-1; i++) 
{ 
    myShape.graphics.moveTo(550-i*50, (max – graph[i])*20); 
    myShape.graphics.lineTo(550-(i+1)*50, (max – graph[i+1])*20); 
    container.addChild(myShape); 
} 
this.addChild(container);

while removing...

while(this.getChildByName("myShape")!= null){
    this.removeChild(this.getChildByName("myShape"));
}

try this, this would be work fine...

I gave that a go but it still doesn't seem to be removing anything, they still pile on top of each other. — James McGrath, Apr 17 '12 at 06:29

score 0 · Answer 3 · answered Apr 17 '12 at 11:21

check this code...

in this code i added graphics directly in UIcomponent this would be worked fine...

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
                minWidth="955" minHeight="600" 
                creationComplete="application1_creationCompleteHandler(event)" >
    <mx:Script>
        <![CDATA[
            import flash.display.MovieClip;
            import flash.display.Shape;
            import flash.display.Sprite;

            import mx.core.UIComponent;
            import mx.events.FlexEvent; 


            private var _max:Number = 0; 
            private var _graph:Array = new Array(); 
            private var _container:UIComponent ;

            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {

                _container = new UIComponent();
                this.addChild(_container);
                _container.graphics.lineStyle(2, 0x990000, 2);
                var redrawGraph = setInterval(reDraw,1000);
            }

            private function reDraw() 
            { 
                _graph.push(randomNum()); 
                _graph.reverse();
                _container.graphics.clear();
                _container.graphics.lineStyle(2, 0x990000, 2);
                for (var ints in _graph) 
                { 
                    if (_graph[ints] > _max) 
                    { 
                        _max = _graph[ints]; 
                    } 
                } 

                for (var i:Number = 0; i < _graph.length-1; i++) 
                { 
                    var a:Number = Number(_graph[i]);
                    var b:Number = Number(_graph[i+1]);
                    _container.graphics.moveTo(550-i*50,(_max-a) *20); 
                    _container.graphics.lineTo(550-(i+1)*50,( _max-b)*20);
                } 
                _graph.reverse(); 
            } 

            private function randomNum():int 
            { 
                return Math.floor(Math.random() * 11);
            } 
        ]]>
    </mx:Script>
</mx:Application>

Actionscript 3.0 - removeChild doesn't work

3 Answers3