9 Replies Latest reply on Oct 3, 2011 8:24 AM by nikos101

    Effects with the popup manager for my popups

    nikos101 Level 2

      My alerts in sdk 4.5 have a nice alpha black ground in the rest of the app and this bg eases in from alpha = 0.

       

      How can I reproduce this same effects with the popup manager for my popups.

       

      Currently my popups can lose focus to the main app and there is not app blur or darkening.

        • 1. Re: Effects with the popup manager for my popups
          learner_doug Level 1

          You might give this a try.  You can play with the parameters to darken, lighten, lengthen/shorten.

           

          <fx:Style>

           

           

          @namespace s "library://ns.adobe.com/flex/spark";

           

          @namespace mx "library://ns.adobe.com/flex/mx";

           

          @namespace local "*";

           

          @namespace components "components.*";

           

          global {

           

          modalTransparencyBlur: 0;

           

          modalTrancparency: 0.8;

           

          modalTransparencyColor: black;

           

          modalTransparencyDuration: 500;

           

          roll-over-color: #CAD9F0;

          }

           

          </fx:Style>

          1 person found this helpful
          • 2. Re: Effects with the popup manager for my popups
            nikos101 Level 2

            thx but that doesnt work for popups via PManger

            • 3. Re: Effects with the popup manager for my popups
              learner_doug Level 1

              Hmm, should work with the PopUpManager - Here is an example of how it works for me.  Perhaps you are doing something different: 

               

              private

               

              var popUpVid:helpPopUp = new helpPopUp();

              protected

               

               

               

               

               

              function button1_clickHandler(event:MouseEvent):void

              {

              PopUpManager.addPopUp(popUpVid,

              this, true);

                             popUpVid.x=75;

                     popUpVid.y=75;

               

              }

              • 4. Re: Effects with the popup manager for my popups
                Shongrunden Adobe Employee

                You might find the new SkinnablePopUpContainer component introduced in 4.5 useful:

                http://opensource.adobe.com/wiki/display/flexsdk/SkinnablePopUpContainer

                 

                That spec has a section that demonstrates how to define transitions between the open and closed states.

                • 5. Re: Effects with the popup manager for my popups
                  nikos101 Level 2

                  I tried this but it says

                   

                  Child elements of 'SkinnablePopUpContainer' serving as the default property value for 'mxmlContentFactory' must be contiguous

                   

                  <s:SkinnablePopUpContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                             xmlns:s="library://ns.adobe.com/flex/spark"
                                             xmlns:mx="library://ns.adobe.com/flex/mx" skinClass="views.skins.ts"
                                            
                                             >
                     
                     
                     
                      <s:TitleWindow    title="Adding new objective ({objectiveInProcess.objectiveTypeName} type)"
                                        title.editing="Editing objective ({objectiveInProcess.objectiveTypeName} type)" >

                  • 6. Re: Effects with the popup manager for my popups
                    nikos101 Level 2

                    OK I moved some of the tags around and this thing compiles, but when I show it I get this error

                     

                     

                    Error: Skin for AddEditObjectivePopup433.ts434.chromeGroup.contentGroup._AddEditObjectivePopup_TitleWindo w1 cannot be found.

                    • 7. Re: Effects with the popup manager for my popups
                      learner_doug Level 1

                      Don't know why you are getting those errors - because I'm not programmer, just a designer.  I wrote a small test application for you to try.  Perhaps you could build your effects around this because this should work for sure - I tested and it is fine.  Good Luck!  If this is not what you are looking for, then I'm very sorry that I could not be more help.

                       

                                  • TEST APPLICATION for DARK BACKGROUND POPUPS  ********************

                       

                      <?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" minWidth="955" minHeight="600"

                                         

                                         >

                           <fx:Declarations>

                                 

                           </fx:Declarations>

                            

                           <fx:Style>

                                @namespace s "library://ns.adobe.com/flex/spark";

                                @namespace mx "library://ns.adobe.com/flex/mx";

                            

                                global

                           </fx:Style>

                            

                           <fx:Script>

                                <![CDATA[

                                     import mx.controls.Alert;

                                      

                                     private function loadMovie(event:MouseEvent):void

                                     {

                                           

                                               Alert.show("This PopUp has a dark background")

                                     }

                                           

                                ]]>

                           </fx:Script>

                           <s:Rect height="38" width="150" x="290" y="290">

                                <s:stroke>

                                     <s:SolidColorStroke color="#000000" weight="2" />

                                </s:stroke>

                           </s:Rect>

                           <s:Label x="300" y="300" text="Click Here" click="loadMovie(event)" />

                      </s:Application>

                       

                       

                                                                    • END OF APPICATION  ****************************

                      Regards,

                      Doug

                      • 8. Re: Effects with the popup manager for my popups
                        nikos101 Level 2

                        when I use this skin I dont see any of my components inside the <s:SkinnablePopUpContainer , only the grey blurred overlay.

                         

                        however if I use the skin like this it works fine:

                        <?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">
                            <fx:Script>
                                <![CDATA[
                                    import views.skins.ts;
                                ]]>
                            </fx:Script>
                           
                            <fx:Declarations>
                                <s:SkinnablePopUpContainer id="myAlert" skinClass="views.skins.ts">
                                    <s:TitleWindow title="Launching World Domination...">
                                        <s:VGroup horizontalAlign="center" paddingTop="20" gap="20" width="100%">
                                            <s:Label text="Server connection failed. Sorry!"/>
                                            <s:Button label="OK" click="myAlert.close()"/>
                                        </s:VGroup>
                                    </s:TitleWindow>
                                </s:SkinnablePopUpContainer>
                            </fx:Declarations>
                           
                           
                            <s:Button label="Launch World Domination" click="myAlert.open(this, false)"/>
                           
                        </s:Application>

                         

                         

                         

                        Skin_____________________________________________________________________________________

                         

                        <?xml version="1.0" encoding="utf-8"?>
                        <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
                                xmlns:s="library://ns.adobe.com/flex/spark">
                            <fx:Script>
                                <![CDATA[
                                    import spark.effects.easing.Power;
                                ]]>
                            </fx:Script>
                           
                            <s:states>
                                <s:State name="closed"/>
                                <s:State name="normal"/>
                                <s:State name="disabled"/>
                                <s:State name="disabledAndClosed"/>
                            </s:states>
                           
                            <!-- background, it will cover the whole stage as the hostComponent is
                            initialized to cover the stage -->
                            <s:Rect id="bg" left="0" right="0" top="0" bottom="0"
                                    alpha.closed="0" alpha.normal="0.4">
                                <s:fill>
                                    <s:SolidColor color="0"/>
                                </s:fill>
                            </s:Rect>
                           
                            <!-- the chrome -->
                            <s:Group id="chromeGroup"
                                     width="80%"
                                     height="80%"
                                     horizontalCenter="0"
                                     verticalCenter="0"
                                    
                                     alpha="1"
                                     alpha.closed="0"
                                     >
                                <s:layout>
                                    <s:VerticalLayout gap="0" horizontalAlign="justify" />
                                </s:layout>
                               
                                <!--- @private -->
                                <s:Group id="topGroup">
                                   
                                    <!-- layer 0: title bar fill -->
                                    <s:Rect id="tbFill" left="0" right="0" top="0" bottom="1"/>
                                   
                                    <!-- layer 1: title bar highlight -->
                                    <s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0"/>
                                   
                                    <!-- layer 2: title bar divider -->
                                    <s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0"/>
                                   
                                    <!-- layer 3: text -->
                                    <s:Label id="titleDisplay" maxDisplayedLines="1" text="Select Action"
                                             left="9" right="3" top="1" bottom="0" minHeight="30"
                                             verticalAlign="middle" textAlign="start" fontWeight="bold">
                                    </s:Label>
                                </s:Group>
                               
                                <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
                                </s:Group>
                            </s:Group>
                            <s:transitions>
                                <s:Transition fromState="closed" toState="normal">
                                    <s:Sequence>
                                        <s:Parallel>
                                            <!-- fade in the panel -->
                                            <s:Fade target="{chromeGroup}" duration="150"/>
                                           
                                            <!-- scale in the panel -->
                                            <s:Scale target="{chromeGroup}" duration="200"
                                                     applyChangesPostLayout="true"
                                                     autoCenterTransform="true"
                                                     scaleXFrom="0.8" scaleXTo="1"
                                                     scaleYFrom="0.8" scaleYTo="1"
                                                     />
                                        </s:Parallel>
                                       
                                        <!-- gradually fade in the background -->
                                        <s:Fade target="{bg}" startDelay="250" duration="1500"
                                                easer="{new Power(0.2, 2)}"/>
                                    </s:Sequence>
                                </s:Transition>
                               
                                <s:Transition fromState="normal" toState="closed">
                                    <s:Parallel>
                                        <!-- fade out the panel -->
                                        <s:Fade target="{chromeGroup}" duration="150"/>
                                       
                                        <!-- scale out the panel -->
                                        <s:Scale target="{chromeGroup}" duration="200"
                                                 applyChangesPostLayout="true"
                                                 autoCenterTransform="true"
                                                 scaleXFrom="1" scaleXTo="0.8"
                                                 scaleYFrom="1" scaleYTo="0.8"
                                                 />
                                       
                                        <!-- fade out the background -->
                                        <s:Fade target="{bg}" duration="200"
                                                easer="{new Power(0.2, 2)}"/>
                                    </s:Parallel>
                                </s:Transition>
                            </s:transitions>
                           
                        </s:Skin>

                        • 9. Re: Effects with the popup manager for my popups
                          nikos101 Level 2

                          thanks shong, I used this and it works fine, only thing is the backgound is see through:

                           

                          <?xml version="1.0" encoding="utf-8"?>

                           

                          <!--

                           

                              ADOBE SYSTEMS INCORPORATED

                              Copyright 2008 Adobe Systems Incorporated

                              All Rights Reserved.

                             

                              NOTICE: Adobe permits you to use, modify, and distribute this file

                              in accordance with the terms of the license agreement accompanying it.

                           

                          -->

                           

                          <!--- The default skin class for a Spark SkinnablePopUpContainer container. 

                           

                              @see spark.components.SkinnablePopUpContainer

                             

                              @langversion 3.0

                              @playerversion Flash 10

                              @playerversion AIR 2.5

                              @productversion Flex 4.5

                          -->

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

                                  xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">

                             

                              <fx:Metadata>

                              <![CDATA[

                                  /**

                                   * @copy spark.skins.spark.ApplicationSkin#hostComponent

                                   */

                                  [HostComponent("spark.components.SkinnablePopUpContainer")]

                              ]]>

                              </fx:Metadata>

                             

                              <fx:Script fb:purpose="styling">

                                  <![CDATA[        

                                      /**

                                       *  @private

                                       */

                                      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void

                                      {

                                          // Push backgroundColor and backgroundAlpha directly.

                                          // Handle undefined backgroundColor by hiding the background object.

                                          if (isNaN(getStyle("backgroundColor")))

                                          {

                                              background.visible = false;

                                          }

                                          else

                                          {

                                              background.visible = true;

                                              bgFill.color = getStyle("backgroundColor");

                                              bgFill.alpha = getStyle("backgroundAlpha");

                                          }

                                         

                                          super.updateDisplayList(unscaledWidth, unscaledHeight);

                                      }

                                  ]]>       

                              </fx:Script>

                             

                              <s:states>

                                  <s:State name="normal"/>

                                  <s:State name="disabled"/>

                                  <s:State name="closed" stateGroups="closedGroup"/>

                                  <s:State name="disabledAndClosed" stateGroups="closedGroup"/>

                              </s:states>

                             

                              <!-- Transitions for open and close -->

                              <s:transitions>

                                  <s:Transition fromState="closed" toState="normal" autoReverse="true">

                                      <s:Fade duration="150" target="{chrome}"/>

                                  </s:Transition>

                           

                                  <s:Transition fromState="disabledAndClosed" toState="disabled" autoReverse="true">

                                      <s:Fade duration="150" target="{chrome}"/>

                                  </s:Transition>

                                 

                                  <s:Transition fromState="normal" toState="closed" autoReverse="true">

                                      <s:Fade duration="150" target="{chrome}"/>

                                  </s:Transition>

                           

                                  <s:Transition fromState="disabled" toState="disabledAndClosed" autoReverse="true">

                                      <s:Fade duration="150" target="{chrome}"/>

                                  </s:Transition>

                              </s:transitions>

                                 

                              <!--- Defines the background and content group used by this skin. -->

                              <s:Group id="chrome" left="0" right="0" top="0" bottom="0" visible.closedGroup="false">

                           

                                  <!--- Defines the appearance of the SkinnablePopUpContainer class's background. -->

                                  <s:Rect id="background" left="0" right="0" top="0" bottom="0">

                                      <s:fill>

                                          <!--- @private -->

                                          <s:SolidColor id="bgFill" color="#FFFFFF"/>

                                      </s:fill>

                                  </s:Rect>

                                 

                                  <!--

                                  Note: Setting the minimum size to 0 here so that changes to the host component's

                                  size will not be thwarted by this skin part's minimum size.   This is a compromise,

                                  more about it here: http://bugs.adobe.com/jira/browse/SDK-21143

                                  -->

                                  <!--- @copy spark.components.SkinnableContainer#contentGroup -->

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

                                      <s:layout>

                                          <s:BasicLayout/>

                                      </s:layout>

                                  </s:Group>

                              </s:Group>

                             

                          </s:Skin>