Autofill a polygon in real time [AS3]

programming flash
1

I am creating a game where I have some red balls on the screen and some blue balls on the screen and I would like to draw a polygon around all balls of the same color and have this polygon automatically fill as soon as the polygon shape is closed.

Would really appreciate some help on how to achieve this as I haven’t really done much with the drawing API before.

My current code will allow me to draw a polygon and for it to fill when I release the mouse but what I would like it to do is automatically fill as soon as the shape is closed.

Here is my code so far




 
var graphix = new MovieClip();
addChild(graphix);
var points:Array = [];
 
stage.addEventListener(MouseEvent.MOUSE_DOWN, startDrawing);
 
function startDrawing(e:MouseEvent):void
{
 points = [];
 graphix.graphics.clear();
 graphix.graphics.lineStyle(1);
 graphix.graphics.moveTo(stage.mouseX, stage.mouseY);
 
 points.push(new Point(stage.mouseX, stage.mouseY));
              
 stage.addEventListener(MouseEvent.MOUSE_MOVE, plotPoint);
 stage.addEventListener(MouseEvent.MOUSE_UP, fillShape);
}
 
function plotPoint(e:MouseEvent):void
{
 graphix.graphics.lineTo(stage.mouseX, stage.mouseY);
 points.push(new Point(stage.mouseX, stage.mouseY));
 
 
}
 
function fillShape(e:MouseEvent):void
{
 stage.removeEventListener(MouseEvent.MOUSE_MOVE, plotPoint);
 stage.removeEventListener(MouseEvent.MOUSE_UP, fillShape);
 
 graphix.graphics.clear();
 graphix.graphics.lineStyle(1);
 graphix.graphics.beginFill(0xFF9900);
 graphix.graphics.moveTo(points[0].x, points[0].y);

 for(var i:uint = 1; i < points.length; i++)
 {
  graphix.graphics.lineTo(points*.x, points*.y);
 }
 
 graphix.graphics.lineTo(points[0].x, points[0].y);
 graphix.graphics.endFill();
 

}