{"id":641,"date":"2008-09-09T11:50:39","date_gmt":"2008-09-09T16:50:39","guid":{"rendered":"http:\/\/www.pixelwit.com\/blog\/?p=641"},"modified":"2009-08-15T18:56:58","modified_gmt":"2009-08-15T23:56:58","slug":"animated-arc-drawing","status":"publish","type":"post","link":"https:\/\/www.pixelwit.com\/blog\/2008\/09\/09\/animated-arc-drawing\/","title":{"rendered":"Animated Arc Drawing"},"content":{"rendered":"

A recent comment on my Oval Drawing Tutorial<\/a> asks how to “give the appearance that an oval is being drawn slowly”. Hmmm… this sounds like a job for my handy Arc Drawing Function<\/a>.<\/p>\n

Slowly drawing (or revealing) a circle can be achieved by drawing arcs of an ever-increasing size until the arc is so big that it comes back to the beginning and makes a full circle. The same is true with ovals. First let’s take a look at the basic code for drawing an arc of a circle:<\/p>\n

\/\/<\/span>
\nfunction<\/span> drawArc(<\/span>centerX, centerY, radius, startAngle, arcAngle, steps)<\/span>{<\/span>
\n    var<\/span> twoPI = 2<\/span> *<\/span> Math<\/span>.PI<\/span>;
\n    var<\/span> angleStep = arcAngle\/<\/span>steps;
\n    var<\/span> xx = centerX + Math<\/span>.cos<\/span>(<\/span>startAngle *<\/span> twoPI)<\/span> *<\/span> radius;
\n    var<\/span> yy = centerY + Math<\/span>.sin<\/span>(<\/span>startAngle *<\/span> twoPI)<\/span> *<\/span> radius;
\n    moveTo<\/span>(<\/span>xx, yy)<\/span>;
\n    for<\/span>(<\/span>var<\/span> i=1<\/span>; i<<\/span>=steps; i++)<\/span>{<\/span>
\n        var<\/span> angle = startAngle + i *<\/span> angleStep;
\n        xx = centerX + Math<\/span>.cos<\/span>(<\/span>angle *<\/span> twoPI)<\/span> *<\/span> radius;
\n        yy = centerY + Math<\/span>.sin<\/span>(<\/span>angle *<\/span> twoPI)<\/span> *<\/span> radius;
\n        lineTo<\/span>(<\/span>xx, yy)<\/span>;
\n    }<\/span>
\n}<\/span>
\nlineStyle<\/span>(<\/span>20<\/span>, 0xFF0000)<\/span>;
\ndrawArc(<\/span>250<\/span>, 250<\/span>, 200<\/span>, 45<\/span>\/<\/span>360<\/span>, -270<\/span>\/<\/span>360<\/span>, 100<\/span>)<\/span>;
\n\/\/<\/span><\/div><\/div>\n\n\n\t\n\t\n\t\n\t\n\t\t\n\t\n\t<\/object>\n\t\n<\/object>\n

That's sort of helpful, but we want to animate the drawing of an oval, not a circle, so we need to modify the DrawArc function to draw segments of an oval rather than segments of a circle. Here's what the new ActionScript looks like:<\/p>\n

\/\/<\/span>
\n\/\/ Split "radius" variable into "xRradius" and "yRradius" varianbles.<\/span>
\nfunction<\/span> drawArc(<\/span>centerX, centerY, xRadius, yRadius, startAngle, arcAngle, steps)<\/span>{<\/span>
\n    var<\/span> twoPI = 2<\/span> *<\/span> Math<\/span>.PI<\/span>;
\n    var<\/span> angleStep = arcAngle\/<\/span>steps;
\n    \/\/<\/span>
\n    \/\/ Scale X and Y radius separately.<\/span>
\n    var<\/span> xx = centerX + Math<\/span>.cos<\/span>(<\/span>startAngle *<\/span> twoPI)<\/span> *<\/span> xRadius;
\n    var<\/span> yy = centerY + Math<\/span>.sin<\/span>(<\/span>startAngle *<\/span> twoPI)<\/span> *<\/span> yRadius;
\n    moveTo<\/span>(<\/span>xx, yy)<\/span>;
\n    for<\/span>(<\/span>var<\/span> i=1<\/span>; i<<\/span>=steps; i++)<\/span>{<\/span>
\n        var<\/span> angle = startAngle + i *<\/span> angleStep;
\n        \/\/<\/span>
\n        \/\/ Scale X and Y radius separately.<\/span>
\n        xx = centerX + Math<\/span>.cos<\/span>(<\/span>angle *<\/span> twoPI)<\/span> *<\/span> xRadius;
\n        yy = centerY + Math<\/span>.sin<\/span>(<\/span>angle *<\/span> twoPI)<\/span> *<\/span> yRadius;
\n        lineTo<\/span>(<\/span>xx, yy)<\/span>;
\n    }<\/span>
\n}<\/span>
\nlineStyle<\/span>(<\/span>20<\/span>, 0xFF0000)<\/span>;
\n\/\/<\/span>
\n\/\/ Call function with new X and Y radius variables.<\/span>
\ndrawArc(<\/span>250<\/span>, 150<\/span>, 200<\/span>, 100<\/span>, 45<\/span>\/<\/span>360<\/span>, -270<\/span>\/<\/span>360<\/span>, 100<\/span>)<\/span>;
\n\/\/<\/span><\/div><\/div>\n\n\n\t\n\t\n\t\n\t\n\t\t\n\t\n\t<\/object>\n\t\n<\/object>\n

Now that we can handle drawing small segments of an oval, we need to animate the process by drawing a series of larger and larger arc segments until they come together to form a complete oval. To do this we'll use an \"onEnterFrame\" event and a new \"animateArc\" function to increment a variable and draw a series of expanding arcs. Read the comments to follow along:<\/p>\n

\/\/<\/span>
\n\/\/<\/span>
\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/<\/span>
\n\/\/ H O W   T O   D R A W   A N   O V A L   S E G M E N T  \/\/\/\/\/<\/span>
\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/<\/span>
\nfunction<\/span> drawArc(<\/span>centerX, centerY, xRradius, yRadius, startAngle, arcAngle, steps)<\/span>{<\/span>
\n    var<\/span> twoPI = 2<\/span> *<\/span> Math<\/span>.PI<\/span>;
\n    var<\/span> angleStep = arcAngle\/<\/span>steps;
\n    var<\/span> xx = centerX + Math<\/span>.cos<\/span>(<\/span>startAngle *<\/span> twoPI)<\/span> *<\/span> xRradius;
\n    var<\/span> yy = centerY + Math<\/span>.sin<\/span>(<\/span>startAngle *<\/span> twoPI)<\/span> *<\/span> yRadius;
\n    moveTo<\/span>(<\/span>xx, yy)<\/span>;
\n    for<\/span>(<\/span>var<\/span> i=1<\/span>; i<<\/span>=steps; i++)<\/span>{<\/span>
\n        var<\/span> angle = startAngle + i *<\/span> angleStep;
\n        xx = centerX + Math<\/span>.cos<\/span>(<\/span>angle *<\/span> twoPI)<\/span> *<\/span> xRradius;
\n        yy = centerY + Math<\/span>.sin<\/span>(<\/span>angle *<\/span> twoPI)<\/span> *<\/span> yRadius;
\n        lineTo<\/span>(<\/span>xx, yy)<\/span>;
\n    }<\/span>
\n}<\/span>
\n\/\/<\/span>
\n\/\/<\/span>
\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/<\/span>
\n\/\/ O V A L   P R O P E R T I E S \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/<\/span>
\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/<\/span>
\nvar<\/span> cntrX = 250<\/span>;    \/\/ Center of the oval on the X axis.<\/span>
\nvar<\/span> cntrY = 150<\/span>;    \/\/ Center of the oval on the Y axis.<\/span>
\nvar<\/span> radiusX = 200<\/span>;  \/\/ Width of the oval.<\/span>
\nvar<\/span> radiusY = 100<\/span>;  \/\/ Height of the oval.<\/span>
\nvar<\/span> angle = -70<\/span>\/<\/span>360<\/span>;\/\/ Angle of the first point on the oval.<\/span>
\nvar<\/span> arc = 360<\/span>\/<\/span>360<\/span>;  \/\/ How big the arc will be when it's done.<\/span>
\nvar<\/span> endSides = 100<\/span>; \/\/ How many sides the arc will have when complete.<\/span>
\nvar<\/span> lineWidth = 20<\/span>; \/\/ Width of the line.<\/span>
\nvar<\/span> lineColor = 0xFF0000;\/\/ Color of the line.<\/span>
\n\/\/<\/span>
\n\/\/<\/span>
\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/<\/span>
\n\/\/ A N I M A T I O N   P R O P E R T I E S \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/<\/span>
\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/<\/span>
\nvar<\/span> count = 0<\/span>;      \/\/ Tracks how long the animation has been going.<\/span>
\nvar<\/span> frames = 150<\/span>;   \/\/ Sets how long the animation will last.<\/span>
\n\/\/<\/span>
\n\/\/ <\/span>
\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/<\/span>
\n\/\/ A N I M A T E   G R O W I N G   O V A L   S E G M E N T  \/\/\/<\/span>
\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/<\/span>
\nfunction<\/span> animateArc(<\/span>)<\/span>{<\/span>
\n    \/\/<\/span>
\n    \/\/ Remove old arc segment.<\/span>
\n    clear<\/span>(<\/span>)<\/span>;
\n    \/\/<\/span>
\n    \/\/ Reset line width and color after being cleared.<\/span>
\n    lineStyle<\/span>(<\/span>lineWidth, lineColor)<\/span>;
\n    \/\/<\/span>
\n    \/\/ Note that a frame has passed.<\/span>
\n    count++;
\n    \/\/<\/span>
\n    \/\/ Determine how far along the animation is.<\/span>
\n    var<\/span> ratio = count\/<\/span>frames;
\n    \/\/<\/span>
\n    \/\/ Determine how big the arc is.<\/span>
\n    var<\/span> arcRatio = arc *<\/span> ratio;
\n    \/\/<\/span>
\n    \/\/ Determine how many sides the arc segment has.<\/span>
\n    var<\/span> sidesRatio = Math<\/span>.floor<\/span>(<\/span>endSides *<\/span> ratio)<\/span>;
\n    \/\/<\/span>
\n    \/\/ Draw the arc with its newly determined properties.<\/span>
\n    drawArc(<\/span>cntrX, cntrY, radiusX, radiusY, angle, arcRatio, sidesRatio)<\/span>;
\n    \/\/<\/span>
\n    \/\/ Stop animating if the arc is complete.<\/span>
\n    if<\/span>(<\/span>count == frames)<\/span>{<\/span>
\n        onEnterFrame<\/span> = null<\/span>;
\n    }<\/span>
\n}<\/span>
\n\/\/<\/span>
\n\/\/ Start animating the drawing of the oval.<\/span>
\nonEnterFrame<\/span> = animateArc;
\n\/\/<\/span>
\n\/\/ <\/span>
\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/<\/span>
\n\/\/ R E S E T   A N I M A T I O N   O N   M O U S E   C L I C K  \/\/\/<\/span>
\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/<\/span>
\nonMouseDown<\/span> = function<\/span> (<\/span>)<\/span>{<\/span>
\n    count = 0<\/span>;
\n    onEnterFrame<\/span> = animateArc;
\n}<\/span>
\n\/\/<\/span>
\n\/\/<\/span><\/div><\/div>\n\n\n\t\n\t\n\t\n\t\n\t\t\n\t\n\t<\/object>\n\t\n<\/object>\n

And there you have it, one animation of an oval being drawn.<\/p>\n","protected":false},"excerpt":{"rendered":"

A Flash ActionScript tutorial explaining how to animate the drawing of an oval using an onEnterFrame event.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[8],"tags":[23,45,36,37],"class_list":["post-641","post","type-post","status-publish","format-standard","hentry","category-flash","tag-actionscript","tag-draw","tag-swfs","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts\/641","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/comments?post=641"}],"version-history":[{"count":0,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts\/641\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/media?parent=641"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/categories?post=641"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/tags?post=641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}