Actionscript Drawing With Your Mouse
In this Macromedia Flash tutorial you will learn how to actionscript code a simple painting flash program in just a few lines of code.
1.
This example is based completly on code in actionscript, nothing to be done in your Flash stage, so go to the actionscript panel and we will start programming.
2.
First we need to create an empty movie clip on the stage, we will call it line, and put it on depth 1,
(depth is for layers, if there s more then number 2 is on top of number 1).
_root.createEmptyMovieClip('line',1);
3.
3.
Now we will make the container of the function that will happen when the mouse button is pressed down.
(This container start with a { and ends with } and in between these symbols is where the code is going to be.
_root.onMouseDown = function() {
}
4.
Now we need to define the drawing position to the same position as the mouse, for that we use x and y koordinates and the code looks like this.
line.moveTo(_xmouse,_ymouse);
5.
This next line of code defines the styles of the drawing such as color, thickness and alpha color.
line.lineStyle(2,0xaa3333,100);
Now my line is a dark red, with a thickness of 2 px and 100 percent alpha (no transparent).
6.
Now we need to define a function inside the function we are already in, this new function is active when the mouse is moving.
this.onMouseMove = function() {
}
7.
inside this function we will set it to draw when the mouse is moving. (so it draws when the mouse button is pressed and mouse is moving).
line.lineTo(_xmouse,_ymouse);
updateAfterEvent();
the updateAfterEvent(); function speaks for it self, it updates when event is raised.
8.
For now our code should look something like this.
_root.createEmptyMovieClip("line",1);
_root.onMouseDown = function() {
line.moveTo(_xmouse,_ymouse);
line.lineStyle(2,0xaa3333,100);
this.onMouseMove = function() {
line.lineTo(_xmouse,_ymouse);
updateAfterEvent();
}
}
9.
this last function will make sure to stop drawing when the mouse button is not pressed.
_root.onMouseUp = function() {
this.onMouseMove = null;
}
10.
It doesn't take much more actionscript code to a button, to make it change the color you draw with, and the thickness of the brush.
Also have a look at one of my tutorials on how to change your cursor (to paint with).