Skip to content
Apr 20 / Sidney de Koning

Drawing shapes in AS3: A Class to draw an Arc, Star, Gear, Cog, Wedge and a Burst

Today I’ve been scouting the internet for a specific class, one that draws shapes.
I remembered that some time ago I read an article on the Adobe Dev site by Ric Ewing about drawing shapes. But this was all done in AS2… and I hated AS2! (and so should you ;) ! ) But I found a AS3 version. Its redone by a guy from Bristol, Aden Forshaw.

He also posted a really cool tool that generates code and allows you to visually adjust the settings of an object. Go check it out.

After looking at his code I re-wrote it so it takes the Graphics Class instead of only allowing Sprites, changed datatypes, optimized loops, optimized math operations and threw errors where needed.

So here is the new class for you to download and an example on how to use it. The code below actually produces the image on the top of this post):

var s : Shape = new Shape( );
s.graphics.lineStyle( 4, 0xE16606 );
DrawingShapes.drawArc( s.graphics, 50, 50, 10, 150, 60 );

s.graphics.lineStyle( 3, 0x000000 );
DrawingShapes.drawBurst( s.graphics, 80, 60, 3, 15, 6, 27 );

s.graphics.lineStyle( 1, 0x3C3C39 );
DrawingShapes.drawDash( s.graphics, 120, 60, 150, 80, 2, 2 );

s.graphics.lineStyle( 3, 0xE16606 );
DrawingShapes.drawGear( s.graphics, 200, 60, 13, 31, 26, 0, 7, 13 );

s.graphics.lineStyle( 3, 0x0074B9 );
DrawingShapes.drawPolygon( s.graphics, 270, 60, 7, 30, 45 );

s.graphics.lineStyle( 2, 0x000000 );
DrawingShapes.drawStar( s.graphics, 340, 60, 18, 24, 19, 27 );

s.graphics.lineStyle( 2, 0xFFCC00 );
DrawingShapes.drawWedge( s.graphics, 400, 60, 30, 309, 209 );

s.graphics.lineStyle( 2, 0x0074B9 );
DrawingShapes.drawLine( s.graphics, 440, 80, 30, DrawingShapes.VERTICAL_LINE );

addChild( s );

And here is a pastie especially for those who don’t like the zip format:

Please consider to buying me a coffee.

Print Friendly Print Get a PDF version of this webpage PDF
Filed under Actionscript 3

10 Comments

Leave a comment
  1. jankees / Apr 20 2010

    why not put the code in a GitHub Gist or a pastie, so i don’t need to download the zip file…

  2. Mike Silanin / Mar 7 2011

    Great work! It’s just what I need! Very usefull for a runtime drawing.

  3. Arie de Bonth / Mar 8 2011

    Thank you for providing this class, I had to draw loads of wegdes lately.
    Now I’m using drawLine, but the “length” parameter doesn’t function like I expected. I rewrote your function like this:
    public static function drawLine( … ) : void {
    target.moveTo( x, y );
    switch (direction) {
    case DrawingShapes.HORIZONTAL_LINE :
    target.lineTo( x + length, y );
    break;
    case DrawingShapes.VERTICAL_LINE :
    target.lineTo( x, y + length );
    break;
    }
    }

  4. Sidney de Koning / Mar 9 2011

    Hi Arie,

    Thanks for the updating the code! I’ll update the code aswell.

    Cheers,
    Sidney

  5. Savvas / Apr 23 2011

    Hello, great class! I want to ask under which license is released! Can I use it for a commercial product?

  6. Sidney de Koning / Apr 24 2011

    Ofcourse you can use this, modify it, add to it, adapt from it, learn from it and use it the way you want to!
    And if you do add something to it, be sure to post it here :)

    Enjoy :)

    Sid

  7. Brajesh / Jul 5 2011

    Hi,
    Thanks for providing this class it’s really help us.

    Thanks allot .

Trackbacks and Pingbacks

  1. An AS3 shape drawing class, gear, cogs, wedge, arc, star, burst | AdenForshaw.com
  2. Top 20 Things every Senior Flash Developer should know – Confessions of an Flash Addict
  3. 16 Things that should have been added to John Lindquist’ list – Confessions of a Flash Addict

Leave a comment