Apply Filter to Everything in AS3

Question

I'm trying to add a filter in AS3/Flex SDK. I can add a filter just fine to any one single object - but I want to apply the filter to everything that is a child of a certain object.

Think a pause window pops up, and everything below the pause window goes blurry.

Applying a filter to each individual object (eg: iterating through a list) doesn't work, as the filters from each object can then overlap and look pretty ugly.

Does anyone know how to go about doing this? Is there a way to apply a filter to everything?

Here's a simplified version of the code:

myCanvas.graphics.beginFill(0x00FF00,0.5);
myCanvas.graphics.drawRect(0,0,100,100);
myCanvas.addChild(new vectorImage());
myCanvas.addChild(new vectorImage2());
var blur:BlurFilter = new BlurFilter();
myCanvas.filters = [blur];

Neither the directly-drawn graphics nor the children get the blur effect applied. I've tried altering the defaults and tried other filters:

var colors:Array = [0xEDEDED, 0xCCCCCC, 0x211b28, 0x211b28, 0x211b28];
var alphas:Array = [0, 1, .35, .5, 1];
var ratios:Array = [0, 50, 100, 115, 155];     
myCanvas.filters = [new GradientGlowFilter(0, 0, colors, alphas, ratios, 50, 50, 1, 3, "full", false)];

With identical effects (that is to say: none). What DOES work, is:

var vi:MovieClip = new vectorImage();
myCanvas.addChild(vi);
vi.filters = [blur];

but produces the above mentioned problems with multiple filters not aligning properly.

Answer 1

if i understand you question right, applying the filters to the stage would be the most simple thing, no?

Answer 2

//in timeline code or Document class

var blur:BitmapFilter = new BlurFilter(5, 5, BitmapFilterQuality.HIGH); var allFilters:Array = new Array(); allFilters.push(filter); filters = allFilers;

Answer 3

You should be able to just apply your blur to the container. The filters property is an array though. Try something like this:

var blur:BlurFilter = new BlurFilter();
myCanvas.filters = [blur];

Answer 4

As I see it, you have two possible approaches:

• put everthing you want to blur in a separate container as the rest and apply the filters to that container.

• create a BitmapData of the size of the stage (or the part you want to blur), draw the stage, applyFilter, add it to the the display list (on top of everything) and on top of that add all sprites that shouldn't be blurred (I imagine an alert box or similar). Note that you should update the BitmapData on resize.

UPDATE: Your code seems correct, but I'm not familiar with Flex, so maybe you can't add filters to Canvas (is it a DisplayObject?)... maybe setting his cacheAsBitmap to false works (it's quite buggy sometimes)... anyway, something like this should do the trick:

var container=new Sprite();
myCanvas.addChild(container);
container.addChild(new vectorImage());
container.addChild(new vectorImage2());
container.filters=[blur];

or maybe Canvas has a container property already...

Cheers...