posted over 3 years agoDotted and Dashed Circles using ActionScript 3

While working on a design recently I realized that I was in need of programmatically producing circles with dotted and dashed strokes. Much to my surprise, I found that Actionscript 3 with Flash CS4 cannot draw using a dashed or dotted lineStyle.

After searching online for a solution, I came across a few attempts at drawing dashed and dotted lines, but none (that I could find) enabled the drawing of curves and, more specifically, none of them enabled the drawing of circles with a dotted or a dashed line.

So I decided to tackle the problem using some simple trigonometry and my own limited ability to code. I created my own custom Actionscript classes (dottedCircle.as and dashedCircle.as), which is something I have never attempted before! One of the most useful things I found on my journey making this was Lee Brimelow’s custom arc class, which I used for drawing segments in the dashedCircle class.

The constructor for the dashed circle looks like this: dashedCircle(radius:Number, thickness:Number, dashLength:Number, gapLenth:Number, color:uint, autoSpace:Boolean);.

And the constructor for the dotted circle looks like this: dottedCircle(radius:Number, thickness:Number, gap:Number, color:uint, autoSpace:Boolean);

I should mention that the dashedCircle doesn’t quite render as it should when dash sizes are too small. Surprisingly, this is actually due to the flash renderer having problems rendering small curves accurately. In this case, I should be using straight lines instead of minute curves for the dashes. But for now I’m going to put the classes up as is.

I hope this is helpful for you all! I’m not much of a programmer, but if you have some suggestions, comments or anything more to add, please don’t hesitate.

Also, be on the lookout for a little game that came up while working on these. It’s a simple game that I hope I’ll get to work on a bit over the holiday season!

Download dottedCircle and dashedCircle AS3 Classes