Wednesday, 2 September 2009

Drawing lines in Actionscript 3 – part 3

This is a continuation from the previous Drawing lines in Actionscript 3 – part 2. This time you will be able to change the line thickness of the drawn lines using the slider component in Flash. So, this allows you to increase the lines by dragging the slider. Make sure you have completed the previous tutorial before attempting this one, as more code will be added from the Drawing line file.

Drawing lines in Actionscript 3 – part 3

Step 1

Open your Drawing line file.
Select Window > Components from the menu bar, and drag the slider component onto the stage. I placed my slider component in between the colour picker and the clear button.

Step 2

Select the slider component and give the following instance name ‘theSlider’ like below:

Step 3

On the timeline locate the ‘Actions’ layer then select the first frame and hit F9 to open up the Actions panel. Now add the following code shown in red colour. I have left out some of the code the previous tutorial.


function MouseDown(event:MouseEvent):void {
var theColor:Number=colorPicker.selectedColor;
var theLineThickness:uint=theSlider.value;,theColor);, mouseY);
stage.addEventListener(MouseEvent.MOUSE_MOVE, MouseMove);


1. This sets the minimum and maximum values of the slider. I have set the minimum to 3 and the maximum to 20, but you can change this to whatever you wish.
2. This stores the values of slider, so when the user drags the slider the thickness of the line will be updated.

Step 4

You should now be able to change the line thickness using the slider component, but when you use the slider you will notice that it will not work properly. As every time you drag the slider it will be cover in drawn lines. To fix this, you need to enter the following lines of code into the ‘Actions’ layer.
theSlider.addEventListener(MouseEvent.MOUSE_OVER, stopMouseMove);
theSlider.addEventListener(MouseEvent.MOUSE_OUT, startMouseMove);

function stopMouseMove(event:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_DOWN, MouseDown);

function startMouseMove(event:MouseEvent):void {
stage.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);

1. This is two event listeners for the slider component with the mouse over and mouse out events.
2. This function removes the ‘mouse_down’ event listener from the stage when the mouse is over the slider which prevents any lines from being drawn on the slider.
3. This function adds the ‘mouse_down’ event listener to the stage when the mouse is off the slider.

Step 5

Test your drawing application Ctrl + Enter. Now try change the thickness of the line by dragging the slider.


Anonymous 7 January 2010 at 04:32  

It would be great if this had an eraser :)

iliketo 7 January 2010 at 05:27  


There is a clear button.

Daniela 24 January 2010 at 08:49  

Is it possible to add the send button on the drawing with get or post method with a predefined e-mail?

iliketo 24 January 2010 at 08:52  


Take a look at the Open URL in AS3 tutorial.

mikelly 17 April 2010 at 18:55  

excellent tutorial start to finish. however, I'm not sure your recommended link exactly answered the question of how would you post the drawing to an email address or to another website. I could be wrong...

gbs 3 January 2012 at 20:06  

Thanks for the clear explanations. How would you have areas (MC's) on the back ground, which if you drew over them would halt the drawing and jump to another frame with a warning? Sort of a "stay between the lines" drawing game.
Any help or links to tutorials appreciated.

iliketo 4 January 2012 at 03:05  


Add the mouse over event to the ‘areas’, and in the function add your code there.

Al Grehan 12 November 2012 at 06:24  

Hi there, I'm trying to implement this code into a flash file with other content inside it. The stage for this drawing lines code is at frame 7, when I test it you can't draw anything but if I code it in a separate file where the stage is frame 1 it works perfectly. Do you know how to make this work?

iliketo 12 November 2012 at 14:18  

@Al Grehan,

The timeline playhead needs to be at frame 7.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP