Drawing Lines 2

Get the WebProNews Newsletter:

[ Business]

For all the wonderful and neat things you can do with actionscript, it’s ironic that the simple task of drawing a line can be such a difficult thing. Flash has no native function to draw a line. Everything done in actionscript must be done within the context of movie clip. In this article I will explain how you can draw lines using movie clips.

First we must create a movie clip that will act as a line. Open a new FLA & make the size 200 by 200 pixels. Create a new movie clip in the library. Use the line tool(n) to make a horizontal line that starts as (0,0) and is 100 pixels wide.

Next, drag the line movie clip into the first frame. Right click on the movie clip and select Panels, Instance. Name this movie clip ‘line’. Now select the first frame from the timeline, and press F6 twice to create two new key frames. These are all the frames necessary to make our actionscript sequence.

Now let’s move on to the nitty gritty of the action script. Right click on the third keyframe and select Actions. Add this line to the action script:

gotoAndPlay (2);

This will ensure that when the movie is played, it will run through the actions in the first frame once, then repeatedly play the actions of frame two and three. This is important because we will put all of our initialization code and functions in the first frame. The main body of the actionscript will be placed in the second frame. The third frame will simple rewind back to frame two.

We’ll now make a function called ‘setline’ that will take four numbers (x,y,a,b) as parameters. This function will change the scale and rotation of the ‘line’ movie clip so that one end rests at (x,y) the other end at (a,b).

Now go to the Actions menu of the first frame. Put the following code into the first frame:

function setline(x,y,a,b)


dist = Math.sqrt((x-a)*(x-a)+(y-b)*(y-b));

angle = (Math.atan((y-b)/(x-a))*(360/6.28));

if (a


angle = angle+180;


setProperty ("line" add count, _x, x+100);

setProperty ("line" add count, _y, y+100);

setProperty ("line" add count, _xscale, dist);

setProperty ("line" add count, _rotation, angle);


Here's a brief explanation of the function. The third line creates a variable called 'dist'. It also calculates the distance between the points (x,y) and (a,b), and assigns it to 'dist'. The fourth line computes the angle (in degrees) of the line that points (x,y) and (a,b) make and puts it into the variable 'angle'. Finally the four setProperty lines actually manipulates the properties of the line movie clip so that then ends are at (x,y) and (a,b) using variables 'dist' and 'angle'. Don't worry if you don't understand the math behind it all, just trust that if you call this function it will make the 'line' movie clip move according to the variables x,y,a and b passed to it.

Now all that is left is to actually call this function. We will do this in frame two because frame two will be repeated continuously for the life of the movie. For now just put the following code into frame two:


Press Control-Enter to test the movie. You should see a line that randomly changes it's position. It does this because each time frame two is repeated we send to the setline function four random numbers between 0 and 200.

Like many of my tutorials the end result is pretty much useless. The real magic comes when you build onto the code to make the line or lines (hint, hint) do interesting things. I will leave that up to you. If you feel you still need some further guidance doing that, just read part two of this tutorial.
Download: vector.swf vector.fla

Robin Baker is a webmaster at WebproSchool.com. He also is the webmaster and owner of indirectdesign.com, a web and print design company on the forefront of design concepts.

Drawing Lines 2
Comments Off
This entry was posted in Business.
About Robin Baker
Robin Baker is a webmaster at WebproSchool.com. He also is the webmaster and owner of indirectdesign.com, a web and print design company on the forefront of design concepts. WebProNews Writer
Top Rated White Papers and Resources

Comments are closed.

  • Join for Access to Our Exclusive Web Tools
  • Sidebar Top
  • Sidebar Middle
  • Sign Up For The Free Newsletter
  • Sidebar Bottom