Create a Simple Drawing Pad

Just click and drag the mouse around the application window and get creative!

Here's the code...

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
        width="100%"
        height="100%"
        creationComplete="init()">
   
    <mx:Script>
        <![CDATA[
            import mx.core.UIComponent;
                       
            [Bindable]
            private var prevX:Number = 0;
           
            [Bindable]
            private var prevY:Number = 0;
                       
            private function init():void{
                //on mouse down we'll begin drawing a line...
                addEventListener(MouseEvent.MOUSE_DOWN,startDrawingLine,false,0,true);
                //we'll stop drawing when the mouse button is released...
                addEventListener(MouseEvent.MOUSE_UP,stopDrawingLine,false,0,true);
                //we'll also stop drawing when the mouse cursor moves off of the application...
                addEventListener(MouseEvent.MOUSE_OUT,stopDrawingLine,false,0,true);
            }
           
            private function startDrawingLine(evt:MouseEvent):void{
                //on mouse down we'll initiate drawing as the mouse moves...
                addEventListener(MouseEvent.MOUSE_MOVE,handleDrawMove,false,0,true);
            }
           
            private function stopDrawingLine(evt:MouseEvent):void{
                //reset prevX and prevY when the user finishes drawing a line...
                prevX = 0;
                prevY = 0;
                //stop drawing...
                removeEventListener(MouseEvent.MOUSE_MOVE,handleDrawMove,false);
            }
                       
            private function handleDrawMove(evt:MouseEvent):void{
                if(prevX == 0 || prevY == 0){
                    //this indicates that we are just beginning to start drawing a new line,
                    //so we'll set prevX and prevY to the position that the mouse cursor is in...
                    prevX = evt.localX;
                    prevY = evt.localY;
                }else{
                    //in this scenario, we are in the middle of drawing a line
                    //so draw a line from the previous position (prevX, prevY)
                    //to the current position of the mouse cursor...
                    graphics.lineStyle(10,0x000000,1);
                    graphics.moveTo(prevX,prevY);
                    graphics.lineTo(evt.localX,evt.localY);
                    //now set prevX and prevY to the current position of the mouse cursor..
                    prevX = evt.localX;
                    prevY = evt.localY;
                }
            }
        ]]>
    </mx:Script>
   
</mx:Canvas>