Tutorial details:
Written by: Stickman / www.the-stickman.com
Difficulty Level: intermediate
Requirements: Flash 5 and above

Actionscript.org contacted me to ask if I'd like to write a tutorial for them, and this is the result. I hope you like it... Note that in Flash MX you can use the new drawing API to draw a line, but this solution is good for backward compatibility

What's the plan?

The task at hand with this tutorial is to replicate a technique displayed here at Intellifeforms. Before you get excited, I'm not about to show you how to create real-time 3D animations -- that's a job for someone who knows a bit about maths (ie. not me). We're looking for a way to draw shapes with lines, and have Flash 'complete' the shape when we're done.

So let's be very clear what we're aiming for. We want to be able to start with no lines, then click somewhere on the screen and draw a series of connected lines. While drawing a line we will see a 'dummy' line that follows the mouse. When we're satisfied that a line is positioned correctly, we click the mouse to fix it in place and start a new one. When we're done, we want to be able to press the Enter key and have Flash join the end of the last line to the start of the first one, thereby completing our shape.

Points and lines

The technique we use for joining two points with a line really couldn't be much simpler -- there's almost no maths involved at all. That's why I like it.

We start with a movie clip (called 'Line') containing a single, hairline diagonal line (you'll find Hairline in the Stroke panel). The most important feature of this line is that its start point is at 0,0 and its end point is at 100,100 (just create a rough line by hand and use the Info panel to position the start and end points more exactly). Why are the start and endpoints significant? Because it means that we can now use 'scale' to make it as wide or as high as we need it to be.

Let's take an example. We want our line to start at 70,60 and end at 150,240. So we position the start point of our line movie clip at 70,90 and then resize it to fit. By subtracting the start and end values for x and y co-ordinates, we get 150 - 70 = 80, and 240 - 60 = 180. Conveniently, scale works by percentages: 100 is normal size, 50 is half-size, 200 is double size and so on. So all we need to do is use the values we've just calculated (80 and 180) to set the _xscale and _yscale values of our line and presto! the end point is now at 150,240. Simple!

Now for the code

The next step in our task is to combine this line-drawing technique we've just explored with a bit of ActionScript code, to make it actually do something. For convenience, I've put all the code in the Object Actions of a movie clip called 'Control' (to access them, just click on the control movie clip, which is at 0,0 in the main timeline), right click and choose 'Actions', or alternatively click the Blue arrow in the Instance Panel. You'll see that there are plenty of comments to help you work out what each part of the code does.

In Flash 5, movie clips can be set up to respond to certain 'events' - using onClipEvent() - and this is what the control movie is for. The first event it responds to is Load, which happens only once -- when the clip first appears in the timeline - and is used to set the original 'line' movie clip to invisible as well as to initialise some variables.