DRAWING FREEFORM STRAIGHT LINES - ON THE FLY

This document applies to Flash 5 and assumes proficiency in ActionScripting.  

Click here for Flash 4 version.

In Flash 5, as in Flash 4, there is still no Action to draw a straight line from one point to another.  This means that there's no "built-in" way to write a script to draw a line from point A to point B.  

However, it's possible to overcome this -at least partially- by scaling and positioning a diagonal line so that the endpoints of the line are positioned on an arbitrary two points.  Please look at the picture below to see how this works.

See sample application: Connect-the-dots.

For example, to draw a line from point (15,10) to point (50, 35), scale a  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 endpoints.)

The technique is as follows:

  • Create a MovieClip which contain one frame only.
  • Draw a diagonal line on frame 1. Specifically:
    • 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. You can set the grid size to 100 pixels and turn on the grids and snap to better align the line. Also use object inspector and make sure the (x,y) of the starting point (the top-left) coordinate is (0,0) and the width and height are 100 pixel.
      

Now, given 2 points P1(x1, y1) and P2(x2, y2), how do you draw a line from P1 to P2? 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.
  • Position the Line MovieClip so that the starting point is at (x1, y1).  
  • Scale the MovieCip so that the width is the value of deltaX and the height is the  value of deltaY. (It doesn't matter if delta has a negative value, because unlike Flash 4, Flash 5 works file with negative scaling values) 
var dx = P2._x - P1._x;
var dy = P2._y - P1._y;

Line._x=P1._x;
Line._y=P1._y;

Line._xscale=dx;
Line._yscale=dy;

Note that the position of P1 and P2 doesn't really matter in the calculation, as long as the P2 is the one being subtracted.  (i.e.: We don't need to worry whether P1 is on the right or below of P2.)

You might be wondering why use _xscale and _yscale instead of _width and _height variables?  The reason is because Flash won't accept a negative value for _width and _height.

EXAMPLE


Drag the dots anywhere on the gray area.

Here's the FLA file.

In this example, the setting is as follows:

  • the diagonal line is called "Line" (this is an instance of the line symbol created previously)
  • the blue dot  is "P1" (this is just a dragable movie clip)
  • the blue dot  is "P2" (this is just another draggable clip)
  • the actions for frame1 is the code that draws the line
  • the Button action simply allows the user to drag the dots 

Notes

 

  1. 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.
  2. Drawing too many lines might cause the movie to run very slowly or jerkily. Use this method sparingly.
  3. 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.

See sample application that utilizes the method described above: Connect-the-dots.

<<INDEX>>
    

(C) 2001 F. Permadi