Flash CS6/as3: Using cursor to draw rectangle dynamically in a published swf

Question

I'm having a bit of a problem. I'm creating a swf that will allow someone to draw a rectangle dynamically in a published swf, then they can drag a shape and place it within the rectangle they just drew.

I have the swf working so that you can draw a rectangle, no problem. Where the issue arises is when trying to drag one of the shapes on the screen into the newly-drawn rectangle, it ends up drawing another rectangle while the shape is being dragged.

My question, I guess, is how do I "turn off" the code that allows for a rectangle to be drawn after I've drawn the one I want to use?

This is the code I used for drawing the rectangle (I got this from a tutorial online). The draggable shapes don't show up until the rectangle has been drawn (they are on the next frame):

stop();

import flash.display.Shape;

var temporaryDrawing:Shape = new Shape();
addChild(temporaryDrawing);
temporaryDrawing.graphics.lineStyle(3, 0x000000, 1);

var myDrawing:Shape = new Shape();
addChild(myDrawing);
myDrawing.graphics.lineStyle(3, 0x000000, 1);

var mouseHolding:Boolean=false;
var clickedX:Number;
var clickedY:Number;


stage.addEventListener(MouseEvent.MOUSE_DOWN, mDown);
stage.addEventListener(MouseEvent.MOUSE_UP, mUp);

function mDown(MouseEvent):void{
    mouseHolding = true;
    clickedX = mouseX;
    clickedY = mouseY;
}

function mUp(MouseEvent):void{
    mouseHolding = false;
    myDrawing.graphics.drawRect(clickedX, clickedY, mouseX-clickedX, mouseY-clickedY);
    nextFrame();
    clearTemp ()
}

stage.addEventListener(MouseEvent.MOUSE_MOVE, mMove);
function mMove(MouseEvent):void{
    if (mouseHolding){
        clearTemp ();
        temporaryDrawing.graphics.drawRect(clickedX, clickedY, mouseX-clickedX, mouseY-clickedY)

    }
}

function clearTemp():void{
    temporaryDrawing.graphics.clear();
    temporaryDrawing.graphics.lineStyle(3, 0x000000, 1)
}

null null · Accepted Answer · 2015-06-26T13:30:58

You can differentiate by the target of the MouseEvent.

The draw listener is added to the stage. currentTarget will be exactly that, stage. The listener that initiates the dragging is (probably) added to the object that should be dragged. currentTarget will be a reference to that.

Due to bubbling every MouseEvent will end up at the stage, that's why your rectangle is drawn again. The difference is that the target of the MouseEvent will be different.

In the function that handles the MouseEvent for drawing the rectangle, simply check if currentTarget == target, if that's the case, the mouse was clicked on the stage and nothing else. If they are not the same, the mouse was clicked on something else, the intention is not to draw a rectangle.

This will basically disable the rectangle drawing if anything else is clicked that's not the stage.

You can probably also achieve this with stopPropagation() and adding listeners for different event phases. But I have no time to think this through.

Flash CS6/as3: Using cursor to draw rectangle dynamically in a published swf

1 Answers