Using the Drawing Methods | Macromedia Flash MX 2004 ActionScript: Training from the Source

In this exercise, you'll use the drawing methods of the Movie Clip class to start a simple drawing application.

Open draw1.fla in the Lesson15/Assets folder.

The main timeline includes five layers, named according to their contents. The Background layer contains the project's main graphics. The Canvas layer contains a movie clip instance, canvas_mc, which will be used to define an allowable area in which to draw. The Icon layer contains the movie clip instance with an insect, just to the left of the stage. This instance is named icon_mc; in a later exercise, we'll duplicate it to provide the user with several icons to drag onto canvas_mc to draw over. The Windows layer contains two instances, window1_mc and window2_mc, which appear to the right of canvas_mc and will be addressed in a later exercise. Finally, the Actions layer will be used to store most of the ActionScript used in the final version of this project.

The main focus of this exercise is creating ActionScript that will enable you to draw on the canvas. You will use clip events in concert with the hitTest() method to determine whether the mouse button is pressed while the mouse pointer is over the canvas_mc instance; you will then use the onMouseMove clip event to draw. Every time the onMouseMove event is fired, the mouse's positions are recorded and a line is drawn between its last and current position, resulting in a drawing.
With the Actions panel open, select Frame 1 of the Actions layer on the main timeline and add the following script:
```
 var down:Boolean = false; 
```
This line of script creates a variable named down that will be used to store the current state of the mouse. Using the onMouseDown and onMouseUp events, this variable's value is set to true or false (pressed down or not). When down is true, the application will draw lines every time the mouse moves. When down is false, no lines are drawn.
Add the following onMouseDown clip event at the end of the current script:
```
 _root.onMouseDown = function() {   if (_root.canvas_mc.hitTest(_root._xmouse, _root._ymouse)) {     var x:Number = _root._xmouse;     var y:Number = _root._ymouse;     _root.holder_mc.moveTo(x, y);     down = true;   } }; 
```
On onMouseDown, we use a conditional statement to determine whether the mouse pointer is over the canvas_mc movie clip instance when the mouse button is pressed. If it is, several things occur. The current x and y positions of the mouse are recorded as the values of the x and y variables, respectively. These values are then used in a moveTo() action to move the beginning drawing position of a clip named holder_mc to the current coordinates of the mouse. The holder_mc clip is an empty movie clip instance that will be created dynamically (as scripted in Step 5). This instance will contain all the drawn lines. The last action in this script sets the down state variable to true, indicating that the mouse button is pressed.
Add the following onMouseUp event at the end of the current script:
```
 _root.onMouseUp = function() {   down = false; }; 
```
When the mouse button is released, we set the value of down to false. When down is false, no lines are drawn.
Add the following two lines of script at the end of the current script:
```
 var currentColor:String = "7F6696"; _root.createEmptyMovieClip("holder_mc", 100); 
```
In our application, as lines are drawn, their color will be based on the current value of currentColor. The value entered in the script represents the initial value of currentColor that is, its value when the project first plays. In the next exercise, you'll change this variable's value dynamically based on button actions in one of the window's movie clip instances, enabling coloring of lines using different colors.
The next line of this script creates an empty movie clip instance, holder_mc. As mentioned earlier, this clip will contain all the lines that are drawn. It's given a depth of 100 so that drawn lines will appear above any icons dragged onto the canvas_mc movie clip instance.
Start defining the draw() function by adding the following lines at the end of the current script:
```
 function draw() {   _root.holder_mc.lineStyle(0, parseInt(currentColor, 16), 100);   var x:Number = _root._xmouse;   var y:Number = _root._ymouse;   _root.holder_mc.lineTo(x, y); } 
```
This function will eventually be called by the onMouseMove clip event, which we'll script in the next step. When called, the first thing it does is set the line style for the lines to be drawn. The lines drawn will be hairlines (thickness of 0); their color will be based on the currentColor variable; and their alpha setting will be 100. The last three lines of this script are used to complete the drawing of a line. A line is drawn from the current drawing position as set with moveTo() when the onMouseDown event occurs (as scripted earlier), to the current mouse position (x and y values in this script) using lineTo().
Add the following onMouseMove clip event at the end of the current script:
```
 _root.onMouseMove = function() {   updateAfterEvent();   if (down && _root.canvas_mc.hitTest(_root._xmouse, _root._ymouse)) {     draw();   } }; 
```
The onMouseMove event is fired whenever the mouse changes positions. The updateAfterEvent() function is a predefined Flash function that tells Flash to update the stage after this event is fired that is, don't wait until the next frame. The if statement checks that the down variable state is true and that the mouse pointer is indeed over the canvas_mc movie clip instance. If both are true, the draw() function is called. Calling the function repeatedly with this event will emulate the effect of drawing while the mouse button is pressed and the mouse pointer is over the canvas_mc movie clip instance. The if statement prevents the draw() function from being called if the mouse button is up or the mouse pointer moves outside the boundary of the canvas_mc movie clip instance.
Choose Control > Test Movie. Start drawing.
When your mouse button is pressed while the mouse pointer is over the canvas, the down variable is set to true. This means that when the mouse is moved, lines are drawn. If the mouse pointer leaves the canvas area, drawing ceases.
Close the test movie and save your work as draw2.fla.
Now you're ready to make the windows to the right of the canvas active and add the drag-and-drop functionality that will allow you to add icons to the canvas.