Draw lines in Flash CS3 using code.

In this tutorial we will draw using ActionScript code. It’s a simple and fun tutorial. We will use our mouse to draw lines of different thickness and random color. You can test your drawing skills if doesn’t look good from the first time clear and start again.

Let’s draw.

1. Create a new file by going to File > New select Flash file (ActionScript 3.0) and click Ok.

2. Insert a new layer by going to Insert > Timeline > Layer.

3. Double click on the top layer and name it actions, name the second one button.Lock actions layer.

4. From Tools panel pick the Rectangle tool and on the stage draw a rectangle. Select the rectangle hit F8.Set its name to clear_btn, the type to button and click Ok.

5. With the button selected in the Property Inspector set its instance name to clear_btn.

6. On the actions layer select frame 1 and hit F9 to open the ActionScript panel. Copy the next code and paste it.

stage.addEventListener(MouseEvent.MOUSE_DOWN,handleMouseDown);
stage.addEventListener(MouseEvent.MOUSE_UP,handleMouseUp);
clear_btn.addEventListener(MouseEvent.CLICK,deleteStage);
function handleMouseDown(event:MouseEvent):void {
var lineThickness:uint = Math.random()*5+1;
var lineColor:uint = Math.random()*0xffffff;
graphics.lineStyle(lineThickness,lineColor);
graphics.moveTo(mouseX,mouseY);
stage.addEventListener(MouseEvent.MOUSE_MOVE,startDrawing);
}
function handleMouseUp(event:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE,startDrawing);
}
function startDrawing(event:MouseEvent):void {
graphics.lineTo(mouseX,mouseY);
}
function deleteStage(event:MouseEvent):void {
graphics.clear();
}


7. Hit Ctrl+Enter to test your movie. Hold down the left button of your mouse and move the mouse inside the window. We are drawing. Not happy with your sketch? Click the clear button and start again.

Code explication

First we added a Mouse_DOWN and a Mouse_UP event to our stage and a CLICK event to our button.

The handleMouseDown function handles the Mouse_DOWN event registered to the stage. Inside this function we have a variable for the line thickness, this takes a value from 1 to 6.In next line we add a random color to our lineColor variable. Next we set the lineStyle and pass our random values, make our drawing to start from the current position of our mouse and add a MOUSE_MOVE event to the stage.

When the left button of the mouse is released (is up) we want to stop drawing so we remove the MOUSE_MOVE event added to stage. This thing is happening in the handleMouseUp function.

The function startDrawing represent the handler for the MOUSE_MOVE event, this functions draws the lines.

And finally, the deleteStage function is the handler of the CLICK event. Inside this function we are clearing our sketch.

This is the end of this tutorial. I hope that you enjoyed the tutorial. If you have questions, suggestions, doubts about the tutorial don’t hesitate to comment.

Until next time have fun learning Flash.

To download the source files go to:Start drawing.