Let’s meet the functions:

(Movieclip) .moveTo(x,y)
(Movieclip) .lineTo(x,y)
(Movieclip) .curveTo(x,y,x2,y2,x3,y3)

So basically moveTo moves the pen. LineTo draws from the pens position to the new position. And curveTo draws a curve from the pens position to the new position with an anchor on another position…

Simple tools but can create useful and complicated effects.

In the last tutorial you may of noticed that I used the lineStyle function, and to truly understand that I must first show all the parameters…

1

lineStyle(thickness:Number, rgb:Number, alpha:Number, pixelHinting:Boolean, noScale:String, capsStyle:String, jointStyle:String, miterLimit:Number)

ok so…

thickness – as indicated has to be a number and it represents the thickness of the line in points which are valid between 0 and 255. If a number below 0 is given then 0 is used and a larger than 255 number will be used as 255.

rgb – A hex colour value (red is 0xFF0000, blue is 0x0000FF etc..) of the line. If a value isn’t indicated, Flash uses black. To find a colour you could use my hex map…

alpha – An integer between 0 and 100. 0 being fully transparent and 100 being solid, if not specified 100 is used.

READ MORE »

With more curves, let’s try 8 for example…

1
2
3
4
5
6
7
8
9
10
11

_root.createEmptyMovieClip("drawing", 1)
_root.drawing.lineStyle(5,0x000000)
_root.drawing.moveTo(150, 100)
_root.drawing.curveTo(200,58,250,58)
_root.drawing.curveTo(300,58,350,100)
_root.drawing.curveTo(392,150,392,200)
_root.drawing.curveTo(392,250,350,300)
_root.drawing.curveTo(300,342,250,342)
_root.drawing.curveTo(200,342,150,300)
_root.drawing.curveTo(108,250,108,200)
_root.drawing.curveTo(108,150,150,100)

And we get…

=

Much better, but why does that happen. Next I will explain

Rounded rectangles

- A mix between lines and curves… A perfect time to test ourselves!

Let’s try a code…

1
2
3
4
5
6
7
8
9
10
11
12
13

_root.createEmptyMovieClip("roundedRectangle", 1)
with (roundedRectangle){
	beginFill(0x000000)
	moveTo(100, 110)
	curveTo(100,100,110,100)
	lineTo(290,100)
	curveTo(300,100,300,110)
	lineTo(300,190)
	curveTo(300,200,290,200)
	lineTo(110,200)
	curveTo(100,200,100,190)
	endFill()
}

and we get…

Not hard to understand – hard to recognise the co-ordinates.

That’s right – part 9 already…

Today we’ll draw a circle… IN AS2

I know, sounds easy right…. THINK AGAIN; we’ll be using trig again and basic function codes…

Let’s begin…

1
2
3
4
5
6
7
8
9
10
11
12
13

circle(250, 150, 100);
function circle(x, y, r){
_root.lineStyle(2,0x000000)
_root.moveTo(x+r, y)
_root.curveTo(r+x, Math.tan(Math.PI/8)*r+y, Math.sin(Math.PI/4)*r+x, Math.sin(Math.PI/4)*r+y)
_root.curveTo(Math.tan(Math.PI/8)*r+x, r+y, x, r+y)
_root.curveTo(-Math.tan(Math.PI/8)*r+x, r+y, -Math.sin(Math.PI/4)*r+x, Math.sin(Math.PI/4)*r+y)
_root.curveTo(-r+x, Math.tan(Math.PI/8)*r+y, -r+x, y)
_root.curveTo(-r+x, -Math.tan(Math.PI/8)*r+y, -Math.sin(Math.PI/4)*r+x, -Math.sin(Math.PI/4)*r+y)
_root.curveTo(-Math.tan(Math.PI/8)*r+x, -r+y, x, -r+y)
_root.curveTo(Math.tan(Math.PI/8)*r+x, -r+y, Math.sin(Math.PI/4)*r+x, -Math.sin(Math.PI/4)*r+y)
_root.curveTo(r+x, -Math.tan(Math.PI/8)*r+y, r+x, y)
}

and we get…

If you don’t understand it then take a look at my trig tutorials or even rotation on a z axis could help… Good Luck