- Home
- Tutorials
- Flash
- Intermediate
- Creating a Dynamic Drawing application in Flash

Page 1 of 1
Tutorial name: Creating a Dynamic Drawing application in Flash
Written by: Don Joseph , www.flashcircle.com (I presently work as a web developer for CBN in India. I ve been working in this field since 3 years now.)
Difficulty Level: intermediate
Requirements: Flash MX
Summary: Flash MX now has the ability to draw lines and curves dynamically, by using the new drawing methods of the MovieClip object. In this article I will teach you how to create a simple line drawing application using the drawing API.
Download FLA .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 built in flash drawing API.
The main functions I am using for this application are:
myMovieClip.createEmptyMovieClip (instanceName, depth)
Description:
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)
Description:
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)
Description:
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)
Description:
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.
}
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.
If you have any problems please feel free to contact me
Spread The Word
Related Articles
3 Responses to "Creating a Dynamic Drawing application in Flash" 
|
said this on 03 Jul 2007 4:54:48 AM CDT
Good simple way to make a drawpad. But, tell me, have you thought about saving the sketch? We are a lot searching the simpliest way to do that !... (sorry for my frenchy english!)
See ya ! |
|
said this on 06 Sep 2007 1:32:40 AM CDT
Hello Don Joseph,
Thanks for the artical. It really works fine and help me. I want to add here that if u keep your FLA fps to 24-30 then this code works more smoothly. Thanks Ritesh |
|
said this on 19 Apr 2008 1:12:19 PM CDT
Hi Don,
I want to thank you for this useful article, and it was really very useful. I do the tutorial and it help me allot to understand the ActionScript for the flash. I have question and I hope that u can Help me. I want to give a limitation for the movie clip. I have an idea but I don't know how to do it. My idea is to give a value for the (x,y) and then make an if statement if the mouse move or the value of the (x,y)for the mouse bigger than the aria that i determine. It will event nothing - just to give the limitation. I hope that you can help me Thank you |



Author/Admin)