Allowing the User to Draw

[ LiB ]

Allowing the User to Draw

You probably want to explore more mouse-driven interaction, so let's check it out. For this section, I have prepared two demos that show you how to build a program that will give the user control over a "virtual pen" that will allow him to draw on the stage.

Simple Drawing

In the following listing, the user only gets to draw in one line thickness and color , but he will be able to draw lines whenever he wants.

 // Game Development with ActionScript // By Lewis Moronta (c) 2003 // This program demonstrates how // to allow the user to draw on your // Flash movie with minimal setup. // This is pretty much a skeleton // for a full-blown drawing program. // In our onLoad function, we set up // our lineStyle and global variables // that we will end up using later. _root.onLoad = function() {   // The usual setup...   lineStyle (2, 0xFFFFFF);   // This variable will alert   // other parts of the program   // and let them know if the   // mouse is being pressed or   // not. This will decide if   // it should or shouldn't draw   // the connected line.   mousePressed = false; }; // This line is very important. // It is used to install the mouse // listener in your _root Movie Clip. // This includes three methods: onMouseDown // onMouseMove and onMouseUp. Mouse.addListener(_root);  // Here I defined the onMouseDown // handler, which will execute as // soon as the user clicks the mouse. _root.onMouseDown = function() {   // Since the mouse was pressed   // I set this boolean variable to   // true--it will help us draw the line.   mousePressed = true;      // This method prepares the line   // from the current location.   moveTo(_xmouse, _ymouse); }; // This mouse handler responds // when the mouse is moved. _root.onMouseMove = function() {   // If this variable is true,   // then you are allowed to   // draw the line. In other words   // if the mouse isn't pressed, don't draw.   if (mousePressed)     lineTo(_xmouse, _ymouse); }; // The onMouseUp handler responds // when the user releases // the mouse button. _root.onMouseUp = function() {   // To prevent any line-drawing   // you reset this variable.   mousePressed = false; }; 

I have initialized a couple of things in the onLoad handler, including a special flag variable, which is mousePressed , and the line style for the program. The thickness was set to 2, the line color was set to white, and opacity to 100 percent.

 // In our onLoad function, we setup // our lineStyle and global variables // that we will end up using later. _root.onLoad = function() {    // The usual setup...   lineStyle (2, 0xFFFFFF);   // This variable will alert   // other parts of the program   // and let them know if the   // mouse is being pressed or   // not. This will decide if   // it should or shouldn't draw   // the connected line. mousePressed = false; }; 

NOTE

TIP

What on earth is a flag variable? Am I getting political now? Nah, a flag variable is a simple Boolean variable that you can use to check program states.

The next thing I did was install the mouse listener so that I can use those special built-in methods, onMouseDown, onMouseUp and onMouseMove .

 // This line is very important. // It is used to install the mouse // listener in our _root Movie Clip. // This includes 3 methods: onMouseDown // onMouseMove and onMouseUp. Mouse.addListener(_root); 

