Actionscript programming using Adobe Flash is very easy and interesting. Here we have a simple 15 mins tutorial for creating a simple Doodle Application.

Step 1

Open up Adobe flash.
Create a new file (Flash File (Actionscript 3.0))
Press F9 so that you get the ‘actions’ window.
This is the place you are going to write code.

Step 2 (Intro to variables and event listeners)

Syntax

Variables : var <variable_name>:<variable_type> = <initial_value>;

Event Listener : <object>.addeventListener(<event>,<callback_function>);

Function : function <function_name>(<Arguments>){

<Statements>

}

Example

var x1:int = 1; //Not used anywhere. This is just to demonstrate syntax.
stage.addEventListener(MouseEvent.MOUSE_DOWN,traceMe);
function traceMe(e:MouseEvent){  //invoked when Mouse Down(Click) event happens.
	trace("Hello World");
}

var x1:int = 1; //Not used anywhere. This is just to demonstrate syntax.

stage.addEventListener(MouseEvent.MOUSE_DOWN,traceMe);

function traceMe(e:MouseEvent){ //invoked when Mouse Down(Click) event happens.

trace("Hello World");

}

The above example just demonstrates the usage of event listeners. A mouse down event listener is added to the stage object which triggers a function named ‘traceMe’. traceMe outputs the text “Hello World”.

Step 3(Creating Doodle)

var x1:int;// variable to store previous x position.
var y1:int;// variable to store previous y position.
var isPressed:Boolean = false;
var drawingLine:MovieClip = new MovieClip();
addChildAt(drawingLine,0);
drawingLine.graphics.lineStyle(3); //sets the line thickness to 3 px.
stage.addEventListener(MouseEvent.MOUSE_DOWN,startDraw);
stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseDownDraw);
stage.addEventListener(MouseEvent.MOUSE_UP,stopDraw);
function mouseDownDraw(e:MouseEvent){

}
function startDraw(e:MouseEvent){

}
function stopDraw(e:MouseEvent){

}

var x1:int;// variable to store previous x position.

var y1:int;// variable to store previous y position.

var isPressed:Boolean = false;

var drawingLine:MovieClip = new MovieClip();

addChildAt(drawingLine,0);

drawingLine.graphics.lineStyle(3); //sets the line thickness to 3 px.

stage.addEventListener(MouseEvent.MOUSE_DOWN,startDraw);

stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseDownDraw);

stage.addEventListener(MouseEvent.MOUSE_UP,stopDraw);

function mouseDownDraw(e:MouseEvent){

}

function startDraw(e:MouseEvent){

}

function stopDraw(e:MouseEvent){

}

In order to draw we need a ‘surface’. Here we create a new movie clip as our ‘surface’ and use its graphics properties to draw the line. ‘drawingLine’ is the new movie clip created and is inserted to the stage by using the function addChildAt

addChildAt(<Child to insert>,<z-index>);

Algorithm

The mouse move event gives us a series of points when dragged. The aim is to draw lines connecting these points. We use the standard algorithm of storing the previous point in a variable so as to draw line connecting to the current point when the mouse is moved. The algorithm is described in detail below.

When MOUSE_DOWN(Click) event occurs store the point x,y to variables x1,y1 as discussed above. Also set isPressed to true to indicate that the user has initiated drawing.
MOUSE_MOVE event is triggered every time the mouse is moved. So if ‘isPressed’ is true, draw line from the previous point stored to the current point. Also store the current point as the new previous point.
MOUSE_UP is triggered when used leaves the mouse button. Here just set the ‘isPressed’ to false as the user has stopped drawing.

Code

var x1:int;
var y1:int;
var isPressed:Boolean = false;
var drawingLine:MovieClip = new MovieClip();
addChildAt(drawingLine,0);
drawingLine.graphics.lineStyle(3);
stage.addEventListener(MouseEvent.MOUSE_DOWN,startDraw);
stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseDownDraw);
stage.addEventListener(MouseEvent.MOUSE_UP,stopDraw);
function mouseDownDraw(e:MouseEvent){
	if(isPressed)
		drawLine(e.target.mouseX,e.target.mouseY);
}
function startDraw(e:MouseEvent){
	x1 = e.target.mouseX;
	y1 = e.target.mouseY;
	isPressed = true;
}
function stopDraw(e:MouseEvent){
	isPressed = false;
}
function drawLine(x:int,y:int){
	drawingLine.graphics.moveTo(x1,y1);
	drawingLine.graphics.lineTo(x,y);
	x1 = x;
	y1 = y;
}

var x1:int;

var y1:int;

var isPressed:Boolean = false;

var drawingLine:MovieClip = new MovieClip();

addChildAt(drawingLine,0);

drawingLine.graphics.lineStyle(3);

stage.addEventListener(MouseEvent.MOUSE_DOWN,startDraw);

stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseDownDraw);

stage.addEventListener(MouseEvent.MOUSE_UP,stopDraw);

function mouseDownDraw(e:MouseEvent){

if(isPressed)

drawLine(e.target.mouseX,e.target.mouseY);

}

function startDraw(e:MouseEvent){

x1 = e.target.mouseX;

y1 = e.target.mouseY;

isPressed = true;

}

function stopDraw(e:MouseEvent){

isPressed = false;

}

function drawLine(x:int,y:int){

drawingLine.graphics.moveTo(x1,y1);

drawingLine.graphics.lineTo(x,y);

x1 = x;

y1 = y;

}

2 thoughts on “Creating a simple doodle application using Actionscript 3.0”

twitter followers on May 18, 2012 at 12:46 am said:

Thanks for another informative site. The place else may I am getting that kind of information written in such a perfect manner? I have a undertaking that I’m just now running on, and I have been at the look out for such info.

Log in to Reply
how to law of attraction on May 18, 2012 at 1:41 am said:

I do believe all of the ideas you have presented for your post. They are really convincing and will definitely work. Still, the posts are too brief for beginners. May just you please prolong them a bit from next time? Thanks for the post.

Log in to Reply