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.

//1.
theSlider.minimum=3;
theSlider.maximum=20;

//2.
function MouseDown(event:MouseEvent):void {
var theColor:Number=colorPicker.selectedColor;
var theLineThickness:uint=theSlider.value;
drawingLine.graphics.lineStyle(theLineThickness,theColor);
drawingLine.graphics.moveTo(mouseX, mouseY);
stage.addEventListener(MouseEvent.MOUSE_MOVE, MouseMove);

}

Code:
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.

//1.
theSlider.addEventListener(MouseEvent.MOUSE_OVER, stopMouseMove);
theSlider.addEventListener(MouseEvent.MOUSE_OUT, startMouseMove);

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

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

Code:
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.