Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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:

ProgrssBar

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.

share|improve this question
2  
Couple code examples come to mind: raphaeljs.com/polar-clock.html and css-tricks.com/css-pie-timer ( working example: codepen.io/HugoGiraudel/pen/BHEwo ) –  Joonas Jun 10 '13 at 10:52

2 Answers 2

up vote 0 down vote accepted

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

share|improve this answer
    
Could you elaborate on this please? –  user May 10 at 9:20
    
Yep—hopefully these images will help! cl.ly/image/2G3r2Z221t3N/… cl.ly/image/1S1D1U3J1d13/… cl.ly/image/153F291A2d3c/… –  markstuckert May 10 at 20:00
    
@markstuckert, thanks. This is great. –  Sam Rad May 11 at 11:10

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));
}
share|improve this answer
    
This is cool David, and thanks for your contribution. I'll try it and report back. –  Sam Rad Jun 12 '13 at 11:37

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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