Actionscript freehand drawing class does not working

Question

I am trying to write a simple as3 drawing class, but it does not working. Not even the events fire. What could be the problem?

Usage:

var drawingBoard:Drawing = new Drawing();
drawingBoard.x = 0;
drawingBoard.y = 0;
drawingBoard.width = 200;
drawingBoard.height = 100;

addChild(drawingBoard);

Class:

package {
    import flash.display.Shape;
    import flash.display.Sprite;
    import flash.events.MouseEvent;

    public class Drawing extends Sprite {
        private var prevX:Number = 0;
        private var prevY:Number = 0;
        private var board:Shape = new Shape();

        public function Drawing() {
            trace("Drawing initialized.");

            addChild(board);

            addEventListener(MouseEvent.MOUSE_DOWN, startDrawing);
            addEventListener(MouseEvent.MOUSE_UP, stopDrawing);
            addEventListener(MouseEvent.MOUSE_OUT, stopDrawing);
        }

        private function startDrawing(event:MouseEvent):void {
            trace("Start drawing.");

            addEventListener(MouseEvent.MOUSE_MOVE,handleDrawing);
        }

        private function stopDrawing(event:MouseEvent):void {
            trace("Stop drawing.");

            prevX = 0;
            prevY = 0;
            removeEventListener(MouseEvent.MOUSE_MOVE,handleDrawing,false);
        }

        private function handleDrawing(event:MouseEvent):void {
            trace("Handling drawing.");

            if (prevX == 0 || prevY == 0) {
                prevX = event.localX;
                prevY = event.localY;
            } else {
                board.graphics.lineStyle(10, 0x000000, 1);
                board.graphics.moveTo(prevX, prevY);
                board.graphics.lineTo(event.localX, event.localY);
                prevX = event.localX;
                prevY = event.localY;
            }
        }
    }
}

Answer 1

First of all setting the width/height of an empty sprite doesn't do anything. If you wan't to have an empty sprite with the dimensions 200/100 you need to draw something into it.

I modified your class so that it starts working after you add it to the stage:

package {
    import flash.display.Shape;
    import flash.display.Sprite;
    import flash.events.MouseEvent;

    public class Drawing extends Sprite {
        private var prevX:Number = 0;
        private var prevY:Number = 0;
        private var board:Shape = new Shape();

        public function Drawing() {
            trace("Drawing initialized.");

            addChild(board);
            //clear board to white
            board.graphics.beginFill(0xffffff,1);
            board.graphics.drawRect(0,0,200,100);
            board.graphics.endFill();

            addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
        }

        private function onAddedToStage(e:Event):void
        {
            removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);

            addEventListener(MouseEvent.MOUSE_DOWN, startDrawing);
            addEventListener(MouseEvent.MOUSE_UP, stopDrawing);
            addEventListener(MouseEvent.MOUSE_OUT, stopDrawing);
        }

        private function startDrawing(event:MouseEvent):void {
            trace("Start drawing.");

            addEventListener(MouseEvent.MOUSE_MOVE,handleDrawing);
        }

        private function stopDrawing(event:MouseEvent):void {
            trace("Stop drawing.");

            prevX = 0;
            prevY = 0;
            removeEventListener(MouseEvent.MOUSE_MOVE,handleDrawing,false);
        }

        private function handleDrawing(event:MouseEvent):void {
            trace("Handling drawing.");

            if (prevX == 0 || prevY == 0) {
                prevX = event.localX;
                prevY = event.localY;
            } else {
                board.graphics.lineStyle(10, 0x000000, 1);
                board.graphics.moveTo(prevX, prevY);
                board.graphics.lineTo(event.localX, event.localY);
                prevX = event.localX;
                prevY = event.localY;
            }
        }
    }
}

Answer 2

Regarding to Mr. Barış Uşaklı's answer, I modified the class, so it is completely functional.

Also, I modified the event handling to make the performance better, because adding new event listeners and removing them was really slow.

Initialization:

var drawingBoard:Drawing = new Drawing(stage.stageWidth, stage.stageHeight);
addChild(drawingBoard);

Clearing:

drawingBoard.clearDrawing();

Modifying color and pencil width:

drawingBoard.drawingColor = 0x123456;
drawingBoard.drawindWidth = 16;

Class:

package {
    import flash.display.Shape;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;

    public class Drawing extends Sprite {
        private var prevX:Number = 0;
        private var prevY:Number = 0;
        private var board:Shape = new Shape();
        private var isDrawing:Boolean = false;

        public var drawingColor:uint = 0x6666aa;
        public var drawingWidth:int = 2;

        public function Drawing(width:int, height:int) {
            trace("Drawing initialized.");

            addChild(board);

            board.graphics.beginFill(0xffffff, 0); // I like transparent things
            board.graphics.drawRect(0, 0, width, height);
            board.graphics.endFill();

            addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
        }

        private function onAddedToStage(event:Event):void {
            removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);

            addEventListener(MouseEvent.MOUSE_DOWN, startDrawing);
            addEventListener(MouseEvent.MOUSE_UP, stopDrawing);
            addEventListener(MouseEvent.MOUSE_OUT, stopDrawing);
            addEventListener(MouseEvent.MOUSE_MOVE, handleDrawing);
        }

        public function clearDrawing():void {
            board.graphics.clear();
        }

        private function startDrawing(event:MouseEvent):void {
            trace("Start drawing.");
            isDrawing = true;
        }

        private function stopDrawing(event:MouseEvent):void {
            trace("Stop drawing.");

            prevX = 0;
            prevY = 0;
            isDrawing = false;
        }

        private function handleDrawing(event:MouseEvent):void {
            if (isDrawing == true){
                trace("Handling drawing at " + event.localX + " x " + event.localY);

                if (prevX != 0 && prevY != 0) {
                    board.graphics.lineStyle(drawingWidth, drawingColor, 1);
                    board.graphics.moveTo(prevX, prevY);
                    board.graphics.lineTo(event.localX, event.localY);
                }

                prevX = event.localX;
                prevY = event.localY;
            }
        }
    }
}