Sunday, November 28, 2010

Create a drawing application using AS3: Part 4

Today we will add the ability to select drawing color.

Here's how the final thing will look like:


First, put a ColorPicker component on stage. Give it name of colPicker. Here's the code:

import flash.display.Shape;
import fl.controls.ColorPicker;
import fl.events.ColorPickerEvent;

var myDrawing:Shape = new Shape();
addChild(myDrawing);
myDrawing.graphics.lineStyle(2, drawColor, 1);
var temporaryDrawing:Shape = new Shape();
addChild(temporaryDrawing);
temporaryDrawing.graphics.lineStyle(2, 0x666666, 1);
var mouseHolding:Boolean = false;
var clickedX:Number;
var clickedY:Number;
var drawMode:String = "pen";
var drawColor = "0x" + colPicker.hexValue;

stage.addEventListener(MouseEvent.MOUSE_DOWN, mDown);
stage.addEventListener(MouseEvent.MOUSE_UP, mUp);

function mDown(MouseEvent):void
{
mouseHolding = true;
clickedX = mouseX;
clickedY = mouseY;
myDrawing.graphics.moveTo(mouseX, mouseY);
temporaryDrawing.graphics.moveTo(mouseX, mouseY);
}
function mUp(MouseEvent):void
{
if (mouseY < 400)
{
switch (drawMode)
{
case "line" :
myDrawing.graphics.lineTo(mouseX, mouseY);
break;
case "rect" :
myDrawing.graphics.beginFill(drawColor, 1);
myDrawing.graphics.drawRect(clickedX, clickedY, mouseX-clickedX, mouseY-clickedY);
myDrawing.graphics.endFill();
break;
case "ellip" :
myDrawing.graphics.beginFill(drawColor, 1);
myDrawing.graphics.drawEllipse(clickedX, clickedY, mouseX-clickedX, mouseY-clickedY);
myDrawing.graphics.endFill();
break;
}
}
mouseHolding = false;
clearTemp();
}

stage.addEventListener(MouseEvent.MOUSE_MOVE, mMove);

function mMove(MouseEvent):void
{
if (mouseHolding && mouseY < 400)
{
clearTemp();
switch (drawMode)
{
case "line" :
temporaryDrawing.graphics.lineTo(mouseX, mouseY);
break;
case "pen" :
myDrawing.graphics.lineTo(mouseX, mouseY);
break;
case "rect" :
temporaryDrawing.graphics.drawRect(clickedX, clickedY, mouseX-clickedX, mouseY-clickedY);
break;
case "ellip" :
temporaryDrawing.graphics.drawEllipse(clickedX, clickedY, mouseX-clickedX, mouseY-clickedY);
break;
}
}
}
function clearTemp():void
{
temporaryDrawing.graphics.clear();
temporaryDrawing.graphics.lineStyle(2, 0x666666, 1);
temporaryDrawing.graphics.moveTo(clickedX, clickedY);
}

bt_pen.addEventListener(MouseEvent.CLICK, changeMode);
bt_line.addEventListener(MouseEvent.CLICK, changeMode);
bt_rect.addEventListener(MouseEvent.CLICK, changeMode);
bt_ellipse.addEventListener(MouseEvent.CLICK, changeMode);

function changeMode(evt:MouseEvent):void
{
drawMode = evt.target.value;
}

bt_erase.addEventListener(MouseEvent.CLICK, eraseAll);

function eraseAll(evt:MouseEvent):void
{
myDrawing.graphics.clear();
myDrawing.graphics.lineStyle(2, drawColor, 1);
}

colPicker.addEventListener(ColorPickerEvent.CHANGE, colorHandler);

function colorHandler(evt:ColorPickerEvent):void
{
drawColor = "0x" + colPicker.hexValue;
myDrawing.graphics.lineStyle(2, drawColor, 1);
}
As you can see, we add a new variable drawColor, which consists of "0x" + colPicker.hexValue. Every time we draw something (except for temporary drawing), we set the color as drawColor.

In the end of the code, there's a listener for CHANGE event of the color picker. This basically changes the varaible every time a new color is selected.

Thanks for reading.

Related:

Create a drawing application using AS3: Part 1
Create a drawing application using AS3: Part 2
Create a drawing application using AS3: Part 3
Create a drawing application using AS3: Part 5

1 comment:

chetan's book said...
This comment has been removed by the author.

Post a Comment