Convert ActionScript 2.0 code to ActionScript 3.0

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";
}

Marty Marty · Accepted Answer · 2012-07-24T01:13:27

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();
}

Convert ActionScript 2.0 code to ActionScript 3.0

2 Answers