Return to Kroll Design home page

Flash Tutorials (with .FLA files included)

 
« Return

ActionScript 3

Collision Detection

Flash has two built-in functions for collision testing:
(1) hitTestObject determines if the bounding boxes of the two specified objects are overlapping. A bounding box is a rectangle surrounding the object, normally invisible, that Flash uses to "contain" the object.
(2) hitTestPoint determines if the specified X,Y coordinate is overlapping the specified shape or bounding box. In this example, the third parameter of hitTestPoint is set to true, so that the shape itself is used, not the bounding box (if not specified, the third parameter defaults to false, that is, to use the bounding box instead of the shape). Whereas with hitTestObject, there is unfortunately no option to test the actual shapes instead of the bounding boxes. If you're lucky, by time you read this, Adobe will have come out with a cool new release of Flash that offers true shape collision detection!

Download the FLA file



//---------------------------------------------------------
// Library items that I created, that is, these are names I made up, they are not
// built-in Flash items:
//
//  HideBox
//  HitTestObjectMessage
//  HitTestPointShape1
//  HitTestPointShape2
//  Instructions
//  PointTarget
//  Shape1
//  Shape1_WithBox
//  Shape2
//  Shape2_WithBox
//  ShowBox
// 


//---------------------------------------------------------
// the offsetY constant allows you to shift everything up and down by the same
// amount to make room for instructions at the top of the movie.
// and the shapeY constant allows you to set the starting Y position of the
// shapes in one place:

   const offsetY:uint = 100; 
	 const shapeY:uint  = 150;


//---------------------------------------------------------
// add Shape 1:

   var myShape1_mc:Shape1 = new Shape1();
   myShape1_mc.x = 150;
   myShape1_mc.y = shapeY + offsetY;
   myShape1_mc.buttonMode = true;
   addChild(myShape1_mc);
	 myShape1_mc.addEventListener(MouseEvent.MOUSE_DOWN, startDragShape1);	 
	 function startDragShape1(myEvent:MouseEvent)
   {
	   myShape1_mc.startDrag();
   }

	 
//---------------------------------------------------------	 
// add Shape 1 with bounding box. This is just for the purpose of the tutorial,
// to show you where the bounding box is. In a real Flash movie you wouldn't do this:

   var myShape1_WithBox_mc = new Shape1_WithBox();
   myShape1_WithBox_mc.blendMode = flash.display.BlendMode.DARKEN;

// set mouseEnabled to false so it doesn't block mouse action for
// the shape hiding below it which has no bounding box:

   myShape1_WithBox_mc.mouseEnabled = false;
	 myShape1_WithBox_mc.visible = false;
   addChild(myShape1_WithBox_mc);
   
	 
//---------------------------------------------------------
// add Shape 2:

   var myShape2_mc:Shape2 = new Shape2();
   myShape2_mc.x = 450;
   myShape2_mc.y = shapeY + offsetY;
   myShape2_mc.buttonMode = true;
	 addChild(myShape2_mc);
	 myShape2_mc.addEventListener(MouseEvent.MOUSE_DOWN, startDragShape2);
	 function startDragShape2(myEvent:MouseEvent)
   {
	   myShape2_mc.startDrag();
   }


//---------------------------------------------------------	 
// add Shape 2 with bounding box. This is just for the purpose of the tutorial,
// to show you where the bounding box is. In a real Flash movie you wouldn't do this:

   var myShape2_WithBox_mc = new Shape2_WithBox();
   myShape2_WithBox_mc.blendMode = flash.display.BlendMode.DARKEN;
	 
// set mouseEnabled to false so it doesn't block mouse action for
// the shape hiding below it which has no bounding box:	 

   myShape2_WithBox_mc.mouseEnabled = false;
   addChild(myShape2_WithBox_mc);
   myShape2_WithBox_mc.visible = false;

	 
//---------------------------------------------------------	
// add the "Show Bounding Box" button:

   var showBox_btn:ShowBox = new ShowBox();
   showBox_btn.x = 100;
   showBox_btn.y = offsetY;
   addChild(showBox_btn);
	 showBox_btn.addEventListener(MouseEvent.CLICK, clickShowBoxBtn);

	 
//---------------------------------------------------------	
// add the "Hide Bounding Box" button:	 

   var hideBox_btn:HideBox = new HideBox();
   hideBox_btn.x = showBox_btn.x;
   hideBox_btn.y = showBox_btn.y;
   addChild(hideBox_btn);
   hideBox_btn.visible = false;
   hideBox_btn.addEventListener(MouseEvent.CLICK, clickHideBoxBtn);


//---------------------------------------------------------	
// add the Point Target.  If either of the two shapes overlap this point, then
// Flash's built-in hitTestPoint function will be true.  In this example I'll set
// the third parameter of hitTestPoint to true, so that the bounding box will be
// ignored, and the actual shape of the objects will be used.  Unfortunately, this
// level of accuracy in collision detection is not available (as of Flash CS3, anyway)
// with hitTestObject:

   var pointTarget_mc:PointTarget = new PointTarget();
	 const pointTargetX = 300;
	 const pointTargetY = 200 + offsetY;
	 pointTarget_mc.x = pointTargetX;
	 pointTarget_mc.y = pointTargetY;
	 addChild(pointTarget_mc);
	
	
