FLASH4: DRAWING FREEFORM STRAIGHT LINES

DRAWING FREEFORM STRAIGHT LINES - ON THE FLY

This document applies to Flash 4 and assumes proficiency in ActionScripting. Flash 5 has a slightly simpler technique.

Click here for Flash 5 version.

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 this works.

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 (35-10)=25, 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 4.)

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 deltaY.
Remember that in Flash, the y-axis is increasing in downward direction; at this point, there are 4 possible situation depending on the delta values.
- 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 direction.
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, y1+deltaY/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%).

Notes

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.

<<INDEX>>