Drawing lines, curves and shapes in AS3

Date: 22.7.2009, 17:14    Total views: 22123

Using this thoroughly explained, detailed flash lesson, you will see how to draw many shapes and lines using the AS3.

Step 1

Create a new flash document.



Step 2

Call the current layer AS3. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 3

First, we will draw blue line, so select the first frame of layer AS3 and go to the AS3 panel (F9). Then, enter this code inside the actions panel:

var sp:Sprite = new Sprite();
addChild(sp);
var g:Graphics = sp.graphics;
g.lineStyle(3, 0x1c2fba);
g.moveTo(80, 100);
g.lineTo(420, 100);



After that, we will draw yellow and red lines, so enter this code inside the actions panel:

var sp:Sprite = new Sprite();
addChild(sp);
var g:Graphics = sp.graphics;
g.lineStyle(3, 0xfaf100);
g.moveTo(80, 80);
g.lineTo(420, 150);
g.lineTo(400, 120);
g.lineTo(200, 120);
g.lineStyle(4, 0xFF0000);
g.moveTo(150, 175);
g.lineTo(400, 175);



It's time for curves, so enter this code inside the actions panel:

var sp:Sprite = new Sprite();
addChild(sp);
var g:Graphics = sp.graphics;
g.lineStyle(2, 0x467608);
g.moveTo(150, 100);
g.curveTo(275, 0, 400, 100);
g.moveTo(0, 0);



Now, we will draw triangle, rectangle and circle and we will fill it with some colors.

Triangle

Enter this code inside the actions panel:

var triangle:Sprite = new Sprite();
with (triangle.graphics) {
lineStyle(0);
beginFill(0x9e0fa3,1);
moveTo(50, 0);
lineTo(120, 120);
lineTo(0, 100);
lineTo(50, 0);
endFill();
}
triangle.x = 50;
triangle.y = 250;
addChild(triangle);




Circle

Enter this code inside the actions panel:

var shapes:Sprite = new Sprite();
var gr:Graphics = shapes.graphics;
gr.lineStyle(4, 0x068843, .5);
gr.beginFill(0x330066, .2);
gr.drawCircle(50,50,50);
gr.endFill();
shapes.x = 150;
shapes.y = 250;
addChild(shapes);




Rectangle

Enter this code inside the actions panel:

var shapes:Sprite = new Sprite();
var gr:Graphics = shapes.graphics;
gr.lineStyle(4, 0x330066, .5);
gr.beginFill(0x330066, .2);
gr.drawRect(125,0,100,100);
gr.endFill();
shapes.x = 150;
shapes.y = 250;
addChild(shapes);



That's it!

Exnjoy!