Monday, November 29, 2010

Create a drawing application using AS3: Part 5

Today we'll add 2 sliders to our application - line thickness and alpha channel.

Try it out here:


Firstly, add two sliders to the stage. Name one penSlider, the other one alphaSlider. It's important to set the right options for the components - the minimum/maximum values and the snap interval. The alphaSlider has to have maximum value of 1 and minimum of 0, with a snapInterval 0.1 or less. I used 0.05 in this example. PenSlider could have something like 1 to 40 with snap interval of 1, but it's all up to you.

Now, here is the code.

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

var myDrawing:Shape = new Shape();
addChild(myDrawing);
myDrawing.graphics.lineStyle(penSlider.value, drawColor, alphaSlider.value);

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, alphaSlider.value);
myDrawing.graphics.drawRect(clickedX, clickedY, mouseX-clickedX, mouseY-clickedY);
myDrawing.graphics.endFill();
break;
case "ellip" :
myDrawing.graphics.beginFill(drawColor, alphaSlider.value);
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(penSlider.value, drawColor, alphaSlider.value);
}

colPicker.addEventListener(ColorPickerEvent.CHANGE, colorHandler);

function colorHandler(evt:ColorPickerEvent):void{
drawColor = "0x" + colPicker.hexValue
myDrawing.graphics.lineStyle(penSlider.value, drawColor, alphaSlider.value);
}

penSlider.addEventListener(SliderEvent.CHANGE, thicknessHandler);

function thicknessHandler(evt:SliderEvent):void{
myDrawing.graphics.lineStyle(penSlider.value, drawColor, alphaSlider.value);
}

alphaSlider.addEventListener(SliderEvent.CHANGE, alphaHandler);

function alphaHandler(evt:SliderEvent):void{
myDrawing.graphics.lineStyle(penSlider.value, drawColor, alphaSlider.value);
}
As you can see, I changed each alpha value when drawing something to alphaSlider.value and each thickness value to penSlider.value. The linestyles are updated when a slider is moved by the user.

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 4

5 comments:

Nurul Balqis said...

Do you have a complete tutorial to add radio button and slider component to this application?
Thank you.

Kirill Poletaev said...

You simply drag them straight from the components window (Ctrl + F7) if you're working in Adobe Flash, if you're adding everything by code - import the classes and add them using addChild().

Anonymous said...

What about saving the drawings as shared objects?

Anonymous said...

Shared object cont'd - So that when the user opens the SWF again, the drawing is still there. Can this be easily done?

Kirill Poletaev said...

Hmm, you could try capturing the drawn bitmap data and storing it as a BitmapData object in a shared object.

My BitmapData tutorials might help you out.

Post a Comment