Creating a line

The next, and longest, piece of code responds to a 'mouseUp' event - meaning, every time the mouse button is released. If we think about what it is that we're trying to do, it's clear that whenever the mouse is released, we need to start drawing a new line. So that's what we'll do.

The first thing this section of code does is to get the current mouse position -- with the _xmouse and _ymouse properties -- and store it in the variables origin_x and origin_y. This will be the start point of our new line. Next we increase our line number counter (number_lines) by one, and use this number to generate what will be the Instance Name of the new line (the word "line" plus the number stored in number_lines, eg. line1, line2...line10, line11 and so on) and storing it in the variable name. Now we actually create the new line, by duplicating the original line, and using name as the Instance Name and number_lines for the depth (all duplicated movie clips need a unique 'depth' setting to designate whether they are drawn in front of, or behind, other duplicated mcs).

The next section deals with the positioning and manipulation of the new line as described in the earlier section, 'Points and lines'. The first step is to set the line's start point at the co-ordinates we captured earlier (origin_x and origin_y). Next we set the width and height of the line with scale, using the values we get by subtracting the start point of the line from the current mouse position (_xmouse - origin_x) and (_ymouse - origin_y).

The final few lines of this code are used only when the line that has just been created is the first in a new shape. The variable line_active is there simply to tell us whether this is the case or not - if it's set to zero then this is the first line, if it's set to one it's not. You'll notice that the 'if' statement looks like this:

if (!line_active) {...

The exclamation mark '!' here is an abbreviation for 'not', so this line means 'if line_active does not have a value (ie. if it's set to zero) then execute the following actions'. The code that follows sets line_active to 1 to show that we're now drawing a line (where before we weren't) and also sets the variables start_x and start_y to equal origin_x and origin_y. We'll need these variables later.

Updating a line

The next onClipEvent - mouseMove -- responds, not surprisingly, only when the mouse is moved. We use this to update the position of our 'dummy' line - the line that follows the mouse - which clearly only needs to change when the mouse's position is altered.

First of all we use an 'if' statement to make sure that line_active is set to one (in fact, this 'if' statement simply checks that it's not set to zero, which is enough information in this case) and then we use the same code to update the position and dimensions of the line as we did in the above 'creating the line' section.

The last line in this section uses a handy little function - updateAfterEvent() - that makes the line's movement much smoother, by forcing Flash to redraw the line not just once per frame, but every time the mouse updates - which is usually much faster than your Flash movie. If you want to see the difference this makes, just take this line out and test the movie. See?

Finishing a shape

The final section of code deals with what happens when a key is pressed (using the keyUp event). First of all, Flash checks to see which key was pressed by using the Key.getascii() function. This function returns the ASCII code value of the last key that was pressed (each letter and character on your keyboard is represented internally by a number between 0 and 255 - these numbers are called ASCII values). We're only interested if the Enter key is pressed, so we're looking for ASCII number 13.

We use an if statement here to check the value, and if it's the one we want then we execute just three lines of code. First, we join the end point of the previous line to the start point of the first line in the shape. Luckily, we stored these values earlier (in the variables start_x and start_y) so all we need to do is subtract the start point of the current 'dummy' line from these values, so (start_x - origin_x) and (start_y - origin_y).

Finally, we set the variable line_active to zero. This stops the line from being updated every time the mouse moves, and tells Flash that the next time the mouse is clicked, a new shape is starting.

That's your lot

That's about all there is to say. Like I said before, the code is full of comments to explain what's going on, so check it out - it's really not very difficult.

Good luck!

Stickman
If you liked this tutorial and would like more, then why not drop by my site at www.the-stickman.com