AS3 - Creating rectangle with mouse - actionscript-3

Question

I want to make a top down strategy game in as3, and I want the user to be able to mark multiple movieclips with the mouse, like in operating systems where ju press the mouse button down and then drag the mouse, and it will create a rectangle. How do you do that in as3?

Answer 1

stage.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
var sp : Sprite = new Sprite();
var p1 : Point = new Point();
var p2 : Point = new Point();
function onDown(e:MouseEvent) : void {
p1.x = mouseX;
p1.y = mouseY;
addEventListener(Event.ENTER_FRAME, onMove);
}
function onMove(e:Event) : void {
p2.x = mouseX;
p2.y = mouseY;
draw();
}
function onUp(e:MouseEvent) : void {
removeEventListener(Event.ENTER_FRAME, onMove);
stage.removeChild(sp);
}
function draw() : void {
sp.graphics.clear();
p2.x = p2.x - p1.x;
p2.y = p2.y - p1.y;
sp.graphics.lineStyle(1, 0x0000FF);
sp.graphics.beginFill(0xC2C2C2, 0.2);
sp.graphics.drawRect(p1.x, p1.y, p2.x, p2.y);
stage.addChild(sp);
}
Hope this helps...

Answer 2

You can do like that (copy and paste the following code into your Actions panel):
var s:Shape = new Shape();
s.graphics.beginFill(0xC2C2C2, 0.2);
s.graphics.lineStyle(0, 0x666666);
s.graphics.drawRect(0, 0, 100, 100);
function mouseDownHandler(e:MouseEvent):void {
addChild(s);
s.x = e.stageX;
s.y = e.stageY;
addEventListener(Event.ENTER_FRAME, enterFrameHandler);
}
function enterFrameHandler(e:Event):void {
s.scaleX = (mouseX - s.x) / 100;
s.scaleY = (mouseY - s.y) / 100;
}
function mouseUpHandler(e:MouseEvent):void {
removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
removeChild(s);
}
stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

Answer 3

It's nice to have a simple selection box, but how about some selectable objects?
Have a look at what I've got, it's quite simple, and most of the code is for the visuals.
// Add 100 green circles.
var objects:Vector.<Sprite> = new Vector.<Sprite>();
for(var i:int = 0; i < 100; ++i){
var object:Sprite = new Sprite();
object.x = Math.random() * stage.stageWidth;
object.y = Math.random() * stage.stageHeight;
object.graphics.lineStyle(2, 0x00FF00);
object.graphics.beginFill(0x00FF00, 0.5);
object.graphics.drawCircle(0,0,15);
object.graphics.endFill();
objects.push(object);
addChild(object);
}
// Main variables we'll be using.
var startPos:Point = new Point();
var selection:Rectangle = new Rectangle();
var isSelecting:Boolean = false;
// Mouse listeners.
stage.addEventListener(MouseEvent.MOUSE_DOWN, mDown);
stage.addEventListener(MouseEvent.MOUSE_UP, mUp);
function mDown(e:MouseEvent):void {
startPos.x = stage.mouseX;
startPos.y = stage.mouseY;
isSelecting = true;
}
function mUp(e:MouseEvent):void {
isSelecting = false;
}
// Main loop; check if we're intersecting with any of the sprites; if so render them yellow.
stage.addEventListener(Event.ENTER_FRAME, loop);
function loop(e:Event):void {
graphics.clear();
if(isSelecting) {
selection = new Rectangle(startPos.x, startPos.y, stage.mouseX - startPos.x, stage.mouseY - startPos.y);
normalize(selection);
graphics.lineStyle(2, 0xFF0000);
graphics.beginFill(0xFF0000, 0.5);
graphics.drawRect(selection.x, selection.y, selection.width, selection.height);
graphics.endFill();
for (var j:int = 0; j < objects.length; ++j) {
var object:Sprite = objects[j];
if(selection.intersects(object.getBounds(this))){
object.graphics.clear();
object.graphics.lineStyle(2, 0xFFCC00);
object.graphics.beginFill(0xFFCC00, 0.5);
object.graphics.drawCircle(0,0,15);
object.graphics.endFill();
}
}
}
}
// Intersection requires positive values.
function normalize(rect:Rectangle):void {
if (rect.width < 0) {
rect.width = -rect.width;
rect.x -= rect.width;
}
if (rect.height < 0) {
rect.height = -rect.height;
rect.y -= rect.height;
}
}