Movie Clip Collision Detection


Have you ever wanted to detect the intersection of two elements in a Flash movie? If two Movie Clip instances overlap on the Stage, how would you know? How would you tell ActionScript to look for an overlap? In ActionScript, there are two primary types of intersections (or collisions):

  • User-initiated collisions: This type of intersection occurs when you click and drag an object (a MovieClip object) and overlap another MovieClip object as you drag or release. You can also consider the mouse pointer an "object" that can intersect with another object. For example, if you move the mouse pointer over a MovieClip object, you can detect when the mouse pointer enters the space of the MovieClip object.

  • Script- or time-based collisions: This type of intersection between objects happens when randomly moving objects collide with one another, such as balls bouncing around the Stage, detecting the edges of the frame, and responding to other boundaries or objects.

In this section, you look at examples in each of these categories. Let's begin with a quick review of the _droptarget property of the MovieClip object.

Using _droptarget

A collision between two MovieClip objects can occur if the user drags one Movie Clip instance to the location of another Movie Clip instance. We first examined the startDrag() action and method in Chapter 25, "Controlling Movie Clips." In the dog movie, you used the _droptarget property of a MovieClip object to detect whether the area of one MovieClip object occupied the area of another MovieClip object. To recap, you can test the intersection of two Movie Clips with the following code:

 var mc_1:MovieClip; var mc_2:MovieClip; mc_1.onPress = function():Void {  this.startDrag(); }; mc_1.onRelease = mc_1.onReleaseOutside = function():Void {  trace(eval (this._droptarget));  if(eval(this._droptarget) == mc_2){    trace("this MC overlaps mc_2");  } else {    trace("this MC does NOT overlap mc_2");  }  stopDrag (); } 

This code could occur on a MovieClip object named mc_1. When the user clicks the MovieClip instance, the MovieClip.startDrag() method is invoked, and the user can drag the Movie Clip instance on the Stage. When the user releases the mouse, the _droptarget property (which returns target paths in slash syntax) is evaluated to convert the target path to dot syntax. If the _droptarget property returns the path to another instance, the if condition sees whether the path matches mc_2. If the paths match, the trace() action indicating an overlap is executed. Otherwise, a separate trace() action notifies you that the instance is not on top of mc_2.

Collision Detection with hitTest()

You can also perform more advanced collision detection using the hitTest() method of the MovieClip object. hitTest() does exactly what it says — it tests to see whether a "hit" occurred between two elements. hitTest() has the following two formats:

 mc.hitTest(anotherInstance); 

or

 mc.hitTest(x coordinate, y coordinate, shapeFlag); 

With this method, you can determine whether the X and Y coordinates are within the space occupied by the Movie Clip instance. You can use onClipEvents such as mouseMove or newer event handlers such as onMouseMove() to check constantly for a hit occurrence:

 onClipEvent(mouseMove){  if(this.hitTest(_root._xmouse, _root._ymouse, true)){   trace("A hit has occurred");  } } 

or

 mc.onMouseMove = function(){  if(this.hitTest(_root._xmouse, _root._ymouse, true)){   trace("A hit has occurred");  } }; 

This code reports a trace() action anytime the mouse pointer is moved within the artwork of the Movie Clip instance to which the onClipEvent or onMouseMove() handler is attached. The shape flag attribute of hitTest() defines the actual test area for the hit. If the shape flag is set to true, a hit occurs only if the X and Y coordinates occur within the actual artwork of the Movie Clip instance. If the shape flag is set to false, a hit occurs whenever the X and Y coordinates occur within the bounding box of the Movie Clip instance. In Figure 27-1, if the left circle uses a shape flag of true, a hit is reported whenever the X and Y coordinates occur within the shape of the circle (not within the bounding box). If the right circle uses a shape of false, a hit is reported when the X and Y coordinates occur within the bounding box.

image from book
Figure 27-1: The shape flag determines the boundary of the Movie Clip instance for the hitTest() method.

On the CD-ROM 

You can see a working example of shape flags and the hitTest() method in the hitTest_xy.fla file, located in the ch27 folder of this book's CD-ROM. Open this Flash document, and test the movie. As you move your mouse within the space of each object, you will notice that the hit area is different for each object. You create your own Flash movie that uses hitTest() in our coverage of the Mouse object in this chapter.

The other format for the hitTest() method is to simply specify a target path to compare for a hit occurrence. With this syntax, you cannot use a shape flag option; if any area of the bounding box for a Movie Clip instance touches the bounding box of the tested instance, a hit occurs. For example, you can modify the ActionScript used earlier to indicate a hit between instances, instead of X and Y coordinates:

 onClipEvent(mouseMove){  if(this.hitTest(mc_2)){   trace("A hit has occurred.");  } } 

or

 mc_1.onMouseMove = function(){  if(this.hitTest(mc_2)){   trace("A hit has occurred.");  } }; 

This code assumes that other actions are actually initiating a startDrag() action. Also, we have omitted the other half of the if condition in both this example and the previous example. If you omit a condition operator and test condition, ActionScript assumes that you are testing for a true result (as a Boolean value). The following if conditions are exactly the same:

 var myMouseClick:Boolean = true; if(myMouseClick){  trace("myMouseClick is true."); } if(myMouseClick == true){  trace("myMouseClick is true."); } 

Therefore, to test for a true value with any if statement, specify the variable (or method) that has a Boolean value. The hitTest() method yields either a true (a hit has occurred) or a false (no hit has occurred) result. Note that, with scripting languages, it is more common to use the former example for testing true conditions.

On the CD-ROM 

You can see a working example of targets and the hitTest() method in the hitTest_target.fla file, located in the ch27 folder of this book's CD-ROM. You will create a Flash movie that uses this type of hitTest() method in our coverage of the Sound class later in this chapter.




Macromedia Flash 8 Bible
Macromedia Flash8 Bible
ISBN: 0471746762
EAN: 2147483647
Year: 2006
Pages: 395

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