Thoughts and adventures in maps, Flash, visualization, and anything in between

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 ,

7 Comments

  1. [...] Drawing dashed lines with ActionScript 3 [...]

    Kelso’s Corner » Blog Archive » New blog: Cartogrammer
    15 June 2008 @ 2:46pm

  2. 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

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

    seb
    11 September 2008 @ 4:13am

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

    doofmoof
    22 September 2008 @ 7:39pm

  5. [...] GTween Engine (a single .as class) which is required for the class. Andy Woodruff’s DashedLine class is also included, as it is used in the Nightingale [...]

    indiemaps.com/blog » Nightingale’s roses in ActionScript 3
    21 October 2008 @ 4:30am

  6. [...] lightweight GTween Engine (a single .as class) which is required for the class. Andy Woodruff’s DashedLine class is also included, as it is used in the Nightingale [...]

    Kelso’s Corner » Blog Archive » Nightingale’s roses in ActionScript 3 (indiemaps)
    11 November 2008 @ 9:51am

  7. Really nice work mate cheers

    steve
    21 November 2008 @ 8:21am

Leave a Comment