Tuesday, November 16, 2010

Drawing shapes using AS3: Part 1

Today we will learn how to draw simple lines using AS3 drawing API.

To draw something, you need a container for it. It can be either MovieClip, Sprite or Shape. Shape is the least memory eating container, so you should use that if you want a static drawing.

import flash.display.Shape;

var myShape:Shape = new Shape();
addChild(myShape);

Before we start drawing, we need to set the line style for our line. We use the lineStyle method. It has the following parameters:

  • thickness - an integer value that defines the thickness of your line. Valid values: 0 - 255.
  • color - a hexadecimal color value of the line.
  • alpha - the transparency of the line. Valid values: 0 - 1.
  • pixelHinting - this is a boolean value (true/false) that tells flash whether to hint strokes to full pixels or not. When pixelhinting is set to true, then curved shapes, for example, rounded rectangle corners, will look better - flash will adjust pixels so that the whole picture is more straight. This isn't used a lot. The default value is false.
  • scaleMode - a value that specifies the scale mode of the line thickness. Possible values:

    • LineScaleMode.NORMAL - the line thickness is always scaled when the object itself is scaled.
    • LineScaleMode.NONE - the line thickness is never scaled.
    • LineScaleMode.VERTICAL - the line thickness is NOT scaled if the object is ONLY scaled vertically.
    • LineScaleMode.HORIZONTAL - the line thickness is NOT scaled if the object is ONLY scaled horizontally.
  • caps - the style of caps on lines. Possible values: CapsStyle.NONE, CapsStyle.ROUND and CapsStyle.SQUARE.
  • joints - the style of joints at line angles. Possible values: JointStyle.BEVEL, JointStyle.MITER, and JointStyle.ROUND.
  • 
  • miterLimit - indicates the limit at which the miter is cut off. Take a look:

Not all of them are necessary to fill. I'm going to draw a 1px thick red fully visible line:

myShape.graphics.lineStyle(1, 0xFF0000, 1);

Now, we have an imaginary cursor on stage that flash uses to draw what we tell it to. I want to draw an L shape. First, we need to tell flash where to move the cursor. I'll move it to x:25 and y:25. Note, this is not drawing yet. We just move the cursor.

myShape.graphics.moveTo(25, 25); 

Now, from that point we want to drag down a line. We tell flash the final coordinate of the line:

myShape.graphics.lineTo(25, 100); 

And I do it again for another line:

myShape.graphics.lineTo(100, 100); 

So the full code is:

var myShape:Shape = new Shape();
addChild(myShape);

myShape.graphics.lineStyle(1, 0xFF0000, 1);
myShape.graphics.moveTo(25, 25); 
myShape.graphics.lineTo(25, 100); 
myShape.graphics.lineTo(100, 100); 

And we've drawn an "L" using lines. Thanks for reading!

Related:

Drawing shapes using AS3: Part 2
Drawing shapes using AS3: Part 3
Drawing shapes using AS3: Part 4
Drawing shapes using AS3: Part 5
Drawing shapes using AS3: Part 6
Drawing shapes using AS3: Part 7
Drawing shapes using AS3: Part 8

No comments:

Post a Comment