//---------------------------------------------------------	
// add the message which appears when hitTestObject is true, that is, when
// the bounding boxes of the two objects overlap each other:

   var hitTestObjectMessage_mc:HitTestObjectMessage = new HitTestObjectMessage();
	 hitTestObjectMessage_mc.x = 400;
	 hitTestObjectMessage_mc.y = offsetY;
	 hitTestObjectMessage_mc.visible = false;
	 addChild(hitTestObjectMessage_mc);
	
	
//---------------------------------------------------------	
// add the message which appears when hitTestPoint is true for Shape 1,
// that is, when Shape 1 overlaps the black dot:
	 
   var hitTestPointShape1_mc:HitTestPointShape1 = new HitTestPointShape1();
	 hitTestPointShape1_mc.x = 200;
	 hitTestPointShape1_mc.y = 300 + offsetY;
	 hitTestPointShape1_mc.visible = false;
	 addChild(hitTestPointShape1_mc);

	 
//---------------------------------------------------------	
// add the message which appears when hitTestPoint is true for Shape 2,
// that is, when Shape 2 overlaps the black dot:
	 
   var hitTestPointShape2_mc:HitTestPointShape2 = new HitTestPointShape2();
	 hitTestPointShape2_mc.x = 200;
	 hitTestPointShape2_mc.y = 350 + offsetY;
	 hitTestPointShape2_mc.visible = false;
	 addChild(hitTestPointShape2_mc);	 
	 
	 
//---------------------------------------------------------	
// add the user instructions for this movie:

   var instructions_mc:Instructions = new Instructions();
	 instructions_mc.x = 300;
	 instructions_mc.y = 30;	
	 addChild(instructions_mc);

	 
//---------------------------------------------------------	
// Do the following processing in each new frame:
	 
   stage.addEventListener(Event.ENTER_FRAME, enterFrameProcessing);
   function enterFrameProcessing(myEvent:Event)
   {
		 
// the x and y location of the "fake" bounding box images should always match the 
// location of the corresponding true Flash objects:		 
		 
	   myShape1_WithBox_mc.x = myShape1_mc.x;
     myShape1_WithBox_mc.y = myShape1_mc.y;
	
	   myShape2_WithBox_mc.x = myShape2_mc.x;	
	   myShape2_WithBox_mc.y = myShape2_mc.y + 1; // "+ 1" so image doesn't "jump"		 
		 
// if the bounding box of the two shapes touch, this will cause Flash's
// built-in hitTestObject function to detect a collision:		

     if (myShape1_mc.hitTestObject(myShape2_mc))
		 {
			  hitTestObjectMessage_mc.visible = true;
		 }
		 else
		 {
			  hitTestObjectMessage_mc.visible = false; 
		 }
		 
// if either of the shapes touches the point on the the stage specified
// in the first two parameters of Flash function hitTestPoint, 
// display a message to this effect:

     if (myShape1_mc.hitTestPoint(pointTargetX, pointTargetY, true))
     {
			  hitTestPointShape1_mc.visible = true; 
		 }
		 else
		 {
			  hitTestPointShape1_mc.visible = false; 
		 }
		 
		 if (myShape2_mc.hitTestPoint(pointTargetX, pointTargetY, true))
     {
			  hitTestPointShape2_mc.visible = true; 
		 }
		 else
		 {
			  hitTestPointShape2_mc.visible = false; 
		 }			 
   }


//---------------------------------------------------------	
// if the "Show Bounding Box" button is clicked, hide this button, show the
// "Hide Bounding Box" button, and show the bounding box images:

   function clickShowBoxBtn(myEvent:MouseEvent)
   {
	   hideBox_btn.visible = true;
	   showBox_btn.visible = false;	
	   myShape1_WithBox_mc.visible = true;
	   myShape2_WithBox_mc.visible = true;
   }

	 
//---------------------------------------------------------	
// if the "Hide Bounding Box" button is clicked, hide this button, show the
// "Show Bounding Box" button, and hide the bounding box images:	

   function clickHideBoxBtn(myEvent:MouseEvent)
   {
	   showBox_btn.visible = true;
	   hideBox_btn.visible = false;	
	   myShape1_WithBox_mc.visible = false;
	   myShape2_WithBox_mc.visible = false;
   }

	 
//---------------------------------------------------------	
// if the mouse button is released, stop any dragging of images that 
// may be in progress:

   stage.addEventListener(MouseEvent.MOUSE_UP, stopDragFunction);
   function stopDragFunction(myEvent:MouseEvent) 
   {
	   myShape1_mc.stopDrag();
	   myShape2_mc.stopDrag();
   }


 
« Return


©2012 Kroll Design    info@KrollDesign.net    781.910.3694
Last modified: 12/31/1969 7:00 PM