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.

3 comentarii:

Post a Comment

  • David Kingsnorth : April 11, 2008 at 12:28 PM

    Hi, really good tutorial. Just wondering how I can draw over the top of an image? I'm presuming it's pretty simple but I'm really new to flash.

  • Sue Lin : July 27, 2008 at 3:39 AM

    hi, your tutorial is good. but i want to know if it can draw in movie clip? do u how to deal with it? is for my school assignment and im struggling in script..

  • Biochimistu : July 29, 2008 at 9:29 PM

    Hi Sue Lin,
    I haven’t tried to draw in a movieclip but I it can be done.Try to add a movieclip to the stage and draw in it.