The basics of drawing with ActionScript

Flash gives you the great possibility to create graphics dynamically, that is, while your movie is running, via ActionScript. So, not everything has to be drawn manually. What are the benefits of this method of creating graphics? First of all, it reduces the filesize of your Flash movie. Second, it opens up an infinite number of possibilities for greater interactivity, creativity and more. And, best of all, it is very easy to learn. So, let's start with the basics of drawing with ActionScript.

Drawing straight lines

1. Open a new Flash document. Call the first layer actions, ActionScript, or whatever you like. Click in the first (and only) keyframe of this layer and press F9 (PC) or ALT+F9 (Mac) to open up the Actions panel. Click in the right side of the panel and enter the following code:

_root.lineStyle(3, 0x0000FF, 100);
_root.lineTo(120, 75);

Test your movie (CTRL+ENTER for PC or Command+ENTER for Mac users). You should see a line appear in your Flash movie, looking exactly like the one on the image below:

Now, let's explain the code we just entered. The first line,

_root.lineStyle(3, 0x0000FF, 100);

tells Flash to set a style for drawing. Every time you want to draw with ActionScript, the first thing you have to do is tell Flash how to draw. So, the command lineStyle does exactly that, via the three parameters which follow between the parenthesis. The first one is line thickness. The value can be any number between 0 and 100, with 0 being the thinnest and 100 the thickest possible line. I chose the value 3 arbitrarily for this exercice. The next parameter tells Flash what colour should the line be. This is expressed by a hexadecimal value, with the characters 0x preceding the value. The 0x tells Flash that what follows is a hexadecimal value - if we omitted it, Flash would think it was some kind of variable. So, how can you know a specific colour's hexadecimal code? Easy. Go to the Tools panel, to the Colors section, click a color (doesn't matter if it's line or fill color), hover with the mouse over the color of your choice and see its hexadecimal code (see image below).

So, you could say, that instead of writing the # before the color's code, in ActionScript, we write 0x. The last parameter defines the alpha property of the line - its transparency. This is a percentage value: if you enter 0, your line will be completely transparent - invisible on the stage. 100 means that the line is 100% opaque. You can even omit this parameter, like this:

_root.lineStyle(3, 0x0000FF);

If there is no alpha parameter at all, Flash uses the default value, which is 100. The _root keyword at the beginning of the line means that you are setting the lineStyle for the root timeline, the one you are working on right now (that means the Flash movie itself). You can use the drawing commands in ActionScripts either with root or with any movie clip (ex.: mymovieclip.lineStyle).

The second line,

_root.lineTo(120, 75);

actually draws a line. The lineTo command must always come after you have set the properties for drawing with the lineStyle command. This time, the parameters between he parenthesis are coordinates (in pixels) on our stage. The first is x, the second is y. The zero-point of Flash's coordinate system is situated in the top left corner of the stage. The positive x coordinates are to the right of it and the positive y coordinates are below it. See the image below for explanation.

So the piece of code lineTo(120, 75) draws a line from (0, 0) to (120, 75). See this on the image below.

If you wanted to draw a horizontal line for example, you would add this line of code to our existing ActionScript (shown in bold):

_root.lineStyle(3, 0x0000FF, 100);
_root.lineTo(120, 75);
_root.lineTo(200, 75);

Test your movie. You will see a horizontal line starting exactly where the last one ended (120, 75) and with (200, 75) as finishing point.

But what if you wanted to start drawing somewhere else? And why did the first line started from (0,0) you may ask? Because this is the starting default point for drawing if you haven't specified a different one. In order to start drawing from a point other than (0,0) or to continue drawing from another point, you must use the moveTo ActionScript method. Add this to your code:

_root.lineStyle(3, 0x0000FF, 100);
_root.lineTo(120, 75);
_root.lineTo(200, 75);
_root.moveTo(300, 150);
_root.lineTo(180, 240);

You moved the beginning point of next line to (300, 150) and then you draw that line until the point (180, 240).

You can change the properties of your lines whenever you want. Add this code to the existing one and see it:

_root.lineStyle(3, 0x0000FF, 100);
_root.lineTo(120, 75);
_root.lineStyle(0, 0xC71D1F, 100);
_root.lineTo(200, 75);
_root.moveTo(300, 150);
_root.lineStyle(15, 0x25A988, 60);
_root.lineTo(180, 240);

Try drawing a square or a triangle. It is really easy. Now that you know how to draw straight lines, let's see about curves.

Drawing curves

2. Save the previous document and open a new one. Call the layer actions, click into its first keyframe and open the Actions panel. Write in this code:

_root.lineStyle(0, 0x000000, 100);
_root.moveTo(100,100);
_root.curveTo(300, 100, 300, 300);

Test your movie, you should see a curve like the one in the image below appear.

As with straight lines, you must first define a style, which is what the first line of code serves for. The second line moves the drawing start position to (100, 100). I could have omitted that part, but I just didn't want to start in (0, 0). You can choose to erase this line or enter any other value if you want to.

The third line draws a curve. Its generic syntax is as follows:

_root.curveTo(controlX, controlY, anchorX, anchorY);

where the last two parameters (anchorX and anchorY) are the coordinates of the finishing point of our curve. The first two parameters (controlX and controlY) are the coordinates of the point to which our curve flexes itself to. It acts like a "gravitational pull" point toward which the curve is being attracted to. I marked the control point and the imaginary pulling force on the image below so you can easier understand how this works. I also made the curve more thick so it can be seen easier.

Experiment with different control point coordinates to see how your curve behaves in response. You can also add a lineTo command after that, Flash will just continue to draw with straight lines. After this, I reccommend you see the tutorial about making fills with ActionScript.

Got any comments or questions? Want to add something but don't know how? Discuss it in the forum!