DashedLine AS3 Class

Custom class dependencies: None

Flash of course has built-in styles for line strokes, but none of them accomplished what I needed that CSS seems to do so intelligently. This is a simple dashed line drawn pixel for pixel with no antialiasing. This class attempts to make this process easy to use and control.

What It Does

First it draws a bitmap that will be used as a tile, then repeats that tile for a bitmap fill that will ultimately become the dashed line. The arguments for the class constructor are as follows, which are also available after instantiation through public instance properties:

  • dash:Number – the size of the dash
  • space:Number – the space in between the dashes
  • w:Number – the width of the line
  • h:Number – the height of the line
  • color:String – the hexadecimal value of the dashes (no ‘0x’ needed, though ‘#’ may be included)

Example: A 1000 pixel long red verticle line

var line:DashedLine = new DashedLine();
line.width = 1000;
line.color = "FF0000";
line.rotation = 90;
addChild(line);

Something important to note is that the greatest of the width and height properties is used as the length of the line. The least of these properties is used as the thickness. That means that the line will automatically know if the dashes should be repeating vertically or horizontally. Also, the color property is a 6 digit string to not have to worry about the hexidecimal alpha value.

Comment if you have any questions, or suggestions.


Posted

in

, ,

by

Comments

9 responses to “DashedLine AS3 Class”

    1. jimisaacs Avatar

      Maybe I wanted to post examples, but after I realized how rude your comment actually was.
      I don’t think I will, at least for you.
      You know I’m putting my stuff online, for free. It’s my work, and to get a comment like that sounding like I shouldn’t even have bothered.
      Then maybe I shouldn’t even have bothered.
      Seriously 2 words and expecting some action? This is a comment form on a one man blog, not the buffet line at a corporate lunch.

  1. anon Avatar
    anon

    where are the examples?

    1. jimisaacs Avatar

      I don’t want to sound more rude the comments on this post.
      But seriously? It’s a dashed line, use your imagination.

      var line:DashedLine = new DashedLine(1, 1, 100, 1, “000000″);
      line.x = line.y = 20;
      addChild(line);

      This creates a black dotted line 100 pixels in length. With one pixel for the dashes and spaces, placed and 20 pixels for x and y coordinates.

  2. Karthik Avatar
    Karthik

    Hi there, thanks for the useful class. It is very smart way to implement dashed lines.
    I have a quick question : I want to be able to draw a dashed line between two points/co-ordinates. Using this class, how can I accomplish that ? Thanks for your help !
    Karthik

    1. jimisaacs Avatar

      Well, I can tell you how to do it for any points, but for any kind of diagonals this class won't work quite right anyway. It will work, but the pixels will be blurry and anti-aliased. If that's ok with you, then here is an implementation with my com.jidd.utils.Trig utility class (check out that class for what those functions are returning):

      // pt1 is the first point
      // pt2 is the second point

      var line:DashedLine = new DashedLine(1, 1, Trig.getDistance(pt1, pt2), 1, “000000″);
      line.x = pt1.x;
      line.y = pt1.y;
      Trig.getAngle(pt1, pt2);

      addChild(line);

    2. jimisaacs Avatar

      Well, I can tell you how to do it for any points, but for any kind of diagonals this class won't work quite right anyway. It will work, but the pixels will be blurry and anti-aliased. If that's ok with you, then here is an implementation with my com.jidd.utils.Trig utility class (check out that class for what those functions are returning):

      // pt1 is the first point
      // pt2 is the second point

      var line:DashedLine = new DashedLine(1, 1, Trig.getDistance(pt1, pt2), 1, “000000″);
      line.x = pt1.x;
      line.y = pt1.y;
      line.rotation = Trig.getAngle(pt1, pt2);

      addChild(line);

  3. sdsd Avatar
    sdsd

    usage??

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.