How to create multiple colors when expanding circle shape AS3?

Question

So I am trying to figure out how to do this or if even possible. I create my circle shape dynamically through code and want to be able upon mouse_UP have the circle stop and when the mouse_DOWN is triggered have the circle keep expanding but with a new color. So on and so on adding new colors every time. I have the code setup to where it expands on mouse_DOWN and it changes color but it changes the whole circle color which is not what I want.

Here is the code I have:

//Create circle

//MC's 
        circle = new Shape();
        circle.graphics.beginFill(0x990000, 1); // Fill the circle with the color 990000
        circle.graphics.drawCircle((stage.stageWidth) / 2, (stage.stageHeight ) / 2, cirRadius); // Draw the circle, assigning it a x position, y position, raidius.
        circle.graphics.endFill(); // End the filling of the circle
        addChild(circle); // Add a child

//Enter Frame Function

private function logicHandler(e:Event):void 
    {
        if (bDown)  // Have New color Expand from prev point with new color
        {
            cirRadius ++;
            circle.graphics.beginFill(randColor, 1); // Fill the circle with the color 990000
            circle.graphics.drawCircle((stage.stageWidth) / 2, (stage.stageHeight ) / 2, cirRadius);

        }
    }

//Mouse Listeners

private function onUp(e:MouseEvent):void 
    {
        bUp = true;
        bDown = false;
        trace("onUp");
        circle.graphics.endFill();
    }

    private function onDown(e:MouseEvent):void 
    {
        bDown = true;
        bUp = false;
        trace("onDOWN");
        randColor = Math.random() * 0xFFFFFF;
    }

This is what I am aiming for:

Answer 1

You need a bit of logic here. Not tested, but I think it'll work.

var aColor:uint;
var aRadius:int;
var aShape:Shape;

// Subscribe for MOUSE_DOWN event.
stage.addEventListener(MouseEvent.MOUSE_DOWN, onDown);

function onDown(e:MouseEvent):void
{
    // Set up the new color.
    changeColor();

    // Set up the new circle and assign its reference to the variable.
    // The previous shape, if any, doesn't get destroyed,
    // just no longer accessible via the same variable.
    aShape = new Shape;
    aShape.x = stage.stageWidth / 2;
    aShape.y = stage.stageHeight / 2;
    aShape.graphics.lineStyle(0, 0x000000);

    // Put it UNDER all the other circles.
    addChildAt(aShape, 0);

    // Turn ENTER_FRAME handler on.
    addEventListener(Event.ENTER_FRAME, onFrame);

    // Prepare to intercept the MOUSE_UP event.
    stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
}

function onFrame(e:Event):void
{
    // Increase the radius.
    aRadius++;

    // Draw the circle inside the last added shape.
    aShape.graphics.clear();
    aShape.graphics.beginFill(aColor);
    aShape.graphics.drawCircle(0, 0, aRadius);
    aShape.graphics.endFill();
}

function onUp(e:MouseEvent):void
{
    // Turn ENTER_FRAME handler OFF.
    removeEventListener(Event.ENTER_FRAME, onFrame);

    // Stop intercepting the MOUSE_UP event.
    stage.removeEventListener(MouseEvent.MOUSE_UP, onUp);
}

function changeColor():void
{
    aColor = 0x1000000 * Math.random();
}