Tuesday, 13 September 2011

Complex shapes with the AS3 drawing API

Everybody who uses Actionscript 3 know that you can create basic shapes using the drawing API. These shapes include lines, rectangles and circles. You can also create complex shapes by combining simple shapes together. In this post I will share a few examples of complex shapes. To make life a little easier, you can optionally draw a quick sketch down on paper to give a rough idea of the shape’s placement. Or you can turn on the ‘Grids’ in Flash by going to View > Grids > Show Grids on the menu bar. You will also need to turn on ‘Rulers’ to see the pixel distances. Now you can use the Pen tool to draw your shapes. This will give you an indication of the x and y values to use in your lineTo() methods.

The first example creates a tree using the moveTo() and lineTo() methods. The tree sections can be created using new Shape instances if you are going to add filters to the different parts of the tree. You can also add the shape instances into one container sprite as shown in the next example.

var tree:Shape = new Shape();
tree.graphics.lineStyle(1,0x336600);
tree.graphics.beginFill(0x66CC33);
tree.graphics.moveTo(40,0);
tree.graphics.lineTo(60,20);
tree.graphics.lineTo(50,20);
tree.graphics.lineTo(70,40);
tree.graphics.lineTo(60,40);
tree.graphics.lineTo(80,60);
tree.graphics.lineTo(0,60);
tree.graphics.lineTo(20,40);
tree.graphics.lineTo(10,40);
tree.graphics.lineTo(30,20);
tree.graphics.lineTo(20,20);
tree.graphics.endFill();

tree.graphics.beginFill(0xCC6633);
tree.graphics.lineStyle(1,0x944925);
tree.graphics.moveTo(30,60);
tree.graphics.lineTo(50,60);
tree.graphics.lineTo(50,90);
tree.graphics.lineTo(30,90)
addChild(tree);

The second example create a slice of watermelon using the curveTo() and lineTo() methods. I have added the watermelon seeds inside the red sprite and used a mask to hide any overlapping seeds. Everything is added inside the container sprite which allows you to move the individual shapes as a group.

var container:Sprite = new Sprite();

var green:Shape = new Shape();
green.graphics.lineStyle(1);
green.graphics.beginFill(0x7DE67D,0.8);
green.graphics.moveTo(0,0);
green.graphics.lineTo(140,0);
green.graphics.curveTo(140,70,70,70);
green.graphics.curveTo(0,70,0,0);
green.graphics.endFill();
container.addChild(green);

var red:Sprite = new Sprite();
red.graphics.lineStyle(1);
red.graphics.beginFill(0xFF6F6F);
red.graphics.moveTo(10,0);
red.graphics.lineTo(130,0);
red.graphics.curveTo(120,60,70,60);
red.graphics.curveTo(20,60,10,0);
red.graphics.endFill();
container.addChild(red);

for(var i:uint = 0; i < 24; i++){ 
 var r:uint = uint(Math.random() * 6 +4);
 var seed:Shape = new Shape();
 seed.graphics.beginFill(0x000000);
 seed.graphics.drawEllipse(0,0,r,r/2);
 seed.graphics.endFill();
 seed.rotation = i * Math.random() * 180;
 seed.x = 25 + 20 * (i%6);
 seed.y = 5 + 15 * int(i/6);  
 red.addChild(seed);
}

var redMask:Shape = new Shape();
redMask.graphics.beginFill(0x000000);
redMask.graphics.moveTo(10,0);
redMask.graphics.lineTo(130,0);
redMask.graphics.curveTo(120,60,70,60);
redMask.graphics.curveTo(20,60,10,0);
redMask.graphics.endFill();
container.addChild(redMask);

red.mask = redMask;

container.x = 100;
container.y = 100;
addChild(container);  
The third example uses the Flash player 10’s drawPath() method to draw a lighting bolt. The drawPath() method accepts two parameters which both have to be vector arrays. The first vector array holds the drawing commands, a list of these commands can be found here. The second vector array will hold the x and y positions of the drawing direction.
var com:Vector. = new Vector.();
com.push(1,2,2,2,2,2,2,2,2,2,2,2);

var coo:Vector. = new Vector.();
coo.push(40,0, 30,36, 48,36, 32,77, 48,77,30,130,
  70,65, 55,65, 80,20, 65,20, 80,0, 40,0);


var shape:Shape = new Shape();
shape.graphics.lineStyle(1);
shape.graphics.beginFill(0xFFFF00);
shape.graphics.drawPath(com, coo);
shape.graphics.endFill();
addChild(shape);

2 comments:

shyamli gujar 5 February 2013 at 00:09  

Your Post is great!!. Very complexed but still easy.

I need a help realted to drawing.

I am making a drawing tool for kids. In that they can select the shape onclick and that shape will appear on stage. Then, kids will draw over that shape using the brush.

At this stage I am facing problem:
1) I am not able to draw over the shape(with stoke and without fill. Even tried with fill). The brush is working inside shape but not over the stroke.
2) The lines are not coming while Drawing over Circular Shape.

Please help.

iliketo 5 February 2013 at 11:15  

@Shyamli,

Add the line drawing to the top most layer on the display list.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP