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:

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);
}

This function takes two movie clips as parameter and draws a line between them.

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);

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.

if((line_mc._width<circle1_mc._width) && (line_mc._height<circle1_mc._width)){
distance_txt.text="Collision!";
}

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:

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
}
}


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:

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);
}
}

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.

mouseListener.onMouseDown = function() {
for(i=0;i<10;i++){
eval("square"+i).filters = 0;
}
isDown=true;
xpos=_xmouse;
ypos=_ymouse;
};

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).

mouseListener.onMouseMove = function() {
if(isDown){
var thewidth=_xmouse;
var theheight=_ymouse;
drawLine(xpos,ypos,thewidth,theheight);
}
};

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.