Dragging and Dropping

[ LiB ]

Dragging and dropping techniques enhance your user 's interactivity factor by 100 percent. Imagine a space shooter in which a player can upgrade their ship with new weapons and engines. How cool would it be if they could literally drag weapon and engine graphics over an image of their ship, and see a new image appear with the upgrades taken into account! This would not be possible without first understanding how drag-and-drop techniques work. I have written a list of demos that will teach you how to set up your own dragging and dropping demos from scratch.

Using startDrag and stopDrag methods

Open GDA_PROG9.7.fla and test the movie. Drag the clip around, and drop it someplace and then pick it up again. Don't you just love the dynamics? Check out the following listing and see how I did it.

 // Game Development with ActionScript // By Lewis Moronta (c) 2003 // This program demos how to use // the mouse listener methods along // with the startDrag and stopDrag methods. // Add the listeners... Mouse.addListener(_root); // Once the user clicks, start the drag. _root.onMouseDown = function () {   dragme.startDrag(); }; // Once the user releases, stop the drag. _root.onMouseUp = function() {   dragme.stopDrag(); }; 

Figure 9.10 shows the Drag Me demo.

Figure 9.10. The Drag Me demo

graphic/09fig10.gif


Luckily for you, you get to learn how to drag and drop the easy way before you continue on to the more advanced methods. Doing it the easy way means using two convenient methods especially designed for dragging and dropping, startDrag and stopDrag .

The first thing I did in this demo was install the mouse listener so that I can use its onMouseDown and onMouseUp methods. After that I defined the onMouseDown method as follows :

 // Once the user clicks, start the drag. _root.onMouseDown = function () {   dragme.startDrag(); }; 

This function only executes when the mouse is clicked, causing the clip to follow the mouse position, because that's exactly what startDrag is meant to do.

So what about when the user wants to put the clip downdrop it? I put a stopDrag command within an onMouseUp handler. This causes the clip to stop following the mouse when the user releases the mouse button.

That's not all there is to dragging and dropping; if you carefully try different things with this program, you will notice that when you click anywhere on the screen, the clip will start following the mouse position relative to where you clicked. You do not want this.

Because of this issue, I wrote another demo, GDA_PROG9.8.fla. This demo, unlike the last one, contains the code within the Movie Clip instead of in the main Timeline. Note that when the movie is tested , you can still click completely outside the object and drag it. Also note how the same program is written in two completely different ways.

 // Game Development with ActionScript // By Lewis Moronta (c) 2003 // This program demos how to use // onClipEvent mouseDown and mouseUP // with the startDrag and stopDrag methods. // Once the user clicks, start the drag. onClipEvent(mouseDown) {   this.startDrag(); } // Once the user releases, stop the drag. onClipEvent(mouseUp) {   this.stopDrag(); } 

It's customary to always include the code that pertains to the Movie Clip inside the Movie Clip. This is the first time you have encountered these onClipEvent methods, but they behave just like the onMouseUp, onMouseDown and onMouseMove functions, so they shouldn't be too scary.

The following onClipEvent(mouseDown) method executes when the mouse is pressed and automatically starts the drag:

 onClipEvent(mouseDown) {   this.startDrag(); } 

The onClipEvent(mouseUp) detects when the user doesn't want to drag anymore and then releases the clip from following the cursor:

 onClipEvent(mouseUp) {   this.stopDrag(); } 

The hitTest Method

So let's find out how to have the clip detect where the mouse position is. We need to make sure that the mouse only drags when it's over the clip. The dragging and dropping doesn't behave properly when the user is allowed to move the clip and the mouse isn't even over the darn thing.

Check out GDA_PROG9.9.fla. It's not perfect, but we're getting there. The user can actually click on the shape and the code will do what it's been designed to do. If the user clicks outside the shape, the code does nothingor at least that's what I'm telling you now. We'll come back to that.

NOTE

TIP

There is an easier way to detect whether the user has clicked your Movie Clip.You can use the onPress method, which executes when the click is inside the Movie Clip's boundaries.With this method, you can avoid using hitTest to test whether the user really clicked on your clip or not. If you want more info on onPress check out the Flash Help filesyou will learn how to use onPress later in this book.

Let's jump into itthis listing is the code that's inside the draggable Movie Clip.

 // Game Development with ActionScript // By Lewis Moronta (c) 2003 // This program demos how to use // onClipEvent mouseDown and mouseUP // with the startDrag and stopDrag methods. // Once the user clicks, start the drag. onClipEvent(mouseDown) {     if (this.hitTest(_root._xmouse, _root._ymouse, false))       this.startDrag(); } // Once the user releases, stop the drag. onClipEvent(mouseUp) {   this.stopDrag(); } 

