In this tutorial we will be talking some more about drawing with actionscript 3.0, you might want to check out previous tutorials on the subject here.
Drawing with Flash AS3 part 1
Drawing with AS3 draw lines part 2
Now in this tutorial we will try to draw curved lines and try to wrap things up with this basic drawings tutorials.
So first I will try to explain what happens when we will draw curves with actionscript.
Basically we do the same thing as when we define a simple line, we set two point, the start and ending point of the line, both x and y coordinates. The difference is now we also have to define the curve point telling flash to drag the line from the center and out, as shown in the image below.
The image might explain it better then I do.
Now we will try to make a curved line, and make it look like the one below.
And here is the actionscript code, just paste it into your flash actionscript panel.
If you have trouble understanding whats happening try to read the description inline with the code.
// First we define a variable of the type shape and name it myLine
var myLine:Shape = new Shape();
// Then we add the line to the stage, if we forget this, we will never see anything on the stage.
addChild(myLine);
// Here we tell flash what our shape should do, in our case we want it to do a curve line thats called through the graphics.curveTo property.
// As you can see we set a starting a control point x and y, and the anchor x and y to control the line curve
myLine.graphics.curveTo(50,100,100,0);
// Now we need to set some styles for for our line, such as line color (dart blue is 00099) and the line thickness, which is set to 4.
myLine.graphics.lineStyle(4,00099);
// The last thing we could do is to place this line somewhere on the stage so its not just located at 0,0.
myLine.x = 100;
myLine.y = 100;
You might see this is quite simple, so now we will make it a bit more interesting, se we can add another curve point to the first line, just by adding a new curveTo property like this one.
myLine.graphics.curveTo(150,150,230,0);
Now if you add this line of code after the first curveTo, you will get an output result like this one.
Now you should be ready to draw your own shapes with actionscript 3.0.