I defined the onMouseDown handlerI used it to set up the "drawing from" position and to flag the rest of the program that the user wants to draw a line because he has clicked the mouse button.

 _root.onMouseDown = function() {   // Since the mouse was pressed   // I set this boolean variable to   // true--it will help us draw the line.   mousePressed = true;   // This method prepares the line   // from the current location.   moveTo(_xmouse, _ymouse); }; 

The onMouseMove will execute every time the mouse moves, but I didn't want onMouseMove to draw a line every time, so I used the flag variable, mousePressed , to check whether the user is clicking the mouse. If he is, then the line drawing is allowed.

 _root.onMouseMove = function() {   // If this variable is true,   // then we are allowed to   // draw the line... In other words    // if the mouse isn't pressed, don't draw.   if (mousePressed)     lineTo(_xmouse, _ymouse); }; 

Once the user is done, the flag variable must be updated so that the onMouseMove function will suppress the line drawing. I set up the onMouseUp handler to detect when the user releases the mouse and I set the flag variable to false so no lines are drawn when the mouse is moved.

 _root.onMouseUp = function() {   // To prevent any line drawing   // we reset this variable.   mousePressed = false; }; 

Now that you know what it takes to let the user decide what lines he wants to draw, let's see if you can allow the user to change some line style settings, such as the line color.

Improved Drawing

The revised version of this demo was saved as GDA_PROG9.6.fla. Figure 9.9 shows the new enhancements.

Figure 9.9. New and improved drawing

graphic/09fig09.gif


As you can see from the figure, I have added three new buttons. When the user clicks on one of them, the color of the line is changed to the color of the button. The user has complete control over where he chooses to draw lines and what color he wants the lines to appear. Note that the white-to-black gradient next to the other color buttons doesn't do anything.

Go ahead and have some fun with the demo before we discuss the following listing.

 // Game Development with ActionScript // By Lewis Moronta (c) 2003 // This program demonstrates how // to allow the user to draw right // on your movie like a canvas. // He also has the option of // changing the color of his lines. // This function is the first // one to execute. This is // where everything is initialized. _root.onLoad = function() {   // Flag the program not to draw lines.   mousePressed = false;   // Initialize the line color to green.   lineColor = 0x00FF00; }; // Install the mouse listener methods. Mouse.addListener(_root); // Let's set up the line as soon // as the user clicks the mouse. _root.onMouseDown = function() {   // This tells onMouseMove that   // it's ok to draw the line.   mousePressed = true;   // This sets the current position   // so the program can have a place   // to which to draw a line.   moveTo(_xmouse, _ymouse); }; // This function responds to any // mouse motion--even the squeaky sounds. _root.onMouseMove = function() {   // Here we update the line style   // because line color might have    // been updated.   lineStyle (0, lineColor);   // If the mouse is being pressed   // then go ahead and draw the line.   if (mousePressed)     lineTo(_xmouse, _ymouse); }; // Disable line drawing if the // user releases the mouse. _root.onMouseUp = function() {   mousePressed = false; }; 

In order to make this program work, I initialized the line style and the line color within the onLoad handler. I set up the color to be green.

 _root.onLoad = function() {   // Flag the program not to draw lines.   mousePressed = false;   // Initialize the line color to green.   lineColor = 0x00FF00; }; 

I installed the mouse listeners for those infamous methods:

 // Install the mouse listener methods. Mouse.addListener(_root); 

Below you'll see the setup for when the user clicks the mouse buttonit flags the program that the button has been pressed and it relocates the current drawing position to the current cursor position:

 _root.onMouseDown = function() {   // This tells onMouseMove that   // it's ok to draw the line.   mousePressed = true;   // This sets the current position   // so the program can have a place   // to draw a line to.   moveTo(_xmouse, _ymouse);   // Here we update the line style   // because line color might have    // been updated.   lineStyle (0, lineColor); }; 

The onMouseDown function also contains a lineStyle method with the global lineColor variable, which is updated with the current color information (every time the user clicks).

The line, once again, is only drawn if the button is clicked:

 _root.onMouseMove = function() {   // If the mouse is being pressed   // then go ahead and draw the line.   if (mousePressed)     lineTo(_xmouse, _ymouse); }; 

NOTE

NOTE

Where do you think this lineColor variable is being modified? In the buttons, of course. Hold onI'll review that code soon.

The last block of code that we have on this frame on the main Timeline is the following:

 _root.onMouseUp = function() {   mousePressed = false; }; 

All this function does is flag the program to stop drawing lines.

Now let's look into the button code. They are all similar; here's the Green button:

 on (release) {   lineColor = 0x00FF00; } 

Once the user clicks on this button, the button's code will adjust the lineColor (which is a global variable) by giving it the hexadecimal representation of green. The other two buttons are similar but they adjust to red and blue, respectively. Remember that the line style is updated when the user clicks on the stagethis is when the onMouseDown function calls the lineStyle method.

[ LiB ]


Game Development with ActionScript
Game Development with ActionScript
ISBN: 1592001106
EAN: 2147483647
Year: 2004
Pages: 162
Authors: Lewis Moronta

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net