5 Replies Latest reply on Apr 23, 2010 2:54 PM by Peter deHaan

    Alert background blur effect

    hidarikani Level 2

      When an alert is displayed all background elements are blurred and not clickable.

      How do I reproduce this effect when displaying a custom component? For example a fatal error message.

        • 1. Re: Alert background blur effect
          David_F57 Level 5



          All you need to do is apply a blur effect to the application -


          for instance -


          if (error == true)


            this.filters = [new BlurFilter()]; 

            showmessagebox() ;  <=== your custom alert




          then on custom alert close  --   this.filters = null;




          1 person found this helpful
          • 2. Re: Alert background blur effect
            hidarikani Level 2

            The alert is always in the center of the window.

            But my app's layout is set to vertical.

            How do I display my custom component in the center and above all controls, without changing the app's layout to absolute?

            • 3. Re: Alert background blur effect
              David_F57 Level 5



              you can do this with post layout transform, i'll post an example later tonight.



              • 4. Re: Alert background blur effect
                hidarikani Level 2

                I'll post an example later tonight.

                That would be nice

                • 5. Re: Alert background blur effect
                  Peter deHaan Level 4

                  I think I'm confused. Instead of an Alert, you want to display a custom component instead?

                  You should be able to display your custom component using the PopUpManager class and if you want the blurred background, set modal=true.


                  The following example shows a basic usage in Flex 4, but it should be mostly the same logic in Flex 3. I also included a little CheckBox so you can toggle modal=true and modal=false (that third arg in the PopUpManager.createPopUp() call), to see the difference.


                  <?xml version="1.0" encoding="utf-8"?> 
                  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                          <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
                          <s:CheckBox id="chckBx" label="Do you want it modal?" selected="true" />
                          <s:Button label="Launch" click="init();" />
                              import mx.core.IFlexDisplayObject;
                              import mx.managers.PopUpManager;
                              private function init():void {
                                  var myCustomPopUp:IFlexDisplayObject = PopUpManager.createPopUp(this, CustomComponent, chckBx.selected);
                      <s:Button label="red" chromeColor="red" width="100%" height="20%" />
                      <s:Button label="orange" chromeColor="haloOrange" width="100%" height="20%" />
                      <s:Button label="yellow" chromeColor="yellow" width="100%" height="20%" />
                      <s:Button label="green" chromeColor="haloGreen" width="100%" height="20%" />
                      <s:Button label="blue" chromeColor="haloBlue" width="100%" height="20%" />



                  And my simple custom component, CustomComponent.mxml, is as follows:


                  <?xml version="1.0" encoding="utf-8"?>
                  <s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 
                           title="Spark TitleWindow title"
                           width="400" height="300"
                              import mx.events.CloseEvent;
                              import mx.managers.PopUpManager;
                              protected function titlewindow1_closeHandler(evt:CloseEvent):void {
                                  PopUpManager.removePopUp(evt.currentTarget as TitleWindow);
                      <s:Label text="FATAL ALERT!"
                               horizontalCenter="0" verticalCenter="0" />