Tip: Get Dimensions Of Blurred Display Objects

I was working on a project recently where I had to blur a movie clip using the BlurFilter and then use the blurred clip's new dimensions to create a new BitmapData and draw into it the blurred clip (or something along those lines, logistics of the project aren't important for this purpose). I went ahead and blurred the clip and when I traced out the width and height I got back the regular width and height. After some fumbling around and asking people if they've ever run into this problem, I finally found a solution.

Lets say that you create a movie clip on the stage (box_mc) that is 20x20. If you apply a blur to the clip that is 10px in both the x and y direction and trace out the dimensions, as stated above you'll get 20 back for both.

Actionscript:
  1. box_mc.filters = [new BlurFilter(10, 10)];
  2.  
  3. trace("WIDTH: " + box_mc.width + " & HEIGHT: " + box_mc.height);
  4. // outputs WIDTH: 20 & HEIGHT: 20

Naturally after this I was puzzled and went about searching for methods or properties that would give me back the width and height of the clip after the blur has been applied. I tried the following next:

Actionscript:
  1. box_mc.filters = [new BlurFilter(10, 10)];
  2.  
  3. trace("WIDTH: " + box_mc.getBounds(box_mc).width + " & HEIGHT: " + box_mc.getBounds(box_mc).height);
  4. // outputs WIDTH: 20 & HEIGHT: 20

Next I went with this:

Actionscript:
  1. box_mc.filters = [new BlurFilter(10, 10)];
  2.  
  3. trace("WIDTH: " + box_mc.getRect(box_mc).width + " & HEIGHT: " + box_mc.getRect(box_mc).height);
  4. // outputs WIDTH: 20 & HEIGHT: 20

I think I tried a couple of other things but I don't recall them all anymore and needless to say none of them yielded the results I was looking for. I started looking at the BitmapData class since I was going to be drawing this resulting clip in a new BitmapData instance. This made me notice a little method called generateFilterRect(). Now, I couldn't use that just yet because I was using the dimensions of this blurred clip to actually generate my new BitmapData so I needed the height and width before the BitmapData was created. I went ahead and read the help file for the generateFilterRect() method and this little tidbit caught my eye right away:

For example, a blur filter normally affects an area larger than the size of the original image. A 100 x 200 pixel image that is being filtered by a default BlurFilter instance, where blurX = blurY = 4 generates a destination rectangle of (-2,-2,104,204). The generateFilterRect() method lets you find out the size of this destination rectangle in advance so that you can size the destination image appropriately before you perform a filter operation.

As you can see here, the solution is SO much simpler (and pretty ridiculous if you ask me) than what I was attempting. It turns out that all you have to do is divide the amount of your blur in whichever direction you are blurring by 2 and that will give you the size in pixels that each side will grow. For instance, since we are blurring our clip by 10 on both the X and Y axis, that means each side (top and bottom, left and right) will add 5 pixels to account for the amount of the blur. So if our clip was positioned at a point of (20, 20) originally, the new point that is in the "top left" is now at (15, 15) and the width/height goes not from 20 to 40 on each axis but from 15 to 45.

If you're having trouble understanding that, below is a graphical representation of what I'm referring to:

As you can see, the width and height of the blurred clip is 30 (and yes, it actually is 30 but because it blurs out it's hard to see it actually hit the 30 pixels). This caused me a bit of a headache to figure out initially but as simple and dumb of a solution as this is, it did in the end serve its purpose and allowed me to move forward in my project. If you have a cleaner way of figuring this out, I would LOVE for you to let me know about it.

If you found this post useful, please consider leaving a comment, subscribing to the feed, or making a small donation.

6 Comments

I think using override getter/setter width/height might solve this problem.

Clouds,
I'm not exactly sure what you mean by that...?

What if multiple filters are applied to sprite's within a container sprite? See details at http://stackoverflow.com/questions/466280/get-bounds-of-filters-applied-to-flash-sprite-within-sprite

that is more of an issue Michael, one I'm not exactly sure how to solve. I had a hell of a time even coming up with this solution :\

What do you think about that code :


var blur_Filter : BitmapFilter = tmp.filters[0];
var el_rect : Rectangle = tmp.getBounds(this);
var bmd : BitmapData = new BitmapData( el_rect.width, el_rect.height, true, 0x00000000);
var filter_rect : Rectangle = bmd.generateFilterRect( el_rect, blur_Filter );
bmd.dispose();

I hope will help you.

Joffrey: I ran this code:

Actionscript:
  1. box_mc.filters = [new BlurFilter(10, 10)];
  2.  
  3. var blur_Filter : BitmapFilter = box_mc.filters[0];
  4. var el_rect : Rectangle = box_mc.getBounds(this);
  5. var bmd : BitmapData = new BitmapData( el_rect.width, el_rect.height, true, 0x00000000);
  6. var filter_rect : Rectangle = bmd.generateFilterRect( el_rect, blur_Filter );
  7. bmd.dispose();
  8.  
  9. trace(filter_rect);

and this is what the trace came back as:

(x=134217722, y=134217722, w=10, h=10)

First off, what is with those crazy x/y coordinates?

Secondly, that just gives me the width/height of the filter (or in this case the settings i passed into the BlurFilter). Am I misunderstanding what you are trying to do? Because as it stands, that really doesn't do anything towards solving the problem here (again, unless I am misunderstanding something, which is highly likely :P).

Leave a comment

(required)

(required)