In Flash 4, there is no Action to draw a straight line from one point
to another. This means that it's very difficult to draw arbitrary lines
"on the fly" or "in the code." Difficult,
but not impossible. (The method described below works best with "hairline-sized"
pen.) See sample application: Connect-the-dots.
One way to draw such line is by scaling and positioning
a diagonal line so that the corners of the line are positioned on the
specified (x,y) end-points. Please look at the picture below to see how
For example, to draw a line from point (15,10) to point (50, 35), scale
the diagonal line so that the length of opposing side is
and the length of the adjacent side is (50--15)=35.
(If this is hard to conceptualize, just imagine scaling a square that
has a diagonal line connecting two corners.)
The following demonstration shows that this method does work.
This demo works in this way:
Have a MovieClip which contain two frames.
Draw a diagonal line on frame 1. The diagonal line should form a
45° angle. It should span 100 pixels by 100 pixels square. (The
size 100x100 is chosen for practical reason, because scaling (with ActionScript)
takes percentage as parameter. By using 100, we have a one-to-one mapping
so that we can avoid having to calculate the scaling percentage.) The
line is illustrated in the picture below (in green). You can set the
grid size to 50 pixels and turn on the grids and snap to better align
the line. Also use object inspector and make sure the (x,y) is at (-50,-50)
and the width and height are (100x100).
On frame 2, draw another line like above, only this time, draw the
line on opposite direction (flipped horizontally like below). (Why have
these two lines? This is again done for practical reason, to avoid having
to rotate the line whenever you need to draw a line in quadrant 2 and
Now, given 2 points (x1, y1) and (x2, y2), how do you draw a line from
(x1, y1) to (x2, y2)? This is where scripting is required. The script
is actually pretty simple. It goes like this in pseudo code:
Calculate the difference (distance) between x2 and x1, call the result deltaX.
Calculate the difference (distance) between y2 and y1, call the result
Remember that in Flash, the y-axis is increasing in downward
direction; at this point, there are 4 possible situation depending on the delta
Case 1: If both deltaX and deltaY are positive, then the diagonal line
slants to the right.
Case 2: If both deltaX and deltaY are negative, then the diagonal line
also slants to the right.
Case 3: If either deltaX or deltaY are negative, then the diagonal
line slants to the left.
Case 4: If one of the delta is 0, then the line is either a vertical
or horizontal line.
Recall that earlier, we have created a movie clip with 2 diagonal
lines that slant to different directions. At this point, pick which
of the diagonal line to use. Have a look at the
picture below. The blue lines are
examples of Case 3; the green
lines are examples of Case 1 & 2, and the red
lines are examples of Case 4.
Note: remember that in Flash, the y-axis is increasing in downward
Calculate the center point of the rectangle formed by (x1,y1) and (x2,y2).
This is just deltaX/2 and deltaY/2.
Position the Line MovieClip so that the center is at (x1+deltaX/2,
Scale the MovieCip so that the width is the absolute
value of deltaX and the height is the absolute value of deltaY. (if
deltaX or deltaY is 0, then scale it to size 1%, do not scale to 0%).
You might be wondering whether it's really necessary to have 2
lines, why can't the lines just be flipped in the code, using a
negative scaling factor? Indeed, this is possible in Flash 5.
However, scaling to a negative value in Flash 4 produces a wacky
result (flashing lines).
It is recommended to use "hairline" sized pen when creating
the movie clip for the line. Using any line size larger than 1 will
cause the line to "blow-up" (becomes thicker) because of scaling.
It won't look pleasant, believe me, it will be ugly.
Drawing too many lines might cause the movie to run very slowly
or jerkily. Use this method sparingly.
The method described above is, of course not the only way to
accomplish freeform line drawing. Another way is to scale and rotate
a horizontal or vertical line so that the endpoints of the line fall
on the specified (x,y) points.
In conclusion, drawing an arbitrary straight line as described here is not only impractical,
but it could also be slow and inefficient. However, such hacks may have to do for now,
until a better way is available (I hope a built in line drawing function
is included in the next release of Flash.)
See sample application that utilizes the method described above: Connect-the-dots.