How do I clear the old lines off the screen?

Question

I'm translating a program from AS2 to AS3. I've got a simple animation drawing lines between balls which are moving on the screen, but I can't figure out how to use the clear() to remove the old ones. This is what I'm getting:

enter image description here

Here's the code:

function moveBalls(e:Event):void
        {
            var nodeA:MovieClip;
            var nodeB:MovieClip;
            var line:Sprite = new Sprite();

            for (var i:uint = 0; i < getLength(nodes); i++)
            {
                nodeA = nodes[i];
                for (var j:uint = i + 1; j < getLength(nodes); j++)
                {
                    nodeB = nodes[j];
                    var dx:Number = nodeB.x - nodeA.x;
                    var dy:Number = nodeB.y - nodeA.y;
                    var dist:Number = Math.sqrt(dx * dx + dy * dy);
                    if (dist < minDist)
                    {
                        line.graphics.lineStyle(1, 0x00ffff);
                        line.graphics.moveTo(nodeA.x+nodeA.width/2, nodeA.y+nodeA.height/2);
                        line.graphics.lineTo(nodeB.x+nodeB.width/2, nodeB.y+nodeB.height/2);
                        addChild(line);

                        var ax:Number = dx * k * .5;
                        var ay:Number = dy * k * .5;
                        nodeA.vx += ax;
                        nodeA.vy += ay;
                        nodeB.vx += ax;
                        nodeB.vy += ay;
                    }
                }
            }
        }

score 1 · Accepted Answer · answered Nov 16 '11 at 22:43

1

Try this demo:

var s:Shape = new Shape();
addChild(s);


stage.addEventListener(MouseEvent.CLICK, _click);
function _click(e:MouseEvent=null):void
{
    s.graphics.clear();
    s.graphics.lineStyle(2, 0xFF0000);
    s.graphics.lineTo(
        Math.random()*stage.stageWidth,
        Math.random()*stage.stageHeight
    );
}

_click();

Hint: Shape is more lightweight than Sprite and is recommended in your scenario.

answered Nov 16 '11 at 22:43

Marty

39,033
19
93
162

I got this to correctly clear the lines, but when I move the line out of the function, it keeps getting overwritten each time and I end up with just one line, instead of multiple lines. Thanks for the tip about Shape. – Sam Nov 16 '11 at 23:32
Ok, I'm not sure how, but after re-evaluating your advice, it works, and not only that, but I can't make it break in the way I was describing above. So thanks. – Sam Nov 17 '11 at 00:34
@Sam Shudder :P Flash is crazy sometimes. – Marty Nov 17 '11 at 00:35

score 1 · Answer 2 · answered Nov 16 '11 at 23:50

Since line is a local variable in your moveBalls function, you keep adding more lines each time you call it (a new Shape is created each time, and it is retained instead of discarded at the end of the method, because it was added to the display list).

Make line a field variable, and instead of

var line:Shape = new Shape (); 
// I took @Marty Wallace's suggestion and went with Shape here

call

line.graphics.clear();

at the beginning of the moveBalls method.

How do I clear the old lines off the screen?

2 Answers2