ActionScript.org Flash, Flex and ActionScript Resources - http://www.actionscript.org/resources
Drawing lines with AS2
http://www.actionscript.org/resources/articles/730/1/Drawing-lines-with-AS2/Page1.html
Jean André Mas
Graphic designer converted since 2004 to coding. I play around with C++, OpenGL, Java, Javascript, AND Actionscript.
My website: ASWC 
By Jean André Mas
Published on February 26, 2008
 
This is the last of the 3 parts series "Drawing with AS2". It will show you how to draw lines and apply this knowledge onto dynamic application.

Drawing Lines with AS2 part1

Logical following of the "Drawing shapes" tutorial and "Drawing curves" tutorial here comes the last of this series the "Drawing lines" tutorial. Is it that useful to be able to draw lines? The answer is simply YES. Drawing lines can have many application when designing your Flash file and can make your Flash developer life easier in some cases, so let's get started!
1. Open your Flash software, select "new", "Flash document", click "Ok", then go to "Modify", "Document", enter 300 for the width and height and enter 30 for the frame rate.
2. Open the "Actions" panel.
3. Copy and Paste this code:

[as]this.createEmptyMovieClip("line_mc", 1);
with(line_mc){
lineStyle(5, 0x000000, 50, true, "normal", "square", "miter", 1);
moveTo(0, 0);
lineTo(150, 0);
_x=100;
_y=150;
}[/as]

4. Hit "Ctrl+Enter" or go to "Control", "Test Movie" to test our Flash movie. You should see this:



I told you, that's just a very basic line so far; still we need to add many parameters to the lineStyle() method, so let's take a close look. I have shown and explained similar code in the preceding drawing tutorials so I'll concentrate on the lineStyle() method here.

lineStyle(5, 0x000000, 50, true, "normal", "square", "miter", 1);

By using the lineStyle() we tell Flash that we are going to draw a line, but of course that's not the only thing we tell Flash to do. There are 8 parameters in this method, the first is the thickness (5 in our example), the second is the color (Hex format: 0x000000 which stands for black), the third is the alpha value (transparency, here 50%), true is the pixelHinting on/off which improves the rendering of the stroke on some situation (we won't be using it in this tutorial), normal is used for scaling, other value are none, horizontal, and vertical, it influences the way the stroke react to scaling, square is a value used to specify how the end of the stroke should be rendered, other values are round, and none, miter is a value used to render the stroke joints, other value are round, and bevel, finally 1 is a value that apply only if the preceding parameter is set to miter, the value is used to cut off the angle of the joint. All right that's quite a lot going on in one line, let's try to play a bit with that. (Note: if the thickness is set to 1, the five last parameters will have no effects on the line created)

Let's try some simple concepts. To draw an empty shape with just a line, we just create our shape but don't use the beginFill() method that's all. So for a rectangle we would have:

[as]this.createEmptyMovieClip("line_mc", 1);
with(line_mc){
lineStyle(10, 0x000000, 100, true, "normal", "square", "bevel", 1);
moveTo(0, 0);
lineTo(150, 0);
lineTo(150, 50);
lineTo(0, 50);
lineTo(0, 0);
_x=50;
_y=50;
}[/as]

This gives us:



Note that I used the bevel parameter in this case with an alpha of 100%.
Before moving onto the second part, let's apply what we learned here into a little application. This application will load an external image and apply to it a white thick outline of type photography. For the sake of portability, you will be able to apply this code to any size of image.

[as]this.createEmptyMovieClip("image_mc", 1);
var mclListener:Object = new Object();
mclListener.onLoadInit = function(target_mc:MovieClip) {
target_mc._x = Stage.width/2-target_mc._width/2;
target_mc._y = Stage.height/2-target_mc._height/2;
var w:Number = target_mc._width;
var h:Number = target_mc._height;
target_mc.lineStyle(10, 0xFFFFFF,100,true,"normal","square","miter",10);
target_mc.moveTo(0, 0);
target_mc.lineTo(w, 0);
target_mc.lineTo(w, h);
target_mc.lineTo(0, h);
target_mc.lineTo(0, 0);
target_mc._rotation=-2;
};
var image_mcl:MovieClipLoader = new MovieClipLoader();
image_mcl.addListener(mclListener);
image_mcl.loadClip("none.jpg", image_mc);[/as]

This code loads an image named "none.jpg" into the Flash file and draws on it a nice white outline. Note that this code does not resize the loading picture. Here is the result:



So now let' see what kind of dynamic application we can do with that. Let's move on to part 2.



Drawing lines with AS2 part 2
One use that doesn't come immediately in mind for the lineStyle() method is for detecting collision between objects. It's actually especially useful for beginners who don't want to go through heavy calculation and other trigonometry stuff. Let's take a look at these two balls bouncing around. The code draws a line between the two balls and output the distance between them in the little text field, when the balls collide; the text shows "Collision!”



You can download the fla file (Check "attachments" at the bottom of this page) and see how it works but following is the code we use to draw the line and check collision:

[as]function drawLine(target_mc:MovieClip, secondtarget:MovieClip){
this.createEmptyMovieClip("line_mc", 5);
line_mc.lineStyle(1,0x000000,100);
line_mc.moveTo(target_mc._x+target_mc._width/2,target_mc._y+target_mc._height/2);
line_mc.lineTo(secondtarget._x+secondtarget._width/2,secondtarget._y+secondtarget._height/2);
}[/as]
This function takes two movie clips as parameter and draws a line between them.

[as]drawLine(circle1_mc,circle2_mc);
var hyp = Math.sqrt((line_mc._width*line_mc._width)+(line_mc._height*line_mc._height));
distance_txt.text=Math.round(hyp);[/as]
We call the function passing our two balls as parameters, and then we calculate the size of the line and output it in the distance_txt textfield.

[as]if((line_mc._width<circle1_mc._width) && (line_mc._height<circle1_mc._width)){
distance_txt.text="Collision!";
}[/as]
That's quite a simple collision test but it's really efficient.

Of course you can create some basic graphic effects with just lines like in this example:


And here is the code:

[as]rotate=0;//this variable will rotate the lines
number=0;//this variable will give a limit to the number of lines
this.onEnterFrame=function(){
rotate++;//I increment the rotation angle
drawLine(rotate);//I call the drawLine function each frame with the rotate variable as parameter
}function drawLine(rot:Number){
number++;//I increment the line count
if(number>180){number=0}//I don't want more than 180 lines on the screen
this.createEmptyMovieClip("line"+number, number);//create lines
this["line"+number].lineStyle(4,0x00FF00,100);
this["line"+number].moveTo(0,0);
this["line"+number].lineTo(200,0);
this["line"+number]._x=Stage.width/2;//position lines
this["line"+number]._y=Stage.height/2;//position lines
this["line"+number]._rotation+=rot;//rotate lines
this["line"+number].onEnterFrame=function(){
this._alpha-=0.5;//fade lines
}
}[/as]

The last example is about selecting objects. On your desktop when you click in an empty space then you drag the mouse, you create a "box" inside which when you release the mouse everything will be selected. We can do the same by drawing some lines. Click anywhere and drag the mouse to create a little box around some green squares then release the mouse button.



A shadow shows up for the squares that you "selected", of course there's no other functionality but it's up to you to create some by downloading the Fla file and play with it. Let's take a quick look at the code:

[as]function drawLine(Xpos:Number,Ypos:Number,theWidth:Number,theHeight:Number){
this.createEmptyMovieClip("line_mc", 50);
with(line_mc){
lineStyle(1,0x000000,50);
moveTo(Xpos,Ypos);
lineTo(theWidth,Ypos);
lineTo(theWidth,theHeight);
lineTo(Xpos,theHeight);
lineTo(Xpos,Ypos);
}
}[/as]
The drawLine function takes 4 parameters, Xpos is the x position of the mouse when you first click somewhere on the stage, the Ypos is the y position where you first click somewhere on the stage, the theWidth is the x position of the mouse when you drag the mouse and theHeight is the y position of the mouse when you drag the mouse.

[as]mouseListener.onMouseDown = function() {
for(i=0;i<10;i++){
eval("square"+i).filters = 0;
}
isDown=true;
xpos=_xmouse;
ypos=_ymouse;
};[/as]
When you click the mouse, its x and y coordinates are stored in the xpos and ypos variables and a boolean variable is set to true (isDown).

[as]mouseListener.onMouseMove = function() {
if(isDown){
var thewidth=_xmouse;
var theheight=_ymouse;
drawLine(xpos,ypos,thewidth,theheight);
}
};[/as]
When you move the mouse, Flash checks if you also have the mouse button down: if(isDown). If you do, it assigns constantly the x and y position of the mouse to thewidth and theheight, then it calls the drawLine function with the xpos,ypos,thewidth, and theheight as arguments.

That's it for this tutorial. Download the Fla files for a more in-depth look, they are fully commented. Contact me if you have any trouble running or understanding these codes.