Drawing Apllication Question...

[cabaka11]

Hello,

I am creatinh a simple drawig application in AS3. I have assigned everything correctly except that I cannot make it switch between the colors. The code that I have is below:

import flash.display.Sprite;

import flash.events.MouseEvent;

var myThick: int = 2;

var currentColor: Number = 0x000000;

var myCanvas:Sprite;

init();

function init(): void{

    drawCanvas();

    var thickLine:Sprite = new Sprite();

thickLine.graphics.beginFill(0x000000);

thickLine.graphics.drawRect(15, 280, 25, 20);

thickLine.graphics.endFill();

addChild(thickLine);

thickLine.addEventListener(MouseEvent.CLICK, changeToThick);

thickLine.buttonMode = true;

var thinLine:Sprite = new Sprite();

thinLine.graphics.beginFill(0x000000);

thinLine.graphics.drawRect(15, 320, 25, 5);

thinLine.graphics.endFill();

addChild(thinLine);

thinLine.addEventListener(MouseEvent.CLICK, changeToThin);

thinLine.buttonMode = true;

}

function changeToThick(event:MouseEvent):void {

    myThick = 10;

    myCanvas.graphics.lineStyle(10, currentColor);

}

function changeToThin(event:MouseEvent):void {

    myThick = 2;

    myCanvas.graphics.lineStyle(2, currentColor);

}

function drawCanvas(): void {

    myCanvas = new Sprite();

    myCanvas.graphics.beginFill(0xF0F0F0);

    myCanvas.graphics.drawRect(60,20, stage.stageWidth-80, stage.stageHeight-40);

    myCanvas.graphics.endFill();

    myCanvas.graphics.lineStyle(myThick, currentColor);

    addChild(myCanvas);

    myCanvas.addEventListener(MouseEvent.MOUSE_DOWN, startDraw);

    stage.addEventListener(MouseEvent.MOUSE_UP, stopDraw);

    myCanvas.buttonMode = true;

}

function startDraw(event:MouseEvent) : void {

    myCanvas.graphics.moveTo(event.localX, event.localY);

    myCanvas.addEventListener(MouseEvent.MOUSE_MOVE, paintline);

}

function stopDraw (event:MouseEvent): void{

    myCanvas.removeEventListener(MouseEvent.MOUSE_MOVE, paintline);

}

function paintline(event:MouseEvent): void {

    myCanvas.graphics.lineTo(event.localX, event.localY);

    event.updateAfterEvent();

}

{

var blackSwatch:Sprite = new Sprite();

blackSwatch.graphics.beginFill(0x000000);

blackSwatch.graphics.drawCircle(30, 30, 20);

blackSwatch.graphics.endFill();

addChild(blackSwatch);

blackSwatch.buttonMode = true;

blackSwatch.addEventListener(MouseEvent.CLICK, changeToBlack);

}{

var redSwatch: Sprite = new Sprite ();

redSwatch.graphics.beginFill(0xFF0000);

redSwatch.graphics.drawCircle(30, 30, 20);

redSwatch.graphics.endFill();

addChild(redSwatch);

redSwatch.buttonMode = true;

redSwatch.addEventListener(MouseEvent.CLICK, changeToRed);

}{

var yellowSwatch : Sprite = new Sprite();

yellowSwatch.graphics.beginFill(0xFFFF00);

yellowSwatch.graphics.drawCircle(30, 30, 20);

yellowSwatch.graphics.endFill();

addChild(yellowSwatch);

yellowSwatch.buttonMode = true;

yellowSwatch.addEventListener(MouseEvent.CLICK, changeToYellow);

}

function changeToBlack(event:MouseEvent):void {

    myCanvas.graphics.lineStyle(myThick, 0x000000);

    currentColor = 0x000000;

}

function changeToRed(event:MouseEvent):void {

    myCanvas.graphics.lineStyle(myThick, 0xFF0000);

    currentColor = 0xFF0000;

}

function changeToYellow(event:MouseEvent):void {

    myCanvas.graphics.lineStyle(myThick, 0XFFFF00);

    currentColor = 0XFFFF00;

}

var clearSwatch:Sprite = new Sprite();

clearSwatch.graphics.beginFill(0xFFFFFF);

clearSwatch.graphics.lineStyle(2, 0x000000);

clearSwatch.graphics.drawCircle(30, 370, 20);

clearSwatch.graphics.endFill();

addChild(clearSwatch);

clearSwatch.buttonMode = true;

clearSwatch.addEventListener(MouseEvent.CLICK, clearCanvas);

function clearCanvas(event:MouseEvent):void {

    myCanvas.graphics.clear();

    drawCanvas();

}

It is the blackSwatch, redSwatch, YellowSwatch part that is causing the problem. It only gives the color palette of the very last line I write in the actionscript. However, it should give me all of the colors at the same time and I should be able to choose among  them.

I am lost. Coudl someone please help me?

Best Regards,

Cagri Kasap

[Pouradam]

Some small suggestions:

1- Use some hint information lines to help yourself remember what you are doing like this:

\\Set the color of X to Y

2- Some function names I think are missed in above! for example check the BOLD bracets below:

....

function paintline(event:MouseEvent): void {

....

}

{

var blackSwatch:Sprite = new Sprite();

....

blackSwatch.addEventListener(MouseEvent.CLICK, changeToBlack);

}{

var redSwatch: Sprite = new Sprite ();

....

redSwatch.addEventListener(MouseEvent.CLICK, changeToRed);

}{

....

[robdillon]

The only real problem is that you are creating the red, yellow and black color selector sprites one right on top of the other, so you only ever see the yellow one.

Just add:

          redSwatch.y = 50;

after line:

          redSwatch.addEventListener(MouseEvent.CLICK, changeToRed);

and,

          yellowSwatch.y = 100;

after line:

          yellowSwatch.addEventListener(MouseEvent.CLICK, changeToYellow);