This tutorial assumes you are using Flash CS3 or Flash CS4. You should have basic programming experience.
We are going to create a lasso tool, like the one you see everyday on your desktop by dragging the cursor and selecting icons. You can apply the following technique to games as well. Specifically I have real time strategies games in mind 
It’s easy to code and it’s only about 50-60 lines in total. A screenshot of the end product:
Part 1 - Setup
1. Go to File->New and Create a new Flash File (Actionscript 3.0).
2. Save the file, call it anything you want.
3. Go to File->New again and this time create a new ActionScript File. Save this file as “Lasso” without the quotes.
4. Go back to the Flash File and change the Class in the Properties panel to “Lasso”. This refers to the Actionscript file that you create and saved in step 3. Should a dialogue box pop up just click OK:
5. Go back to the “Lasso” Actionscript file. This is where we’re going to do everything. We will not be doing anything on the timeline.
Part 2 - Coding
Now we can begin programming. I’ll go through the code chunk by chunk. At the end of the tutorial is the full code.
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Point;
We start off by importing the stuff we need. Specifically we are importing classes. These classes are part of the Flash API.
public class Lasso extends Sprite
{
private var dragging:Boolean = false;
private var start_drag_location:Point = new Point();
Now we’ve started to code our Lasso class, which extends the Sprite class. Then we make 2 class variables. The first, dragging is a flag telling us whether the user has the mouse button down and is dragging the mouse. The second, start_drag_location is a Point indicating where the user first began dragging the mouse. The Point class represents a coordinate with properties x and y. We’ll need these variables later.
public function Lasso()
{
stage.addEventListener(Event.ENTER_FRAME, handleEnterFrame);
stage.addEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown);
stage.addEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
}
This part is the class constructor. All it does here is add 3 event listeners to the stage. Now the stage will listen to these events. The Event.ENTER_FRAME event is fired at every single frame. In other words it occurs continuously and as quickly as the framerate you set in the Properties panel. This event is handeled by a function call handleEnterFrame , which we will look at next.
private function handleEnterFrame(event:Event):void
{
if(dragging)
{
graphics.clear();
graphics.lineStyle(1, 0x00ff00);
var theWidth:Number = mouseX - start_drag_location.x; //current width so far
var theHeight:Number = mouseY - start_drag_location.y; //current height so far
var top:Point = new Point(start_drag_location.x, start_drag_location.y);
var bottom:Point = new Point(start_drag_location.x, start_drag_location.y + theHeight);
var left:Point = new Point(start_drag_location.x, start_drag_location.y);
var right:Point = new Point(mouseX, start_drag_location.y);
graphics.moveTo(top.x, top.y);
graphics.lineTo(top.x + theWidth, top.y);
graphics.moveTo(bottom.x, bottom.y);
graphics.lineTo(bottom.x + theWidth, bottom.y);
graphics.moveTo(left.x, left.y);
graphics.lineTo(left.x, left.y + theHeight);
graphics.moveTo(right.x, right.y);
graphics.lineTo(right.x, right.y + theHeight);
}
}
OK, let’s break it up.
var theWidth:Number = mouseX - start_drag_location.x; //current width so far
var theHeight:Number = mouseY - start_drag_location.y; //current height so far
These 2 lines determine the width and height of the lasso box constantly as long as the user is dragging the mouse.
var top:Point = new Point(start_drag_location.x, start_drag_location.y);
var bottom:Point = new Point(start_drag_location.x, start_drag_location.y + theHeight);
var left:Point = new Point(start_drag_location.x, start_drag_location.y);
var right:Point = new Point(mouseX, start_drag_location.y);
These lines of code determine the positions of the 4 lines that make up the box. We are going to draw each line separately and this will form into a box. Of course we cannot just say that a line has a position at a point x, y. Where on the line is the anchor? So for the horizontal lines, the anchor is at leftmost tip. For the vertical lines the position is at the topmost point. Also we have been assuming that the user forms the lasso by dragging from the top left to the bottom right. If the user draws the lasso in any other way then top may refer to bottom and left may refer to right etc. However, no changes need to be made to the code to handle the other situations, it’ll work in any case.
graphics.moveTo(top.x, top.y);
graphics.lineTo(top.x + theWidth, top.y);
graphics.moveTo(bottom.x, bottom.y);
graphics.lineTo(bottom.x + theWidth, bottom.y);
graphics.moveTo(left.x, left.y);
graphics.lineTo(left.x, left.y + theHeight);
graphics.moveTo(right.x, right.y);
graphics.lineTo(right.x, right.y + theHeight);
These lines of code are the ones that actually draw the box. Imagine a pen that moves to each position and draws a line from that position to the specified end point. We simply get the end point by adding the height or width of the line. Soon, a nice box is formed!
private function handleMouseDown(event:MouseEvent):void
{
dragging = true;
start_drag_location = new Point(mouseX, mouseY);
}
private function handleMouseUp(event:MouseEvent):void
{
dragging = false;
graphics.clear();
}
These 2 functions handle the mouse down and mouse up events. When the mouse is pressed we set the dragging flag to true, and record the location where the user began dragging in the start_drag_location class variable. When the mouse is released we set the set the flag to false and remove the box by calling clear() on the graphics object.
That is all. Now go back to the flash file and press Ctrl+Enter to run it.
You will now be able to form a lasso with the mouse. This tutorial didn’t cover actually selecting things with a lasso. To do that you would just need an array that stores the selected objects. When you select an area, then check which objects are within the bounds of that area and add them to the array by using the push() function on the array.
The Code in Full
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Point;
public class Lasso extends Sprite
{
private var dragging:Boolean = false;
private var start_drag_location:Point = new Point();
public function Lasso()
{
stage.addEventListener(Event.ENTER_FRAME, handleEnterFrame);
stage.addEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown);
stage.addEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
}
private function handleEnterFrame(event:Event):void
{
if(dragging)
{
graphics.clear();
graphics.lineStyle(1, 0x00ff00);
var theWidth:Number = mouseX - start_drag_location.x; //current width so far
var theHeight:Number = mouseY - start_drag_location.y; //current height so far
var top:Point = new Point(start_drag_location.x, start_drag_location.y);
var bottom:Point = new Point(start_drag_location.x, start_drag_location.y + theHeight);
var left:Point = new Point(start_drag_location.x, start_drag_location.y);
var right:Point = new Point(mouseX, start_drag_location.y);
graphics.moveTo(top.x, top.y);
graphics.lineTo(top.x + theWidth, top.y);
graphics.moveTo(bottom.x, bottom.y);
graphics.lineTo(bottom.x + theWidth, bottom.y);
graphics.moveTo(left.x, left.y);
graphics.lineTo(left.x, left.y + theHeight);
graphics.moveTo(right.x, right.y);
graphics.lineTo(right.x, right.y + theHeight);
}
}
private function handleMouseDown(event:MouseEvent):void
{
dragging = true;
start_drag_location = new Point(mouseX, mouseY);
}
private function handleMouseUp(event:MouseEvent):void
{
dragging = false;
graphics.clear();
}
}
}