Question

I am trying to make a timer and I want a circle that is always shown. It starts out green. As time progress’ a growing red pie slice begins to occupy more and more of the circle until the entire circle is red. Does that make sense?

The restrictions are that I can’t use sprite, so it would have to be done with UIComponent or some other format. Additionally, I can’t use degrafa. The SDK I am using does not support these methods.

UPDATE: Sweet! Thanks for the code. It works like a champ. My only hold back is that the SDK I am using does not support rotation, but I think I can make this all work. Thank you so much!! For others that can’t use sprite, just substitute UIComponent where sprite is.

FOLLOW-UP: I am pretty sure rotate is the only way, but is it possible to make it start at the 12 o’clock position without rotate?

Answer 1

Use another Shape as a mask to perform the reveal.

Code sample for expanding pie wedge

Instantiate your Sprite:

sp = new Sprite();
sp.graphics.beginFill(0xC3C3C3);
drawWedge(sp, 50, 150, 150, ang, 0);
sp.graphics.endFill();
addChild(sp);

Draw wedge code:

private function drawWedge (obj:Sprite, r:Number, x:Number,
                            y:Number, angle:Number, rotation:Number):void {
    // start at 0,0 so rotation will be around the point of the wedge

    obj.graphics.moveTo(0, 0);
    obj.graphics.lineTo(r, 0);

    var TO_RADIANS:Number = Math.PI/180;


    // calculate 30-degree segments for accuracy
    var nSeg:Number = Math.floor(angle/30);   // eg 2 if angle is 80
    var pSeg:Number = angle - nSeg*30;        // eg 20 if angle is 80

    // draw the 30-degree segments
    var a:Number = 0.268;  // tan(15)
    for (var i:Number=0; i < nSeg; i++) {
        var endx:Number = r*Math.cos((i+1)*30*TO_RADIANS);
        var endy:Number = r*Math.sin((i+1)*30*TO_RADIANS);
        var ax:Number = endx+r*a*Math.cos(((i+1)*30-90)*TO_RADIANS);
        var ay:Number = endy+r*a*Math.sin(((i+1)*30-90)*TO_RADIANS);
        obj.graphics.curveTo(ax, ay, endx, endy);   
    }

    // draw the remainder
    if (pSeg > 0) {
        a = Math.tan(pSeg/2 * TO_RADIANS);
        endx = r*Math.cos((i*30+pSeg)*TO_RADIANS);
        endy = r*Math.sin((i*30+pSeg)*TO_RADIANS);
        ax = endx+r*a*Math.cos((i*30 + pSeg-90)*TO_RADIANS);
        ay = endy+r*a*Math.sin((i*30 + pSeg-90)*TO_RADIANS);
        obj.graphics.curveTo(ax, ay, endx, endy);
    }
    obj.graphics.lineTo(0, 0);

    // rotate the wedge to its correct location in the circle
    obj.rotation = rotation;
    obj.x = x;
    obj.y = y;
}

Then us this in your animate code:

if (ang > -1) {
    sp.graphics.clear();
    sp.graphics.beginFill(0xC3C3C3);
    drawWedge(sp, 50, 150, 150, ang, 0);
    ang--; //angle to decrease
}