<p>Drawing application that we will be building throughout this tutorial.</p>

In this blog I’ve decided to show you how to use ActionScript3 to make a simple mouse drawing application. The application uses AS3 for the drawing side of things, a ColorPicker component for picking the color, and a Slider component for choosing the size. So, once you start up Flash, we’ll get started.

Flash Setup

I’ve got my stage set to 550 x 400px, you can set yours to whatever you fancy, just make sure the setup we’re about to do is the same. First of all make drag out a ColorPicker from the components window, which you can open by going to Window->Components; leave all it’s settings at default. Place the color picker at the stage’s 0×0 point (top left) and give it an instance name of ‘color_mc’. Next drag a Slider onto the stage and place it next to the color picker, leaving a bit of room between each; give it an instance name of ’size_mc’. This time we’re going to have to make some changes to the settings. Open the Component Inspector, which you can get to by going to Window->Component Inspector. Change these settings; put maximum up to 50, and the value up to 5 (we don’t want the size starting at zero!). Your settings should look like the ones below (image to the right):

Oops, the image didn't load. As long as you change the settings as said above you should be right.Now create a new layer (your choice), and name it ‘artboard’. On this layer, create a rectangle that fills the whole stage except for a little bit up the top where you should leave some room for the components we added previously. Give it a 1pt large stroke with the color of black, and fill it with light grey. Set the fill’s alpha to be 30%. Your settings Oops, the image didn't load. You should be ok if you configure the settings as said aboveshould like the picture to the left.

Now you’re done with the visual side of things in Flash, it’s now time to get into the ActionScript. Your stage should look similar to the image below.

How the stage should look...AS3 Setup

Create a new layer and name it ‘actions’, or whatever name you prefer for an AS layer; then lock the layer, select it and open the actions panel. Now, the first two lines will be this:

1
var sprite:Sprite = new Sprite();

What we’re doing is creating a new Sprite class; this Sprite class will hold the user’s artwork. A Sprite is very similar to a MovieClip without a timeline, and as we don’t need a timeline a Sprite fits the bill. Down at the bottom we need to place our event listeners and add the sprite to the stage. This piece of code will always remain down at the bottom.

1
2
3
stage.addEventListener(MouseEvent.MOUSE_DOWN, startDrawing);
stage.addEventListener(MouseEvent.MOUSE_UP, stopDrawing);
addChild(sprite);

First, we are adding an event listener to the entire stage (basically the whole movie) for the mouse button to go down; when it down the function ’startDrawing’ will be triggered. This function will be used to setup some things for drawing and add an event listener so that we can draw. Secondly, we’re adding an event listener for the mouse button being released, and when this happens the ’stopDrawing’ function will be triggered. This function will remove the event listener for the drawing. Finally, we are adding the sprite to the stage, won’t get very far without this! Now for the ’startDrawing’ function.

Sprite Graphics

1
2
3
4
5
6
7
function startDrawing(event:MouseEvent):void {
sprite.graphics.lineStyle(size_mc.value, color_mc.selectedColor);
sprite.graphics.moveTo(mouseX, mouseY);
if(rightPlace(event)) {
stage.addEventListener(MouseEvent.MOUSE_MOVE, draw);
}
}

You can see this function is receiving a MouseEvent, event though we’re not using this it is mandatory to have it here because Flash will pass the event object in always. You can see I’m referencing the graphics property of the sprite. This is an instance of the Graphics class, which holds many useful methods for drawing into objects. If you want to look the class up, type in ‘Graphics’ into the actions panel (the code area), highlight it and press F1; this will take you to it’s page on the Flash AS3 reference where you can see all it’s properties, methods etc. For our case we can use the graphics property to draw lines where the user clicks.

The first thing we’re doing is setting the style of lines drawn, by using the lineStyle method. There are many things we can set in this method, but the main thing we’ll worry about is thickness and color. We’ll pass in the current value of the size slider (which, remember, can go up to 50) as the thickness, and the current selected color of the color picker for the color of the lines we draw. Now we’ve set the style of the lines, we now need to move where we’re creating our lines. This is an important step, if we didn’t do this Flash would create connections between all the lines we draw. We need to tell the graphics “paint brush”, so to speak, to move to a particular location, otherwise it will start at 0×0 and stay wherever our last line stopped. We need do this using the moveTo function and pass in the x and y values of where we want the “paint brush” to move to. This will allow for unjoined lines.

Then we check if the user is clicking in the right place to paint with a function we will define soon (for now just notice that we’re passing in the event object); if they are clicking in the right place then we’ll go ahead with painting. For the “going ahead with painting” process, we’re going to add an event listener for the mouse move event on the stage. The user will actually have to move their mouse, and hold down to paint on the art board. Now for the rightPlace function.

1
2
3
4
function rightPlace(event:MouseEvent):Boolean {
if(event.target == board_mc || event.target == sprite) { return true; }
else { return false; }
}

This function returns a boolean, this is required since we’re using it in if statements. In this function we’re receiving a mouse event object, which is to be the same mouse event from the functions that called it; this is so we can check the target, or what object triggered the function. So in the if statement we’re check if the object that triggered the function (not the rightPlace function, the one that called rightPlace() since we’re actually passing in an event object) is either the art board, or the sprite. The reason why we’re saying that the sprite is acceptable is because we do want people to be able to draw over existing art work. If this condition is true the function will return true, otherwise it will return false. Now for the draw function…

Drawing!

1
2
3
4
5
6
7
function draw(event:MouseEvent):void {
if(rightPlace(event)) {
sprite.graphics.lineTo(mouseX, mouseY);
} else {
stage.removeEventListener(MouseEvent.MOUSE_MOVE, draw);
}
}

In here we’re checking again whether or not we’re in the right place; this is because after the drawing has started the user can still draw all over the UI components and we don’t want that from happening. If the user starts to go over the right place to draw, then we remove the event listener for drawing. If they are still in the right place however, then we’ll draw. And that brings us to the lineTo function of graphics. This functions draws a line from the point it’s currently at (which we defined with the moveTo function) to the point you specify. Since we’re moving the “paint brush” to where the mouse is at the start of the mouse going down, and as you can see drawing a line to almost the same point, the line won’t be very big (allowing us to draw!). But you could certainly do stuff like draw a line from the top left of the stage to the bottom right. When the “paint brush” finishes drawing our line, it is logically at the end point specified in the lineTo function, in this case that was the last position of the mouse. And now onto our final function…

1
2
3
function stopDrawing(event:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE, draw);
}

This function is triggered when the mouse button is released, and it simply removes the event listener for drawing.

Conclusion

Well congratulations, you’ve created a program in Flash with ActionScript3 that lets you draw with custom color and size. While it may not be perfect or the hottest new drawing program, you can still be proud of it. I hope you learnt something, please comment below with your thoughts and questions. Thanks for reading!