How can I make background fades when a custom component is in focus in Flex

Question

I created a custom component that is a s:SkinnableContainer. I want the background and other items to fade out when this component is visible. Something similar to what happens when calling Alert.show(..) so the Alert box is in focus and everything else is faded out.

Answer 1

set alpha of container of the background to less than 1.

alternatively use custom component as a popup using PopupManager

Answer 2

If you want to blur everything in a container, use something like:

<mx:BlurFilter id="myBlur" blurX="3" blurY="3" quality="3" />

or in AS3

private function blurObj(cont:Container) : void {
  var filters:Array = cont.filters;
  var bf:BlurFilter = new BlurFilter(3,3,3);
  filters.push(bf);
  cont.filters = filters;
}

Change the values of the BlurFilter properties (or constructor args) to values that suit you.