Question

I’m trying to create my own modal window (the built in popup manager won’t work for this application) and get objects behind the window to be blurred. The code below is obviously wrong since it doesn’t work but can someone point me in the right direction? Do I have to manually blur each object behind the window?

<s:Button label="Testing" left="512" top="300">     
</s:Button>
<s:Rect width="1024" height="768" alpha=".5">
    <s:fill>
        <s:SolidColor color="#000000">              
        </s:SolidColor>
    </s:fill>
    <s:filters>
        <s:BlurFilter>              
        </s:BlurFilter>
    </s:filters>
</s:Rect>

Answer 1

Your code is obviously just going to blur that black rectangle and nothing else. The issue here is that you want to blur the entire application, except the modal window.

I can think of two solutions:

solution 1

Put your entire application in a separate class and apply the filter to that:

<s:Application>

    <s:States>
        <s:State name="normal" />
        <s:State name="modal" />
    </s:States>

    <view:Main>
        <view:filters.modal>
            <s:BlurFilter>
        </view:filters.modal>
    </view:Main>

    <s:Group includeIn="modal">
        <view:ModalWindow />
    </s:Group>
</s:Application>

(this is not a working code sample: its purpose is just to convey the idea)

Solution 2

Take a screenshot of your app (create a BitMap) before the window pops up. Place that image over your app and apply the blur filter to that image. Then place the modal window. You couldn’t click on anything because of the image overlaying everything, but that’s the behavior you want from a modal window.