By: SitePoint

April 28th, 2003

Reader Rating: 8.5

Flash MX now has the ability to draw lines and curves dynamically, by using the new drawing methods of the MovieClip object. I will teach you how to create a simple line drawing application using the built in Flash drawing API.

Download the sample files here [1].

Functions Used

The main functions I am using for this application are:

myMovieClip.createEmptyMovieClip (instanceName, depth)

This method creates an empty movie clip as a child of an existing movie clip. This method behaves similarly to the attachMovie method, but you don't need to provide an external linkage name for the new movie clip. The registration point for a newly created empty movie clip is the upper left corner. This method fails if any of the parameters are missing.

myMovieClip.lineStyle (thickness,rgb,alpha)

This method specifies a line style that Flash uses for subsequent calls to the lineTo and curveTo methods until you call lineStyle with different parameters. You can call the lineStyle method in the middle of drawing a path to specify different styles for different line segments within a path.

myMovieClip.moveTo (x, y)

This method moves the current drawing position to (x, y). If any of the parameters are missing, this method fails and the current drawing position is not changed.

myMovieClip.lineTo (x, y)

This method draws a line using the current line style from the current drawing position to (x, y); the current drawing position is then set to (x, y). If the movie clip that you are drawing in contains content that was created with the Flash drawing tools, - calls to lineTo are drawn underneath the content. If you call the lineTo method before any calls to the moveTo method, the current drawing position defaults to (0, 0). If any of the parameters are missing, this method fails and the current drawing position is not changed.

The Process

1. Create a new movie and select the first frame.

Open the actionscript window and enter:

createEmptyMovieClip("Line",1);

The above code creates a empty movieclip with a instance name called Line with a depth of 1

2. Enter the code below to set the line style:

Line.lineStyle(1,0x000000,100);

The above code sets the line style dynamically. The Line will be 1 point thick and have a hex color of black , and an alpha value of 100.

3. Enter the code which will draw the line:

onMouseDown = function (){
 Line.moveTo(_xmouse, _ymouse);
 onMouseMove = function (){
 Line.lineTo(_xmouse, _ymouse);}
}
onMouseUp=function(){
 onMouseMove=null;
}

The above code will draw the line when you click and drag the mouse.

Let's see how each line works:

onMouseDown = function (){

The function onMouseDown is activated when you click the mouse button.

Line.moveTo(_xmouse, _ymouse);

This moves the line to the starting point, which will be directly where you clicked. _xmouse and _ymouse are the x and y position of the mouse.

onMouseMove = function (){

The function onMouseMove is activated only when you move the mouse.

Line.lineTo(_xmouse, _ymouse);}

This creates the line to the point where ever your mouse is dragged.

onMouseUp=function(){

The function onMouseUp is activated when you release the mouse button.

onMouseMove=null;

This function turns off the onMouseMove() function so that the line will not be drawn again until the user clicks the mouse button again.

This is the full code:

createEmptyMovieClip("Line",1);
Line.lineStyle(1,0x000000,100);

onMouseDown = function () {
 Line.moveTo(_xmouse, _ymouse);
}

onMouseMove = function ()  {  
 Line.lineTo(_xmouse, _ymouse);}
}

onMouseUp=function() {
 onMouseMove=null;
}

//The above code should be entered in the first frame of the movie

Test the movie. Click and drag to see the line being drawn. If you have followed the steps correctly you will get the same result as mine.

[1] http://www.sitepoint.com/examples/flashscript/linedrawer.zip