Adding Graphics Within A Predefined Unique Boundary

I came across a forum post of someone attempting to add graphics within, and only within a uniquely shaped boundary. There are numerous ways to achieve this visual effect in flash. One, you could add items to a shape and use a blending mode to allow only those shapes that appear over the parent object to be visible within the parent object’s shape, or two, you could devise a way to duplicate your original shape and use it as a mask on the added children. But, those options don’t really solve the problem of purely adding graphics at x,y coords that are within the actual shape that is to contain them. This led me to play around a bit with BitmapData.hitTest();  This method is a tried and solid practice of collision detection when you have just a few items that need to test for a collision. It does take some processing power, especially when you’re shapes contain soft edges. The soft edges, however, are key to allowing you to place items strictly within solid boundries… more on this below the example.

This may not be the most efficient way to handle this, but this solution works well for the projects within which I intend to use this. Here is how it works in loose terms: I define a shape (manually drawn) that I want to add children to. Once this shape is defined, I draw that shape to a BitmapData. I then blur this BitmapData. Next, I take the width and height of that object, and render a grid of pre-defined size, based in the unique shape’s width and height, on top of that unique object. Each “cube” within this grid is a BitmapData object. Next, I loop through the grid cubes and test their position with regards to the unique shape using BitmapData.hitTest(); At that point, I remove all grid cubes that aren’t covering a solid non-alpha portion of the unique shape. Last, I add my child graphics randomly to grid cubes that still exist after removal of the grids that aren’t covering opaque regions of the original shape. 

There are many limitations to this technique: grid size, added-graphics size/radius, etc., but it does a fairly decent job and may lend itself to other similar applications.  If you’re interested in the source files, please leave a comment requesting such. I’m new to the blog-o-sphere and hesitate to load my server with source code until I receive X amount of requests! I wasn’t inclined to include a “refresh” button, so to retry this swf, refresh your browser page.