What's this? A new method? They seem to come out of nowhere, don't they? But that's one of the best things about ActionScriptthere's almost nothing you can't do with the language.

 onClipEvent(mouseDown) {   if (this.hitTest(_root._xmouse, _root._ymouse))     this.startDrag(); } 

Briefly stated, this event handler checks to see if the mouse position is within the Movie Clip's areaand if it is, it starts to drag it when the user presses the mouse.

Let's check out the heart of this functionalitythe hitTest method:

 myMovieClip.hitTest(x, y, considerShape); 

As you can see, this is a method of the Movie Clip class. It returns true if the point that was passed to it lies within the Movie Clip. If it doesn't, it returns false. The last parameter, considerShape , is a Boolean value that tells the function whether or not to consider the irregular shape of the Movie Clip. If the point that was passed to it doesn't lie within the Movie Clip, it evaluates the Movie Clip as a bounding box. Grab the Movie Clip by the corners, in the demo, and you'll be able to drag it even though it seems as if you aren't grabbing anything. See Figure 9.11 for a look at Movie Clip's bounding box.

Figure 9.11. A Movie Clip's bounding box

graphic/09fig11.gif


I have modified this demo into GDA_PROG9.10.fla to achieve the solid dragging and dropping that we originally wanted.

 // Game Development with ActionScript // By Lewis Moronta (c) 2003 // This program demos how to use // onClipEvent mouseDown and mouseUP // with the startDrag and stopDrag methods. // Once the user clicks, start the drag. onClipEvent(mouseDown) {   if (this.hitTest(_root._xmouse, _root._ymouse, true))     this.startDrag(); } // Once the user releases, stop the drag. onClipEvent(mouseUp) {   this.stopDrag(); } 

As you can see, the only change is the last parameter in the hitTest method, which was set to true. Run the program and test the movie and see how everything works solidly.

A Solid Drag-and-Drop Demo

And now for the last drag-and-drop demo of the chaptersee Figure 9.12 before I explain what it does. Also play GDA_PROG9.11.swf to see it in action.

Figure 9.12. Interaction between objects

graphic/09fig12.gif


This listing was extracted from the Drag Me Movie Clip in GDA_PROG9.11.fla.

 // Game Development with ActionScript // By Lewis Moronta (c) 2003 // This program demos how to use // onClipEvent mouseDown and mouseUP // with the startDrag and stopDrag methods. // Once the user clicks, start the drag. onClipEvent(mouseDown) {   if (this.hitTest(_root._xmouse, _root._ymouse, true))     this.startDrag(); } // Once the user releases, stop the drag. onClipEvent(mouseUp) {   this.stopDrag(); } 

As you can see, this listing is identical to the previous one except that I modified the actual Movie Clip timeline for some effects. I set the project up so that when the other bouncing Movie Clip touches this one, this Movie Clip will play a red frame to show a hit. Take a look at what's inside the bouncing Movie Clip in the following listing.

 // Game Development with ActionScript // By Lewis Moronta (c) 2003 // This is a bouncing projectile // that makes the dragme clip blink // everytime they overlap. How is it // done? The dragme clip is played // like a regular movie--to make sure // it resets when there is no contact // a stop() command is place at the // first frame of the dragme clip. onClipEvent(load) {   xv = 10;   yv = 10; } onClipEvent(enterFrame) {   if (this.hitTest(_root.dragme))     _root.dragme.play();   this._x += xv;   this._y += yv;   if (this._x > 550) xv = -xv;   if (this._x < 0) xv = -xv;   if (this._y > 400) yv = -yv;   if (this._y < 0) yv = -yv; } 

The first thing I did in this Movie Clip was initialize some velocity variables. The ball will go at an even 10 pixels per frame in any direction while bouncing off walls. I kept the variables global so that I can access them elsewhere in the clip.

 onClipEvent(load) {   xv = 10;   yv = 10; } 

In the enterFrame handler, you will notice that the hitTest function is being used completely differently from the way I originally showed you. Check out its other usage:

 myMovieClip.hitTest(targetMovieClip); 

myMovieClip is the clip you want to test and targetMovieClip is the clip you want to test against. The function returns true if they overlap and false if otherwise .

In this case, I am testing to see if the bouncing projectile hits the dragme clip at any point. If it does, the bouncing projectile executes the play method in the dragme clip for a flashing effect.

The next thing you see here is the motion codethe velocities are being added to the current clip position in order to move the projectile.

 this._x += xv; this._y += yv; 

The next couple of if structures test to make sure that the ball bounces from the left and right sides of the screen:

 if (this._x > 550) xv = -xv; if (this._x < 0) xv = -xv; 

I also wanted the ball to bounce off the top and bottom of the screen, so I wrote these lines:

 if (this._y > 400) yv = -yv; if (this._y < 0) yv = -yv; 

What they basically do is check if the projectile is past a side and if it is, it reverses the velocity. This, of course, forces it to move in the opposite direction.

[ 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