Circular ProgressBar Animation

Question

I want to create a simple circular progress animation with either Adobe After Effect or Adobe Flash or any other software that you may suggest. Something like this:

Assuming that the graphic assets are available and I only want the filling animation. I guess that I need some masking technique to create the filling motion. But I have no idea how to create a growing circular mask. If it was a horizontal progress, I would only need to resize the mask to reveal the underlying layer gradually. But what about this? Any suggestion would be appreciated.

Answer 1

In a pinch, After Effects has a transition effect called "Clock Wipe"… !

Answer 2

You can draw arbitrary shapes using Flash's Graphics class. That said, it sounds like you just need the final animation, so this is probably overkill, but if you drop this code on the timeline it will draw a pie style progress mask. You can edit the size (and increase the segments if it looks rough) using the consts.

import flash.display.Sprite;
import flash.display.GraphicsPath;
import flash.events.Event;

const INNER_RADIUS:Number = 50;
const OUTER_RADIUS:Number = 70;
const SEGMENTS_PER_RADIAN:uint = 10;

var maskGraphic:Sprite = new Sprite();
maskGraphic.x = stage.stageWidth * 0.5;
maskGraphic.y = stage.stageHeight * 0.5;
addChild(maskGraphic);

addEventListener(Event.ENTER_FRAME, tick);
var percentage:Number = 0;
function tick(e:Event):void {
    percentage += 0.5;
    drawProgress(percentage);
}

function drawProgress(percentage:Number):void {
    percentage = percentage > 100? percentage % 100 : percentage;

    maskGraphic.graphics.clear();
    maskGraphic.graphics.beginFill(0xFF00FF, 1.0);

    var outerEdge:GraphicsPath = new GraphicsPath();
    var innerEdge:GraphicsPath = new GraphicsPath();

    var radians:Number = percentage * 0.01 * Math.PI * 2;
    var divisions:uint = Math.round(radians * SEGMENTS_PER_RADIAN);
    var ang:Number;
    for (var i:uint = 0; i <= divisions; i++) {
        ang = i / divisions * radians;
        outerEdge.lineTo(Math.sin(ang) * OUTER_RADIUS, -Math.cos(ang) * OUTER_RADIUS);
        ang = (divisions - i) / divisions * radians;
        innerEdge.lineTo(Math.sin(ang) * INNER_RADIUS, -Math.cos(ang) * INNER_RADIUS);
    }
    maskGraphic.graphics.moveTo(Math.sin(0) * OUTER_RADIUS, -Math.cos(0) * OUTER_RADIUS);
    maskGraphic.graphics.drawPath(outerEdge.commands.concat(innerEdge.commands), outerEdge.data.concat(innerEdge.data));
}