Video Training – Tutorials

Flash Tutorial – Drawing Lines and Shapes with ActionScript

November 3, 2008 at 6:48 pm 1 comment

For users who prefer to learn Flash visually we have a range of Adobe Flash CS3 video tutorials, this method of training greatly enhances learning and allows beginners to master even the most complex aspects of Adobe Flash with ease.
View the Flash CS3 Tutorial Videos .

Flash Tutorial – Drawing Lines and Curves using Actionscript 3.0

We all know you can create shapes and lines in Flash using the many drawing tools, but did you know you can unleash the power of ActionScript to create shapes on the fly.

In this Flash tutorial we’ll be looking at how to draw lines and curves using Actionscript 3.0. In the examples below we’ll use methods from graphics class to draw out the lines and curves. The benefit of drawing in Actionscript rather than using tools from the Flash interface is that it makes for a much smaller file size. Below we’ll go through the code line by line and draw out the line and curve in shown in the example .swf file.

Download the SWF File

Drawing Lines
First thing we’ll look at is how to draw a simple line. We’ll first create a new Sprite object called “container”, this will hold all our graphical information for the line. A Sprite is just a Movie-Clip without a Timeline.

Open up Flash and launch the Actions Panel.

var container:Sprite = new Sprite();

To display the new Sprite object or add it to the stage we use the addChild() method. This makes it visible when you preview or publish the file.

addChild(container);

Next we want to draw the line itself, our first task is to choose the style of the line. To do this we use the lineStyle() method, the lineStyle() method has 3 parameters available to it thickness, colour and alpha scale. Thickness is measured in pixels, colour is in decimal format and finally alpha scale, which is an optional parameter measured in percent (1 = 100%, .5 = 50%). We assign this method to the graphics property and then assign that graphics property to the Sprite object, so that everything is added to the Sprite object.

container.graphics.lineStyle(3,0×333333);

Now that we have the style properties of the line it’s time to decide on our starting point. The starting point will indicate where we are drawing from, to declare the starting point we use the moveTo() method. This method requires 2 parameters, X and Y position. The X and Y values will indicate the starting position of where we want to draw from.

container.graphics.moveTo(20,20);

We have the starting points and are now ready to draw the line. The starting point needs an ending point or somewhere to draw to. Using the lineTo() method we declare the point we’re drawing to. The lineTo() method uses the same parameters as the moveTo() method, the only difference is with the lineTo() method we’re declaring where we are drawing to instead of where we are drawing from.

container.graphics.lineTo(450, 20);

It is possible to draw shapes by continuing to use the lineTo() method, as Actionscript executes in linear fashion we can also change the style of the line at any given point. Adding the code below to the code we’ve already written draws a small rectangle, we draw out the rectangle but change the style of the line by inserting a new lineStyle() method. This means the last two lines will be drawn in red.

container.graphics.lineTo(450,50);
container.graphics.lineStyle(3,0xff0000);
container.graphics.lineTo(20, 50);
container.graphics.lineTo(20,20);

Drawing Curves
Drawing curves is also pretty straight forward but instead of using the lineTo() method we use the curveTo() method. The curveTo() method also works with the moveTo() method to determine our starting point. The curveTo() method however requires 4 parameters, x and y positions of the curve and X and Y positions of the ending point. Using this code below will give us a nice red curve.

var curve:Sprite = new Sprite();
addChild(curve);
curve.graphics.lineStyle(3,0xff0000);
curve.graphics.moveTo(50,150);
curve.graphics.curveTo(225, 0, 450, 150);

For a more clear explanation look at the diagram below, you can see the moveTo() starting points indicated by the arrow. The curveTo() parameters are also highlighted in green, the first 2 parameters show the X and Y points of the curve. The final 2 parameters also highlighted in green show the X and Y points of where the ending point of the curve is.

In the next Flash Tutorial we will move on to creating Shapes with ActionScript

Entry filed under: ActionScript. Tags: ActionScript, as3 tutorial, flash training.