Basic Introduction to flash's drawing capabilities.

Using Actionscript you are able to draw lines in a movie. This is achieved by a bunch of drawing methods attached to the Movie Clip Class.

What we are going to do today:
This is the first installment of a series of flash drawing tutorials. Today we are just going to have a brief introduction and overview to the drawing methods in the Movie Clip Class. We will create a basic drawing app that will let you draw on the stage at run time.


In future tutorials we will explore into colors, gradients, and much more


Introduction to the methods that we will use today:

lineStyle()
Before drawing any lines in a movieclip you must set a linestyle for that movieclip

Sintax



moveTo()
All movieclips hold a drawing position/coordinate where the line will start. When a movieclip is instance is created on stage the drawing position is set to 0,0 but moveTo() can change the drawing position.

Syntax


lineTo()
This is the one that will do most of the work for us today. This class draws a line from the moviesclips drawing position, in the lineStyle to the position in the method

Syntax



Lets Create the App.

In this app when you click and drag on the stage a line will be drawn, just line in Photoshop or any drawing application. In future tuts we will add color, brushes, and fill shapes, clear stages and event attempt to save our image to a jpg. But today we will just get the basics sorted.

Step 1
First thing first we need to detect when the mouse is down/pressed. So open a new flash doc and add the following code to the first frame of the main timeline

stop();
var isDown:Boolean = false;

onMouseDown = function(){
isDown = true
}

onMouseUp = function(){
isDown = false
}

This code will allow us to tell is the mouse is down or up. As if it is down we will be drawing on the stage

Step 2
We will create a canvas for us to draw on which is just a movieclip. You also draw straight onto the root of the stage but I prefer the movieclip way.

Add the code in bold

stop();

var isDown:Boolean = false;
var mcCanvas:MovieClip = this.createEmptyMovieClip("canvas_mc", this.getNextHighestDepth())

onMouseDown = function(){
isDown = true
}

onMouseUp = function(){
isDown = false
}

Now we have a moveclip called canvas_mc that we can draw on.

Step 3
Now that we have the canvas to draw on we need to adjusts its drawing cords to the mouse position every time the mouse is pressed


Add the code in bold

stop();

var isDown:Boolean = false;
var mcCanvas:MovieClip = this.createEmptyMovieClip("canvas_mc", this.getNextHighestDepth())

onMouseDown = function(){
isDown = true
mcCanvas.moveTo(_xmouse,_ymouse)
}

onMouseUp = function(){
isDown = false
}


Step 4
Now to the part that will actually make this app draw. We are going to use onMouseMove to draw on the canvas, you could also use onEnterFrame.

Add the code in bold
stop();

var isDown:Boolean = false;
var mcCanvas:MovieClip = this.createEmptyMovieClip("canvas_mc", this.getNextHighestDepth())

onMouseDown = function(){
isDown = true
mcCanvas.moveTo(_xmouse,_ymouse)
}

onMouseUp = function(){
isDown = false
}

onMouseMove = function(){
if(isDown){
mcCanvas.lineStyle(2,0x000000,100)
mcCanvas.lineTo(_xmouse,_ymouse)
}
}

When the mouse moves we test to see if the mouse is down and if it is we when set the line style and draw the line.


Test the move and have a play

That’s it… simple

Have a play with colors and brush sizes. Also see if you can create a button that will clear all the lines drawn…
Tip you don’t need to remove or remake the canvas. Have a look in the help

Excellent example, red01! Works great.

I had a look at your code and added a nice little effect to it. Hope you like it

Glad you think its good

I dont mind at all.......

I am not flash literate at all, but this seems to be a very thorough and clear explanation. I just may take a stab at starting, good work

why thank you.. and welcome to the dark side...