Changing Shape on Button Press Action Script 3.0

Question

Alright, sorry if this is a pretty easy question to get answered, but I looked around through pages and pages on google and couldn't find anything somewhat related. I got a lot of help, but I still can't seem to get this part of my ActionScript working. I have a program, that when running, allows me to paint random color squares on mouse click. I added a button, that is supposed to be able to change the shape being painted from rectangle to circle. I can't seem to get that button to work. This is what my code looks like so far.

    var color:Number;

stage.addEventListener(MouseEvent.MOUSE_DOWN, startDrawing);
stage.addEventListener(MouseEvent.MOUSE_UP, stopDrawing);

function startDrawing(e:MouseEvent):void {
    stage.addEventListener(MouseEvent.MOUSE_MOVE, makeShapes);
    color = Math.random() * 0xFFFFFF;
}

function stopDrawing(e:MouseEvent):void {
    stage.removeEventListener(MouseEvent.MOUSE_MOVE, makeShapes);
}

function makeShapes(e:MouseEvent):void {
var rect:Rect = new Rect(10,10,color);
    addChild(rect);
    rect.x = mouseX;
    rect.y = mouseY;
}

shape_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
function mouseDownHandler(event:MouseEvent):void {

}

At the bottom I left it blank, it seems to be the part I'm stuck on. I've tried simply setting the VAR to my "Ellipse" class I had made, which gets it to work, but only that one time when I click the button. It doesn't stay a circle and allow me to paint with the shape. Again I'm sorry, I felt like I was getting pretty close to the solution, and then I hit a wall.

Roy Roy · Accepted Answer · 2011-03-02T21:52:36

Hard to understand what the difficulty is, but I'll try to address what I understand.

First, the stage mouse down event will capture your button event, so you might as well get rid of it and stick to one mouse event.

stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
private function onMouseDown(ev:Event):void
{
   if (ev.target==shape_btn)
       changeShape();
   else if (ev.target==stage)
       startDrawing();
}

Or something along those lines. Second, I don't know what Rect is. Is it a class you have an access to? This is how I'd do it without a special class:

private function makeShape():void
{
    switch (shapeType)
    {
      case "rect":
         drawRect();
         break;
       case "circle":
         drawCircle();
         break;
    }
}

private function drawRect():void
{
    var rect:Shape = new Shape();
    rect.graphics.beginFill(color);
    rect.graphics.drawRect(0, 0, 10, 10);
    rect.x = mouseX;
    rect.y = mouseY;
    addChild(rect);
}

private function drawCircle():void
{
    var circle:Shape = new Shape();
    circle.graphics.beginFill(0xff0000);
    circle.graphics.drawCircle(0, 0, 10);
    circle.x = mouseX;
    circle.y = mouseY;
    addChild(circle);
}

and finally, the changeShape function:

private function changeShape():void
{
    shapeType = shapeType=="rect"?"circle":"rect";
}

There are better ways to go about it, but when dealing with two shape types only this is acceptable.

Of course you need to have a var shapeType:String = "rect" somewhere in your code, outside the functions.

I also think the color randomization should be in the mouse move handler rather than the mouse click. Is that on purpose?

Changing Shape on Button Press Action Script 3.0

1 Answers