Monday, 17 August 2009

Drawing lines in Actionscript 3

In this tutorial you will learn how to create a simple line drawing app in Actionscript 3 using the graphics class. This will let you to draw lines when you move your mouse. This tutorial contains mostly code and the creation of a simple button to clear the lines you have drawn. Some knowledge of basic buttons are needed for this tutorial.


Drawing lines in Actionscript 3 – part 1

Steps 1

Open a new Flash AS3 file.
Set an appropriate stage size for your drawing line app.


Step 2

On the timeline insert a new layer called “Actions”. Select the first frame and hit F9 to open up the actions panel and enter the following code:

//1.
var drawingLine:MovieClip = new MovieClip();
addChildAt(drawingLine,0);

//2.
stage.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);
stage.addEventListener(MouseEvent.MOUSE_UP, MouseUp);

//3.
function MouseDown(event:MouseEvent):void{
drawingLine.graphics.lineStyle(3);
drawingLine.graphics.moveTo(mouseX, mouseY);
stage.addEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}

//4.
function MouseMove(event:MouseEvent):void{
drawingLine.graphics.lineTo(mouseX, mouseY);
}

//5.
function MouseUp(event:MouseEvent):void{
stage.removeEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}

Code:
1. This creates a new instance of a move clip with the name ‘drawingLine’ and adds the movie clip to the stage.
2. This adds two event listeners to the stage with the mouse down and mouse up events, and the ‘MouseDown’ and ‘MouseUp’.
3. This is the MouseDown function which has the linestyle method. This method has the parameter of three which defines the thickness of the line. More information on this method can be found at AS3 graphics component reference. The moveTo method moves the currents drawing position to the mouse x and mouse y position.
4. This is the MouseMove function which creates a line when the mouse is moving the left mouse button is depressed.
5. This is the MouseUp function which removes the mouse move event from the stage. This stops any lines from drawing when the left mouse button is up.


Step 3

Create a simple button on the stage. I have created a black button with white text, but you can create whatever kind of button you wish. If you don’t know how to create buttons checkout the basic buttons tutorial.



Convert your button into a symbol (F8). Then give it the instance name: “clear_btn”.




Open up your actions panel (F9) and add the remaining code below:
//1.
clear_btn.addEventListener(MouseEvent.CLICK, clearScreen);

//2.
function clearScreen(event:MouseEvent):void{
drawingLine.graphics.clear();
}

Code:
1. This adds an event listener to the clear button.
2. This function clears all the lines that were drawn from the graphics object.



Step 4

Test your drawing line app Ctrl + Enter. Now have some fun drawing lines, you can also clear the lines by selecting the clear button.




You should now be able to draw lines in Actionscript 3.0. Checkout Drawing lines part 2 where you will learn how to change the colour of the lines. The source files can be downloaded here.

20 comments:

koentjah 15 October 2009 at 01:23  

its wise to put the clear button in a layer above the drawing layer, so you cant craw out the clearbutton.
also if you gave the border-square a mask property, you wont be able to draw outside of the box.
everything else just works, nice script

iliketo 15 October 2009 at 03:49  

@koenotjah

Thanks for your suggestions, but adding the ‘clear button’ on the layers above will make no difference to the application, as the ‘addChild’ method adds the line drawings on top of all the other children. Therefore I have swapped the ‘addChild’ method with the ‘addChildAt’ method. This method has been used to place the index at 0 which is at the bottom of the display list.

The black border around the drawing application is simply for decoration.

miki 22 January 2010 at 07:17  

Is there any possibility to draw a line over movie clip, because, it doesn't work for me (on the scene (that doesn't have any elements, everything works fine, but, when i draw over movie clip that is designed, like a peace of paper, it doesn't make lines).

Please, help :)

iliketo 22 January 2010 at 07:54  

@miki

Trying dynamically attaching the movieclip, take a look at this post.Also try using the addChild() method instead of the addChildAt() method.

Farhan 20 March 2011 at 23:19  

the draw line in not smooth when we draw circle, is there any solution to make it smooth, it seems jerky now....

iliketo 30 July 2011 at 06:54  

@Farhan

Try putting an 'updateAfterEvent()' in the mouse move function.

Jeff 16 September 2011 at 19:28  

This is great, but is there a way I can have a limit, change the clour and have a background?

iliketo 17 September 2011 at 03:44  

@Jeff

Take a look at part 2.

Alexandra 13 August 2012 at 02:36  

I maybe sound really dumb now but how do i change the background into a picture, when i put a picture into flash and use this code it keeps on publishing the picture on top of the code i hope you can help me!

iliketo 13 August 2012 at 15:27  

@Alexandra,

Can you please explain what you mean by ‘publishing picture on top of the code’?

If you want the lines drawn on top of the imported image then convert the image into a movie clip and add it dynamically on the stage.

Conor Liston 14 August 2012 at 05:35  

How can I draw a line from following a ball randomly moving on screen instead of following mouse movement?
Thanks

Alexandra 14 August 2012 at 08:36  

It finally worked out when i changed the code to (drawline,1) dont know why but it worked out!

iliketo 14 August 2012 at 12:07  

@Alexandra,

The addChildAt() method adds a movie clip to a specific index. The second parameter is the index.

iliketo 14 August 2012 at 13:42  

@Conor,

Here is some code to get you started.

var ball:Sprite = new Sprite();
ball.graphics.beginFill(0xff0000);
ball.graphics.drawCircle(0,0,5);
ball.graphics.endFill();
addChild(ball);

var line:Sprite = new Sprite();
line.graphics.lineStyle(1, 0x000000);
addChild(line);

var timer:Timer = new Timer(500);
timer.addEventListener(TimerEvent.TIMER, timerHandler);
timer.start();

function timerHandler(e:TimerEvent):void
{
ball.x = Math.random() * stage.stageWidth;
ball.y = Math.random() * stage.stageHeight;

line.graphics.lineTo(ball.x, ball.y);
line.graphics.moveTo(ball.x, ball.y);
}

BK & Janai 26 November 2012 at 07:34  

Hello, Is there a way to draw the line over a movie clip?

iliketo 26 November 2012 at 14:01  

@Bk,

Yes, you can use the addChildAt() method to adds the movie clip to a specific index.

DumbDesigner 19 January 2013 at 11:03  

is there anyway to draw it inside a canvas container/boundary or something which i can use to transits around like a page?

iliketo 20 January 2013 at 12:11  

@DumbDesigner.

The lines are currently being drawn inside the drawingLine movieclip.

DumbDesigner 20 January 2013 at 17:35  

i tried replacing it with a rectangle movieclip with the same name and instance, but it only allow me to click on the rectangle to draw lines instead, which i can still draw OUT of the rectangle onto the stage..

I am using the same code you have provided~


iliketo 21 January 2013 at 14:26  

@DumbDesigner

Try masking.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP