Tài liệu Using the Drawing Methods doc

< Day Day Up >

Using the Drawing Methods
In this exercise, you'll use the drawing methods of the Movie Clip class to start a simple
drawing application.
1. 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.
2. With the Actions panel open, select Frame 1 of the Actions layer on the main
timeline and add the following script:
3.
4. var down:Boolean = false;
5.

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.
3. Add the following onMouseDown clip event at the end of the current script:
4.
5. _root.onMouseDown = function() {
6.
7. if (_root.canvas_mc.hitTest(_root._xmouse, _root._ymouse)) {
8.
9. var x:Number = _root._xmouse;
10.
11. var y:Number = _root._ymouse;
12.
13. _root.holder_mc.moveTo(x, y);
14.
15. down = true;
16.
17. }
18.
19. };
20.

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.
4. Add the following onMouseUp event at the end of the current script:
5.
6. _root.onMouseUp = function() {
7.
8. down = false;
9.
10. };
11.

When the mouse button is released, we set the value of down to false. When down
is false, no lines are drawn.
5. Add the following two lines of script at the end of the current script:
6.
7. var currentColor:String = "7F6696";
8.
9. _root.createEmptyMovieClip("holder_mc", 100);
10.

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.

6. Start defining the draw() function by adding the following lines at the end of the
current script:
7.
8. function draw() {
9.
10. _root.holder_mc.lineStyle(0, parseInt(currentColor, 16), 100);
11.
12. var x:Number = _root._xmouse;
13.
14. var y:Number = _root._ymouse;
15.
16. _root.holder_mc.lineTo(x, y);
17.
18. }
19.

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().
7. Add the following onMouseMove clip event at the end of the current script:
8.
9. _root.onMouseMove = function() {
10.
11. updateAfterEvent();
12.

13. if (down && _root.canvas_mc.hitTest(_root._xmouse, _root._ymouse)) {
14.
15. draw();
16.
17. }
18.
19. };
20.

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.

8. 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.
9. 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.

< Day Day Up >