In this tutorial we will be covering how to: A) Setup the line itself that will be drawn whenever we hold down the mouse button and move it. B) Create popup panels at the base of the page that will popup whenever your mouse scrolls over them and give you options such as changing the color and/or thickness. C) Introduction of coloring pages, that can be selected from within another popup menu and display on screen. Our window will look similar to this at the end of this series
As you can see there are three panels at the bottom of the page, these panels when the mouse moves over them expand into larger panels that contain settings that can be changed such as the thickness. The paintbrush you see on screen is an optional touch that you can add. Alright so lets get on to some code. There may be more efficient codes as to what I am going to do but this works and so am going to use it.
In this, the first tutorial of the series we will be creating a line which will be drawn onto the screen whenever the mouse is held down. A description of the code will be shown below the code itself.
The initial code to begin the line drawing is relatively simple, utilizing functions built into as3(actionscript 3).
The code is as follows:
//line drawing
var drawingLine:MovieClip = new MovieClip();
var colorChoice:Number;
var thicknessChoice = 5;
addChildAt(drawingLine, 1);
stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUp);
function mouseDown(event:MouseEvent):void {
drawingLine.graphics.lineStyle(thicknessChoice, colorChoice);
drawingLine.graphics.moveTo(mouseX, mouseY);
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
}
function mouseMove(event:MouseEvent):void {
drawingLine.graphics.lineTo(mouseX, mouseY);
}
function mouseUp(event:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
}
In this, the first tutorial of the series we will be creating a line which will be drawn onto the screen whenever the mouse is held down. A description of the code will be shown below the code itself.
The initial code to begin the line drawing is relatively simple, utilizing functions built into as3(actionscript 3).
//line drawing
var drawingLine:MovieClip = new MovieClip();
var colorChoice:Number;
var thicknessChoice = 5;
addChildAt(drawingLine, 1);
stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUp);
function mouseDown(event:MouseEvent):void {
drawingLine.graphics.lineStyle(thicknessChoice, colorChoice);
drawingLine.graphics.moveTo(mouseX, mouseY);
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
}
function mouseMove(event:MouseEvent):void {
drawingLine.graphics.lineTo(mouseX, mouseY);
}
function mouseUp(event:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
}
- var drawingLine:MovieClip = new MovieClip();
this line initiates the MovieClip which we will be drawing the line in. The new merely means that it is not an existing object. and that it must create a new one.
- var colorChoice:Number;
var thicknessChoice:Number = 5;
these lines initiate variables that we will use later on to change the color of the line and you guessed it the thickness of the line. Why I do not have a value for the colorChoice variable is because in the instance it will be representing if there is no value to it, it is automatically black. Though I could also write var colorChoice:Number = 0x000000; and achieve the same thing. The thicknessChoice variable is set to 5 because I found that to be a reasonable thickness of the line though you can set it to whatever you like.
- addChildAt(drawingLine, 1);
This line of code merely adds the object drawingLine which is a movieclip to the stage, and tells it to place the object on the second index level (as the index chart starts at 0). Why we have that and not just addChild(drawingLine); is because this way no matter when we draw a line on the stage it will always be added to the first index level.
- stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUp);
These lines of code listen for when the mouse is either down or up and refer the program to certain functions when an event is heard, Such as when the mouse is down, the program is referred to the mouseDown function.
function mouseDown(event:MouseEvent):void {
drawingLine.graphics.lineStyle(thicknessChoice, colorChoice)
drawingLine.graphics.moveTo(mouseX, mouseY);
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
}
This function responds to the event listener for when the mouse is down and does these things. the first line within the function tells the program that inside the drawingLine variable there will be a graphic and that this graphic is going to be a line. Here we see the variables thicknessChoice and colorChoice come into play. You usually replace these with a number in the code but as we are going to be changing the color we need them to be a variable that can change. The ifrst spot of which thicknessChoice takes up is the thickness of the line and the colorChoice is the color of the line. There are also many other options you can have within the parentheses such as the alpha of the line. The second line within the function tells the graphic inside drawingLine to move to the mouses x and y position. The third line adds a listener to the stage to detect for the movement of the mouse and when the mouse is heard moving it refers the program to the mouseMove function.
- function mouseMove(event:MouseEvent):void {
drawingLine.graphics.lineTo(mouseX, mouseY);
}
This function responds to the event listener for when the mouse moves. The inside line of this function tells the graphics inside drawingLine to draw a line to the new mouse x and y coordinates, Its as simple as that.
- function mouseUp(event:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
}
This function responds to the event listener for when the mouse button is up. The inside line of this function removes the event listener for when the mouse moves. This effectively stos the program from creating a line from where your mouse is to the new position of your mouse when the left mouse button
is up
Now for the fun aesthetics things, these are purely for aesthetic purposes and will not change the program at all as well as being purely optional.
I created a black box that was 550 x 400 pixels in size and set its x and y positions to 0. I then proceeded to delete the fill of the box so I was left with a border around the frame. I then went into the properties panel and increased the thickness of the lines that make up the border. I also added a title at the top of the frame to make it cooler.
.
