Blurring and disabling background while reconnecting Flex application to backend

Question

My Flex 4.5 application has many users from Russia and Ukraine with poor internet connections and Socket connections often interrupt and have to be reconnected.

Currently I set currentState to "offline" on IOErrorEvent.IO_ERROR and Event.CLOSE events and display just 1 component in that state:

<mx:ProgressBar indeterminate="true" 
    horizontalCenter="0" verticalCenter="0"
    label="Reconnecting..." labelPlacement="center" 
    includeIn="offline" />

but this is not the best way - because the users are suddenly presented by the white screen and the progress bar, while the background disappears.

(Actually it is not an application, but a card game - so the users could at least study their cards while being reconnected).

So I wonder, if there is a way to blur and disable background in Flex - similar to mx.controls.Alert, but without an OK-button and being dismissable when the Socket connection is restored?

UPDATE:

I've used a PopUpManager as suggested by Chris, but the indeterminate ProgressBar is not animated for some reason. How can I "kick start" it?

MyApp.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    width="700" height="525" 
    backgroundColor="#CCFFCC"
    initialize="systemManager.stage.scaleMode=StageScaleMode.SHOW_ALL" 
    applicationComplete="init()">

    <fx:Script>
        <![CDATA[
            import mx.managers.PopUpManager;
            import mx.controls.ProgressBar;

            private function init():void {
                var bar:Connecting = PopUpManager.createPopUp(this, Connecting, true) as Connecting;
                PopUpManager.centerPopUp(bar);              
            }

            private function fullScreen(event:MouseEvent):void {
                stage.displayState = 
                    stage.displayState == StageDisplayState.NORMAL ?
                    StageDisplayState.FULL_SCREEN :
                    StageDisplayState.NORMAL;
            }
        ]]>
    </fx:Script>

    <s:states>
        <s:State name="normal" />
        <s:State name="connected" />
    </s:states>

    <s:CheckBox right="10" bottom="10" 
        label="Full screen" 
        click="fullScreen(event)" />

</s:Application>

Loading.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:ProgressBar 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx"
    indeterminate="true" fontWeight="normal"
    label="Connecting..." labelPlacement="center">
</mx:ProgressBar>

UPDATE 2:

Solved that by embedding ProgressBar in a Group

Answer 1

When you are using Alert what is really happening is that a popup component is displayed on top of your app. You can achieve the same effect using the PopUpManager to blur the background while displaying a small message to the user(maybe a custom component using Canvas).

Answer 2

When the connection is lost, set the enabled property of your Application (or the top level component you want to blur) to false and back to true when the connection is reestablished.

'Application' defines a skin state disabled which automatically becomes the currentState when the components 'enabled' property is set to 'false'. This means you can create a skin like this:

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" >

    <fx:Metadata>[HostComponent("spark.components.Application")]</fx:Metadata>

    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>

    <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />

    <s:filters.disabled>
        <s:BlurFilter />
    </s:filters.disabled>

</s:Skin>

This will include the 'BlurFilter' only in the 'disabled' state. And setting the 'enabled' property to 'false' will automatically block all user interaction with the component.