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.


2 Answers 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;

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

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

    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));
  • This is cool David, and thanks for your contribution. I'll try it and report back.
    – Sam R.
    Jun 12, 2013 at 11:37

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


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.