: Circular ProgressBar Animation 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:

@Karen819

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

Vote Up Vote Down

@Ogunnowo857

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));
}

Vote Up Vote Down