AS3 Dotted Line Class

Here is an ActionScript 3 class I use all the time to draw pixel perfect dotted lines in Flash. You can set the line width, line height, color, alpha, dot width, and dot spacing. Simple but useful!

Dotted line preview:

Dotted line usage:

  1. import com.warmforestflash.drawing.DottedLine;
  2. var s:Shape = new DottedLine(630, 1, 0×603120, 0.9, 1, 2);
  3. addChild(s);

Dashed line preview:

Dashed line usage:

  1. import com.warmforestflash.drawing.DottedLine;
  2. var s:Shape = new DottedLine(630, 1, 0×603120, 0.9, 10, 8);
  3. addChild(s);

» Download the zip containing the class and the above samples

Feel free to use it in whatever way you see fit.

__

Related posts:

  1. Flash AS3 Contact Form Using PHP
  2. Free AS3 Scrollbar: Fullscreen and Resizable
  3. Accessible Flash Nav: Right-Click Links to Open in New Window Using AS3
  4. Simple Sanity-Saving Tip for All Timeline-Based Flash Projects
  5. Top 8 Resources for Learning ActionScript 3

31 Responses to “AS3 Dotted Line Class”


  1. 1 pozeat

    thank you !

  2. 2 espy

    Wonderful, just what I need. Thanks!

  3. 3 marc

    Thanks! works like a charm.

  4. 4 KJ

    That’s pretty sweet. Just what I’m looking for, might give it a try. I take it when you increase dot widths, they are perfect circles?

  5. 5 Jay

    @KJ

    Actually they are rectangular rather than circular once they get bigger.

  6. 6 Govindaya

    I just feel like commenting :) Good stuff!

  7. 7 rdh

    How to make the line width follow the stage width? I’m no script heroes…

    Anyway…nice stuff!

  8. 8 Jay

    @rdh

    You should be able to just redraw the line in your stage resize function and use the stage width as the line width. Something like the following:

    private function onStageResize(e:Event = null):void
    {
    var s:Shape = new DottedLine(stage.stageWidth, 1, 0×603120, 0.9, 1, 2);
    addChild(s);
    }

    Hope that helps.

    -Jay

  9. 9 ilike2flash

    Thanks, this class is very useful.

  10. 10 marcus

    thanks!

  11. 11 karthik

    Hi, This is a very smart way to generate dotted/dashed lines. Thanks for the useful class that you have written.
    I have a quick question: If I want to draw a dashed line between two given points, how should I go about it ? (I mean, I want to have a dashed line that is not necessarily horizontal). Thanks.
    Karthik

  12. 12 Jay

    @karthik

    It’s not really setup to easily connect to two points but for non-horizontal lines you can just use the rotation property to rotate it.

    -Jay

  13. 13 Adrian Parr

    If you need to draw dashed lines between two points you should check out Andy Woodruff’s DashedLine class.

    http://www.cartogrammar.com/blog/drawing-dashed-lines-with-actionscript-3/

    I’ve used it in a project and it worked perfectly.

  14. 14 Todd Hamilton

    Thanks for this !

    A note to Flex programmers.
    Don’t forget to wrap “this” with a UIComponent before adding
    it as a child to your containers.

    Also change the graphics.drawRect to always use x=0 and y=0
    and then set your x and y with the UIComponent wrapper..

    Todd

    private function drawDottedLine():void
    {
    ..
    ..
    ..
    graphics.drawRect(0, 0, _w, _h);
    graphics.endFill();

    //*************************************************************
    // Wrap the Display object in a UIComponent so it can be
    // displayed in the pageContainer (which is a UIComponent )
    //*************************************************************
    hComp = new UIComponent();
    hComp.addChild(this);
    _pageContainer.addChild(hComp);
    hComp.x = _x;
    hComp.y = _y;

    }

  15. 15 jmedina

    thanks!! great class!

  16. 16 Scott

    Great thanks for making this available, really useful.

    I did notice that dotAlpha isn’t given a datatype in the class DottedLine method, even though it will work without.

  17. 17 lauritz

    hi, thanks for the class! i’ve added a little bit of code to your class to automatically redraw the line when you change the width or height of the shape:


    //---------------------------------------
    // GETTER / SETTERS
    //---------------------------------------

    /**
    * Get and Set width
    */
    override public function get width():Number
    {
    return _w;
    }

    /**
    * @private
    */
    override public function set width(value:Number):void
    {
    if (value !== _w)
    {
    _w = Math.round(value);

    drawDottedLine();
    }
    }

    /**
    * Get and Set height
    */
    override public function get height():Number
    {
    return _h;
    }

    /**
    * @private
    */
    override public function set height(value:Number):void
    {
    if (value !== _h)
    {
    _h = Math.round(value);

    drawDottedLine();
    }
    }

  18. 18 karthik

    thank you for your response ! :)

  19. 19 chandra shekar

    HI,
    Iam using this class in flex as iam adding it intially by intialising values and i added to ui component and then i added to canvas but the line is displaying and dashed lines are not displaying here below is my code pls reply me ASAP it is urgent.
    var s:Shape = new DottedLine(1, 800,0x0600D8, 0.9, 10,4);
    dasedcompnt.graphics.drawRect(0,0,1,4)
    dasedcompnt.graphics.endFill();
    // s.graphics.drawRect(0,0,1,4)
    var uicomponent:UIComponent = new UIComponent;
    uicomponent.addChild(s);
    uicomponent.height = 800;
    dashedCanvas.addChild(uicomponent);

  20. 20 Jay

    @chandra

    I don’t really use Flex so I’m not sure but if you scroll up a few comments someone else posted some advice for using this in Flex. Hope that helps.

    -Jay

  21. 21 Arjun Mehta

    Jay, I hope you don’t mind me mentioning this, and I’m not sure if this would be useful for you or anyone else here, but I’ve developed a couple classes for drawing dotted/dashed circles.

    I wanted to mention it because I’ve definitely found the need for drawing straight dotted/dashed lines. But it’s quite difficult to draw circles using this method!!

    So, I hope it’s useful for you all.

  22. 22 Jay

    @Arjun Mehta

    Awesome class and thanks for sharing. I’m sure others will find it useful.

    -Jay

  23. 23 Adrian

    When I rotate the lines they sometimes disappear…

  24. 24 aravindakumar

    hi,
    Thanks for this class.how to draw dotted line vertically?help me

  25. 25 Scott

    Great little class, could this be used to make a pattern, maybe like a horizontal scanline pattern?

  26. 26 firos

    Thanks buddy!
    You saved my time a lot.

  27. 27 ManuelS.

    Thx for the class!

    To redraw if the w changes, i did two things:
    1. i added the variables on top of the class:

    private var tile:BitmapData;
    private var r1:Rectangle;
    private var r2:Rectangle;

    2. i added a light weight redraw function (tile, r1, r2 have all ready been created):

    private function redrawDottedLine():void{
    graphics.clear();
    graphics.beginBitmapFill(tile, null, true);
    graphics.drawRect(0, 0, _w, _h);
    graphics.endFill();
    }

    For Flex-User, u can also extend the class by SpriteVisualElement instead of Shape:

    public class DottedLine extends SpriteVisualElement {…}

    So u dont have to wrap anything. But Shape of course has better performance?!

  28. 28 Philip

    @aravindakumar, I also needed vertical lines (which it doesn’t support, other than rotating the horizontal line). So I made a quick (crude) modification:

    DottedLineVertical: http://pastie.org/2309944
    DottedLineHorizontal: http://pastie.org/2309952

    Hope this helps someone.

  29. 29 san

    hey i’m using type nav #8 menu for my website and i wanna increase the font size can anyone tell me how ?
    thank u.

  1. 1 "gemalte" Linie zeichen - Flashforum
  2. 2 gepunktete - linie mit AS3? - Flashforum

Leave a Reply