AS2 + AS3 Draw a Dotted Rounded Corner Box

So you might think that rounded corners is easy in as3 with the new drawing tools. This is only so true if you don’t want it dotted.

Thanks to senocular AS2 DashedLine.as which was easily converted to an as3 version DashedLine.as for as3 we can draw dotted lines and curves with actionscript. This left me with the task of using the quadratic drawing tools (no i didnt add a cubic curveTo to the Dashed line class) to draw circles (or quarters of circles, for the curners), which isnt the easiest, but i’ll spare you the details and simply say, its done!

Using Draw.curvedBox(obj, offsetX, offsetY, width, height, cornerRadius) we can draw into any graphics object (whether it be a normal Sprite.graphics or a DashedLine Object). This is essential as the Dashed line tool doesnt actually give us a fill, so we might need to draw a normal shape for the background.

import com.senocular.drawing.DashedLine
import com.tonp.utils.Draw
var dl = new DashedLine(this,1,5);
dl.lineStyle(3,0x000000,1);
Draw.curvedBox(dl,10,10,100,100,20)

to draw a curved corner box with a fill, or solid outline, send in mc.graphics as the first attribute (or just the mc in as2)

DashedLine.as for as3

Draw.as for as3

Draw.as for as2

So we can now do a box with curved corners in either AS2 or AS3 and in dotted or normal… phew!

26 Responses to “AS2 + AS3 Draw a Dotted Rounded Corner Box”

  1. mnlopez Says:

    Thanks this is just what I needed.

  2. binocle Says:

    Thank you for this nice work. I will use it in the coming version of my site, I’ll show the result ^___^

  3. fiskhandlarn Says:

    Nice one, many thanks!

    I noticed something when testing it though. If you, for example, have an onenterframe that clears the line and draws a new line each frame, the line will “animate” (similar to the marquee tool in photoshop), since the dash offset isn’t reset. This change to the clear-method seems to have done the trick for me:

    public function clear():void {
    this.isLine = true;
    this.overflow = 0;
    this.pen = {x:0, y:0};
    this.target.clear();
    }

    (I have only tested that together with moveTo and lineTo though, don’t know if it will break some of the other methods in there.)

  4. Pwhndvve Says:

    Honi soit legate left buy cytotec then announced estivities.

  5. gil Says:

    THis does not work for me at all

    import dashedline;
    import flash.display.Shape;
    var n= new Shape()
    var dashLines:dashedline = new dashedline(this, 10, 6);
    dashLines.lineStyle(10,0×0000FF,50)
    dashLines.moveTo(50, 50);
    dashLines.lineTo(100, 50);

  6. Neil Says:

    You need to add your shape n to the display list

    eg. addChild(n);

  7. Milfont Says:

    Hey thanks! The only thing that is missing is the how to on the Draw class.

  8. Nessa Says:

    Good for people to know.

  9. ?? » Blog Archive » AS2 + AS3 Draw a Dotted Rounded Corner Box Says:

    […] http://blog.alegitimatebusiness.com/2007/11/07/as2-as3-draw-a-dotted-rounded-corner-box/ « ???????????????????? […]

  10. Système D » Dotted/dashed line in ActionScript 3 Says:

    […] Getting dotted lines in ActionScript seems to be one of those old chestnuts. The ever-resourceful Senocular has a neat ActionScript 2 solution, ported to ActionScript 3 here. […]

  11. Joe Says:

    Hey, the senocular site is down and I need this dashed curve library for AS2. Does any one have it by any chance? Thanks
    Joe

  12. Jane Goody Says:

    I read your blog for a long time and must tell you that your posts are always valuable to readers.

  13. fred Says:

    Really nice work, thanks man !

    Using Flashdevelop however, i get all these ‘warnings’ for all sorts of variables not having a type-declaration, how would you go about that ? Should i just add them or leave strictMode ? Or ignore ? (although that doesn’t really add to the workflow)

    I was just wondering, I will declare them in my copy..

  14. Adamo M Says:

    I’ve got a few layers in my .fla file and the line (”dl”) is being drawn on the stage in the bottom-most layer only. In other words, if I put any kind of display object on the stage it’s covering up the line.

    Is there a way to add the dashedline object to another movie clip? As it is, I’m getting the following error:

    TypeError: Error #1034: Type Coercion failed: cannot convert com.senocular.drawing::DashedLine@417cd151 to flash.display.DisplayObject.

    Thanks for great class.

  15. tonypee Says:

    The DashedLine class takes a target which is draws into the .graphics of. You seem to be trying to addChild on the DashedLine object, not the clip which it is drawing the graphics into.
    DashedLine isnt a display object, it just draws into your displayobject - which you should change the level of - via adding it to your other clip

  16. Bill Bartmann Says:

    Excellent site, keep up the good work

  17. Alva Says:

    Hi … I found your website by mistake. I was searching in Yahoo for PDF software that I had already bought when I came upon your site, I must say your website is pretty cool I just love the theme, its amazing!. I don’t have the time at the moment to fully read your entire site but I have bookmarked it and also will sign up for your RSS feed. I will be back in a day or two. thanks for a awesome site.

  18. Diablo Says:

    ???????? ??? ??????! ? ??? ????? ?? ??? ???? ????? ? ???????? ????? ???!

  19. Billos Says:

    Duuuuuuuuude.. Needed a curved dashed line drawer for AS3.. Did some googling around and looksy who’s name popped up.. Worked a treat.. Thanks Polly.. I knew you were good for something (apart from chugging jugs of beer)

  20. Gorgonbunny Says:

    Thanks to you and senocular for the great Dashed line class. And thank you, fiskhandlarn for the clear () code, it’s exactly what I needed.

  21. Kiley Quintard Says:

    This site I found has lots of great info on herbs and was really helpful. Its hard to find a good place with good information

  22. MARY BUCKLEY Says:

    yo good website yea nice job good good…this post deserves nothing …hahaha just joking :P …nice post :P ohhh nice info

  23. Krysten Ascol Says:

    I’m a big fan of this site and I check it regularly. Keep up the great work!

  24. Watch Treme Says:

    Hey, I read all your articles, keep them coming.

  25. Download Diablo 3 Free Says:

    I really appreciate the work that you put into your blog. It really shows. Thanks

  26. Kendra Teacher Says:

    I’ve been really enjoying Treme. I’ve missed the Wire.

Leave a Reply