Once I saw something similar as part of a Flash banner ad: You could add some doodle to that box using your mouse cursor as a pen. This somehow reminded me of that magnetic drawing pad for kids and actually, I had some fun with that feature – at least for a few minutes. After I gained some experience with ActionScript I remembered that feature and I wanted to reproduce it, using a code block that should be as short as possible. Actually, the original version I programmed was a bit more complicated compared to what I provide here (e.g., I stored all the data for the entire line drawing in an array). However, I realized that the code could be condensed to just a few code lines, as I will demonstrate in this section:

 

 

 

 

 

For this ActionScript exercise we only need one layer with only one frame in the Flash editor. As a general setting I used the highest frame rate that is available: 120 fps.

 

The main ActionScript window

The main ActionScript window I used for the definition of a global variable, the instantiation of a MovieClip object that represents the line drawings and the definition of a function that will be called when a new segment shall be added to the line drawings:

 

_global.downFlag = false;

_root.createEmptyMovieClip ("myLine", 1);
myLine.lineStyle (2, 0xFFFFFF, 100);

function addLineSegment(xc,yc,df):Void
{
   if (df==true)
     	myLine.lineTo(xc,yc);
     	
   else
     	myLine.moveTo(xc,yc); 
}

 

The variable downFlag is a simple Boolean variable that indicates whether the left mouse button is currently pressed or not (will be explained in more detail below). In the next code line I create a new empty MovieClip. I think you will have already guessed that, seeing that the method I used is called createEmptyMovieClip. This method demands two arguments: The first one is the instance name of this new object and the second is the depth layer. For both you can choose arbitrary values (within certain limits). In the following line I called this new MovieClip object with the method lineStyle. Here you have to pass three arguments: (1) The thickness of the pen in pixels, (2) the color of the pen as a triplet of a hex code, and (3) the alpha value for your ink, i.e. the degree of transparency.

The next code block shows the core function of our application. Its task will be to append the next line segment to the current line drawing or placing the starting point of a new line on the screen, depending on the state of the left mouse button: This function needs three arguments, xc, yc, and df. The variables xc and yc represent the current location of the mouse cursor, i.e. the x- and y-coordinate. The variable df is the Boolean value that indicates the state of the left mouse button. As you can see in the code within that function, we tell our program to append a new line segment to the current line in case that the mouse button was pressed (df==true), using the method lineTo(x-coordinate, y-coordinate) for our MovieClip object myLine. In the other case, i.e. when the left mouse button was not pressed, we tell our program to set the position of the starting point of the next line by means of the method moveTo(x-coordinate, y-coordinate) – without drawing a new line segment.

 

The control element

As the next step we have to add another MovieClip object to the scene what we will do by hand: So just place an arbitrary graphical symbol (a disk, for instance) somewhere in the scene and convert it into a MovieClip. Since this element should not be visible on the screen you should manually set the alpha value of that object to 0. This object will be the one who handles the mouse events. Hence, we have to link it to some mouse events: Click on that object and write the following code in the respective ActionScript window:

 

onClipEvent(mouseDown)
{
	downFlag = true;
}

onClipEvent(mouseUp)
{
	downFlag = false;	
}

onClipEvent(mouseMove)
{
	var xm:Number = _level0._xmouse;
	var ym:Number = _level0._ymouse;
	
	_level0.addLineSegment(xm,ym,downFlag);	
}

 

The first two event handlers are quite easy to interpret, I think: Depending on the state of the left mouse button we will pass the value true or false, respectively, to our global variable downFlag. The next event handler will be called each time the mouse is moved. Within that handler we first extract the x- and y-coordinate of the current mouse position, calling the property _xmouse and _ymouse, respectively. Finally, we call our core function addLineSegment with these parameters. And that's it, almost: You can already use the drawing function if you start the program in the preview window. However, I added another feature to that program:

 

The clear button

As a last feature, I added a clear button to our application. Just as a real magnetic drawing pad it provides the possibility to remove all drawings from the screen. So just add another graphical symbol to the scene (I used a pre-assembled image for it) and convert it into a button object. Then click this button object and add some further code to the respective ActionScript window. We then have to link this button to the release event and define the things that shall be done in case this button is pressed. Here it is:

 

on(release)
{
	myLine.clear();
	myLine.lineStyle (2, 0xFFFFFF, 100);

}

 

The first code line within the event handler tells our program to clear all the properties of our MovieClip object myLine, that represent the line drawings on the screen. This will be done using the method clear(). In the next code line we have to add the specification of our pen again because this has also been deleted with the former step. This way our program lets the user start from scratch again—so you see: the fun will never end!

 

 

© 2011 G. Wendt