AS3: Make sure children stays inside parent movieclip's shape

Question

Red: Shape inside parent movieclip,
Yellow: Children inside parent movieclip

Image http://frontenddev.com/images/stack.png

I'd like to animate the yellow dots, but make sure that they never gets out of the red shape's boundary. How can I approach this problem?

Answer 1

This is fundamentally equivalent to rolling your own physics engine for custom shapes. I suggest looking into existing physics engines and applying one to meet your needs.

That said, if it's okay for the objects to leave the display object's bounds and you just don't want them to show up in that case, you can use a second copy of the same display object to mask the original object.

Answer 2

Try with hitTestObject. It evaluates the display object to see if it overlaps or intersects with the obj display object.

for each(var yellow:DisplayObject in yelloDotsArray)
{
  if(yellow.hitTestObject(theRed))
    trace("this dot is within the limits");
  else
    trace("this dot is outside the red area");
}

Answer 3

As far as outter shapes are rectangles(or union of rectangles as your picture) and inner shapes are circles, checking distance between the center of a circle and edges of all rectangles for all circles is much cheaper than using hitTestObject.

In addition, I suggest to use existing libraries such as http://code.google.com/p/collisiondetectionkit.