In this tutorial we are going to develop flash drawing pad using actionscript3. In this tutorial we are using color picker component and Numeric stepper.
Let’s start . open New flash cs3 file. Create new Movie clip , name it as “drawpad”. Drag and drop color component from components list and give instance name as “mcColor” , similarly drag and drop Numeric stepper and name it as “mcStepper”. Create new Moviclip called “bg”, and make drawable area inside that. Now drag this Movieclip inside “drawpad” Movieclip. Now write the following script in the first frame of “drawpad” Movieclip.
import flash.display.DisplayObject;
import flash.display.Graphics;
import flash.display.Shape;
import flash.display.Sprite;
import flash.display.MovieClip;
var isDrawing:Boolean = false;
var child:Shape = new Shape();
var bytes:ByteArray;
var thisX;
var thisY;
canvas.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
canvas.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
canvas.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
function mouseDownHandler(event:MouseEvent) {
isDrawing = true;
if ( isDrawing) {
var val=mcStepper.value;
var col=mcColor.selectedColor;
child.graphics.lineStyle(val, col);
child.graphics.moveTo(mouseX, mouseY);
thisX=mouseX;
thisY=mouseY;
}
}
function mouseMoveHandler(event:MouseEvent) {
//cursor.x=mouseX;
//cursor.y=mouseY;
if (isDrawing) {
child.graphics.lineTo(mouseX, mouseY);
canvas.addChild(child);
//child.graphics.curveTo(thisX,thisY,mouseX, mouseY);
}
/*if(mouseX <> 295)
{
isDrawing = false;
}
if(mouseY <> 145)
{
isDrawing = false;
}*/
}
function mouseUpHandler(event:MouseEvent) {
isDrawing = false;
var myBitmapData:BitmapData = new BitmapData (canvas.width, canvas.height, false, 0x00FFFFFF);
var rect:Rectangle = new Rectangle(0, 0, canvas.width, canvas.height);
myBitmapData.draw(canvas);
//
bytes = myBitmapData.getPixels(rect);
//
bytes.position = 0;
}
Thats all. you can download source file from here
