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;
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; } };
Add the following onMouseUp event at the end of the current script:
_root.onMouseUp = function() { down = false; };
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 currentColorthat 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); }
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(); } };
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.