Convert ActionScript 2.0 code to ActionScript 3.0 - actionscript-3

Question

I currently follow a flash tutorial online to create an interactive sketchpad. The link to tutorial is http://flashexplained.com/actionscript/making-an-interactive-drawing-sketchpad/.
The only problem with this tutorial is that the code is for actionscript 2.0 instead of 3.0. I know how to redefine the variables but besides that I am clueless, so I was hoping that someone can help me convert the code to ActionScript 3.0.
Here is the ActionScript 2.0 code:
lineThickness = 0;
selectedColor = "0x000000";
_root.onMouseDown = startDrawing;
_root.onMouseUp = stopDrawing;
function startDrawing()
{
if(_xmouse < 455)
{
_root.lineStyle(lineThickness, selectedColor);
_root.moveTo(_root._xmouse, _root._ymouse);
_root.onMouseMove = drawLine;
}
}
function drawLine()
{
_root.lineTo(this._xmouse, this._ymouse);
}
function stopDrawing()
{
delete this.onMouseMove;
}
line0.onPress = function()
{
lineThickness = 0;
}
line3.onPress = function()
{
lineThickness = 3;
}
line6.onPress = function()
{
lineThickness = 6;
}
colorRed.onPress = function()
{
selectedColor = "0xFF0000";
}
colorGreen.onPress = function()
{
selectedColor = "0x00FF00";
}

Answer 1

AS2:
lineThickness = 0;
selectedColor = "0x000000";
AS3:
var lineThickness:int = 0;
var selectColor:uint = 0x000000;
AS2:
_root.onMouseDown = startDrawing;
_root.onMouseUp = stopDrawing;
function startDrawing()
{
if(_xmouse < 455)
{
_root.lineStyle(lineThickness, selectedColor);
_root.moveTo(_root._xmouse, _root._ymouse);
_root.onMouseMove = drawLine;
}
}
function stopDrawing()
{
delete this.onMouseMove;
}
function drawLine()
{
_root.lineTo(this._xmouse, this._ymouse);
}
AS3:
stage.addEventListener(MouseEvent.MOUSE_DOWN, startDrawing);
stage.addEventListener(MouseEvent.MOUSE_UP, stopDrawing);
function startDrawing(e:MouseEvent):void
{
if(mouseX < 455)
{
this.graphics.lineStyle(lineThickness, selectedColor);
this.graphics.moveTo(mouseX, mouseY);
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
}
}
function stopDrawing(e:MouseEvent):void
{
stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
}
function mouseMove(e:MouseEvent):void
{
this.graphics.lineTo(mouseX, mouseY);
}
AS2:
line0.onPress = function()
{
lineThickness = 0;
}
line3.onPress = function()
{
lineThickness = 3;
}
line6.onPress = function()
{
lineThickness = 6;
}
colorRed.onPress = function()
{
selectedColor = "0xFF0000";
}
colorGreen.onPress = function()
{
selectedColor = "0x00FF00";
}
AS3:
line0.addEventListener(MouseEvent.CLICK, changeLine);
line3.addEventListener(MouseEvent.CLICK, changeLine);
line6.addEventListener(MouseEvent.CLICK, changeLine);
colorRed.addEventListener(MouseEvent.CLICK, changeColor);
colorGreen.addEventListener(MouseEvent.CLICK, changeColor);
function changeLine(e:MouseEvent):void
{
switch(e.currentTarget)
{
default: lineThickness = 1; break;
case line0: lineThickness = 0; break;
case line3: lineThickness = 0; break;
case line6: lineThickness = 0; break;
}
}
function changeColor(e:MouseEvent):void
{
switch(e.currentTarget)
{
default: selectedColor = 0x000000;
case colorRed: selectedColor = 0xFF0000; break;
case colorGreen: selectedColor = 0x00FF00; break;
}
}
Additional (clear the graphics):
eraser_btn.addEventListener(MouseEvent.CLICK, erase);
function erase(e:MouseEvent):void
{
this.graphics.clear();
}

Answer 2

I recommend you read this http://www.actionscriptcheatsheet.com/downloads/as3cs_migration.pdf
But, here is some tips.
Events you code like this
object.addEventListener(Event.EVENT_TYPE,myFunctionToHandleTheEvent);
in the case of
_root.lineStyle(lineThickness, selectedColor);
_root.moveTo(_root._xmouse, _root._ymouse);
you use this
this.graphics.lineStyle(lineThickness, selectedColor);
this.graphics.moveTo(stage.mouseX, stage.mouseY);
to remove a event listener use
object.removeEventListener(Event.EVENT_TYPE,myFunction);