Drawing dashed lines with ActionScript 3

Drawing in Flash dynamically with ActionScript is a jolly fun time, but when doing so one of course lacks some of the finer controls of drawing the graphics manually in the Flash authoring environment. One such deficiency is dashed lines, so a while back I made a simple DashedLine class in AS3 to use here and there in my projects.

It’s basically a Sprite that has simple drawing methods with dashed lines. Just make a new instance, providing the line width, color, and an array of alternating dash and gap lengths (in pixels). Then call moveTo() and lineTo() methods directly on the Sprite, not its graphics property. (You can also do beginFill() if you want.) For example:

Dashed line triangle

var dashy:DashedLine = new DashedLine(1,0x339933,new Array(8,4,2,4));
dashy.moveTo(0,50);
dashy.lineTo(100,0);
dashy.lineTo(200,50);
dashy.lineTo(300,0);
addChild(dashy);

Try it out below!

This is by no means complete, as I’d like to add the rest of the usual drawing methods (curves are going to be tricky) and resolve the bugs that surely exist.  For now, though, download the DashedLine class as is; hopefully it’ll make sense through the basic comments I’ve included.

DashedLine.as
dashTest.zip (AS file plus the above demo FLA)

Tagged ,

52 Comments

  1. Hi, nice class .. if you allow i might add some stuff on this and add it on my blog for other people to download.

    Good work

    bilal
    3 August 2008 @ 3:48pm

  2. Hi!
    Thanks a lot for this class! Very useful!
    seb

    seb
    11 September 2008 @ 4:13am

  3. Thanks very much for this buddy, flash community strikes again! lol

    doofmoof
    22 September 2008 @ 7:39pm

  4. Really nice work mate cheers

    steve
    21 November 2008 @ 8:21am

  5. Hey cool Class, unfortunately it does not scale correctly. When i re-size the window the proportions get out of whack. Other then that’s thanks for making the class, you interface work is superb!

    Andrew Garrahan
    16 December 2008 @ 1:11pm

  6. Hello again, I fixed my problem, by setting the lineStyle scale mode form ‘none’ to ‘normal’ then every thing scaled correctly. You rock!!!!

    Andrew Garrahan
    17 December 2008 @ 12:41am

  7. Hey,
    Awsome class, just what I needed. There is only one complaint, to use it with strict mode u have to do a lot of editing – its a huge pain in the ass so please compile the code with strict mode before publishing :)
    Thanks!

    chris
    19 January 2009 @ 9:43am

  8. you rock!!!!!!!!!!!!111

    c.senthil kumaran
    23 January 2009 @ 3:51am

  9. Yikes! Try never to use while loops. You’re code crashes the flash player:

    2/10/09 2:07:41 PM [0x0-0x76d76d].Adobe Flash CS3[58569] [DashedLine.as$128, , app.view, app.view, , app.view:DashedLine, app.view:DashedLine, app.view:DashedLine, flash.display:Sprite, flash.display:DisplayObjectContainer, flash.display:InteractiveObject, flash.display:DisplayObject, flash.events:EventDispatcher, Object]::outerLoop in DashedLine.as not resolved

    Ben McMaster
    10 February 2009 @ 5:17pm

  10. Hmm, I’ve never seen such an error. That’s due to a while loop? I’ve not known this to crash on the while loop… curious what might lead to that. (But yeah, in my early days it was some time before I wrote my first while loop that didn’t cause Flash to explode.)

    Andy Woodruff
    17 February 2009 @ 10:27pm

  11. Nice work. I’d like to use this, but I can’t get it to draw a 1 px dashed line. It always seems to be at least 2 px wide. I can get 1 px gaps and lendths, but not lineweight. Don’t know why….

    pythagoras
    20 February 2009 @ 3:13pm

  12. O.K, settting pixelHinting to true allows a 1px lineWeight but then var dashy:DashedLine = new DashedLine(1,0xffffff,new Array(1,1,1,1)); produced a straight unbroken line (not 1px dashed line with 1 px gaps.) it seems the most precise line I can get is: var dashy:DashedLine = new DashedLine(1,0xffffff,new Array(1,2,1,2));

    Also for Flex users: If adding as child to a container like canvas, make it extend UIComponent – not Sprite. Thanks for the Class!

    pythagoras
    20 February 2009 @ 3:21pm

  13. Thanks for the report, pythagoras. I can’t seem to reproduce that problem, though. A 1px line is showing up as it should for me. I haven’t tried this in Flex yet (as it sounds like you are), but that doesn’t seem like it should make a difference. Not sure what to suggest…

    Andy Woodruff
    20 February 2009 @ 3:46pm

  14. Hey, are you crazy? No type declarations? void, number, there are good to have in code too.

    But thanks for class

    guest
    16 March 2009 @ 9:38am

  15. Yes.

    Andy Woodruff
    16 March 2009 @ 11:15am

  16. This is great. It’s just what I was looking for, for a project I’m working on. If you’re interested to see how I’m using it, take a look at my website.

    Sam
    19 March 2009 @ 8:03pm

  17. this is useful thanks!

    but please type all your variables/functions, it made it a real pain to fix as I was getting tons of warning every time I tried compiling

    Logan
    20 March 2009 @ 12:00am

  18. lovely, and if i want typed variables and functions and all that c***, well, i can add them myself ;)
    thanks for sharing your work!

    Nick Watton
    20 March 2009 @ 11:03am

  19. Hi, this class it’s amazing!

    Idemax
    16 May 2009 @ 7:15am

  20. Nice job! And screw type hinting; I’ve been successfully ignoring compiler warnings for about four years now….we like to use a little trick called “unit testing” where I work. Or we just switch to Python.

    Christine
    28 June 2009 @ 9:11pm

  21. Okay, I’ve spent the 30 seconds required to add types to the code. Download links are still those in the post. Apologies for the time and millions of dollars lost because of it!

    Andy Woodruff
    18 September 2009 @ 9:48pm

  22. Hi, when I try this, I get the following error message:

    1067: Implicit coercion of a value of type String to an unrelated type int.

    nicolaj ma
    29 November 2009 @ 5:12pm

  23. Does it tell you where the error occurred? (i.e. the line number) I may have something wrong in there…

    Andy Woodruff
    30 November 2009 @ 4:56pm

  24. Sorry forgot to add that:

    DashedLine.as, Line 54
    for (var i:int in lengthsArray.length){

    nicolaj ma
    9 December 2009 @ 10:59am

  25. Sorry for being slow to reply here…

    It looks like an extra “.length” found its way into that line somehow. On line 54 I just have:

    for (var i:int in lengthsArray){

    Andy Woodruff
    17 December 2009 @ 3:42pm

  26. Very Handy , thank you Andy

    reed
    22 December 2009 @ 6:59pm

  27. Thank you for this. This is quite useful! I’ve needed to draw dotted/dashed lines for a few applications I’m working on.
    I’ve also created a couple classes for drawing dotted or dashed circles easily. I figured I’d mention that here in case anyone is looking for it.

    Arjun Mehta
    24 December 2009 @ 4:46pm

  28. Andy > Hmm, guess you’re right have the same, but I still have the problem with
    for (var i:int in lengthsArray){

    ???

    Nicolaj
    28 December 2009 @ 8:20am

  29. Just change the Line to:

    for (var i:int=0; i<lengthsArray.length; i++){

    Mortimer Neuß
    1 January 2010 @ 2:47am

  30. Thanks that worked!

    Nicolaj
    1 January 2010 @ 12:01pm

  31. Thanks this class is very well coded ;) !

    Marcus
    4 February 2010 @ 10:28pm

  32. Here’s a simple function to change the color (including alpha) of what have been and what will be drawn.

    // set a new color, including alpha, and change the already drawed line
    public function changeColor(c:Number,a:Number=1):void {
    lineColor = c;
    lineAlpha = a;
    stroke.graphics.lineStyle(lineWeight, lineColor, lineAlpha, false, “none”, CapsStyle.NONE);

    var newColor:ColorTransform = new ColorTransform();
    newColor.alphaOffset = a;
    newColor.color = c;
    stroke.transform.colorTransform = newColor;
    }

    MT
    2 March 2010 @ 8:20am

  33. Great class, was looking for something just like this. But I got the same error mentioned above:
    “1067: Implicit coercion of a value of type String to an unrelated type int. DashedLine.as, Line 54
    for (var i:int in lengthsArray.length){”

    Luckily the solution was a couple of posts below:
    “Just change the Line to:
    for (var i:int=0; i<lengthsArray.length; i++){
    Mortimer Neuß"

    Thanks!!!

    Edwin
    9 April 2010 @ 1:33pm

  34. Thanks, class is working great! :)

    Luka
    21 April 2010 @ 5:54am

  35. Great Work, Thanks!

    Mathias
    12 July 2010 @ 4:49am

  36. Thank you! I took your class and refactored it for my use as a helper: http://bit.ly/a97eBr

    kommanderhasta
    13 November 2010 @ 7:21am

  37. This is a FANTASTIC little class! Just wondering if you ever got curves added to this guy or not? Would love to see that addition, if you have it.

    Michael Novotny
    29 March 2011 @ 3:15pm

  38. Michael, I’ll have to confess that no, I never did get any curves going. I probably haven’t even looked at this code in a good two years, in fact. But I wouldn’t be surprised if someone out there has some dashed curves by now!

    Andy Woodruff
    30 March 2011 @ 10:55am

  39. I wasn’t expecting that you had kept the code under development. But it never hurts to ask, right? =) Thanks for the reply!

    Michael Novotny
    6 April 2011 @ 2:34pm

  40. Good work! Now, it`s clear.

    fotograf śmigiel
    26 April 2011 @ 5:59am

  41. Nice. Thanks for sharing. Saved me a few hours doing my own!

    One thing I changed – I added a method for changing the dot/dash array after construction because I need to be able to do that.

    Guy
    23 May 2011 @ 2:43am

  42. Thanks :)

    Anne H
    8 November 2011 @ 7:31pm

  43. slight modification needed when used in FlashDevelop but all in all, thanks a million for this class!

    Harry
    22 February 2012 @ 4:32am

  44. Thank you very much!! =)

    Jônatas
    31 March 2012 @ 9:06am

  45. Thank you! It’s a very useful class)

    DadUndead
    15 May 2012 @ 10:40am

  46. Thanks! worked as a charm, only correct the for in the initial function, because of mismatch.

    pedro
    31 October 2012 @ 1:39pm

  47. I need to draw a rectangle with this class but I can’t

    Wahid Anwer
    29 October 2013 @ 4:43pm

  48. can Anyone give me the example for creating the rectangle with this class ?

    Wahid Anwer
    29 October 2013 @ 4:45pm