6 Replies Latest reply on Jul 28, 2010 6:08 AM by hidarikani

    Fade away when removed from container?

    hidarikani Level 2

      I want my s:Button to fade away when it's removed from s:Group using removeElementAt() method.

      How can I do this?

        • 1. Re: Fade away when removed from container?
          hidarikani Level 2

          I can set visible to false which will fire the hide event. Then I can use the hide event to play the s:Fade effect.

          But how do I know the effect finished playing before I can call the removeElementAt() method to remove the button?

          This really confuses me :/

          • 2. Re: Fade away when removed from container?
            BhaskerChari Level 4

            Hi Hidarikani,

             

            Try something like removedEffect="Fade" for the button..

             

             

            Thanks,

            Bhasker Chari

            1 person found this helpful
            • 3. Re: Fade away when removed from container?
              hidarikani Level 2

              Yay, this works:

               

                   <fx:Style>
                        @namespace s "library://ns.adobe.com/flex/spark";
                        @namespace mx "library://ns.adobe.com/flex/mx";
                        s|Button {
                             addedEffect: Fade;
                             removedEffect: Fade;
                        }
                   </fx:Style>
              

               

              Is there a way to modify the Fade properties within CSS?

               

              Or I could control the properties like this:

               

              var effect:Fade = new Fade();
              effect.alphaFrom = 0;
              effect.alphaTo = 1;
              effect.duration = 1000;
              myButton.setStyle('addedEffect', effect)
              

               

              Does every button need a new Fade instance or all buttons can share one instance?

              • 4. Re: Fade away when removed from container?
                BhaskerChari Level 4

                Hi  hidarikani,

                 

                I don't think there is any way to modify the Fade properties within CSS

                 

                Declare the Fade instance globally say in main application(mxml) file and try to access it where ever you need...

                 

                You can also decalre this in ModelLocator class or as a static instance and can share only this single instance throughout...

                 

                 

                If this post answers your question or helps, please kindly mark it as such.


                Thanks,

                Bhasker Chari

                • 5. Re: Fade away when removed from container?
                  hidarikani Level 2

                  This is a sample app:

                  <?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:Style>
                            @namespace s "library://ns.adobe.com/flex/spark";
                            @namespace mx "library://ns.adobe.com/flex/mx";
                            s|Button {
                                 addedEffect: Fade;
                                 removedEffect: Fade;
                            }
                       </fx:Style>
                       <s:layout>
                            <s:VerticalLayout />
                       </s:layout>
                       <s:Button label="Remove one" click="group.removeElementAt(0)" />
                       <s:Button label="Remove All" click="group.removeAllElements()" />
                       <s:Group id="group">
                            <s:layout>
                                 <s:VerticalLayout />
                            </s:layout>          
                            <s:Button label="b1"/>
                            <s:Button label="b2"/>
                            <s:Button label="b3"/>
                       </s:Group>
                  </s:Application>
                  

                  When I click 'Remove one' the first button fades away.

                  When I click 'Remove all' i get an Exception:

                  RangeError: Index 2 is out of range.
                       at spark.components::Group/checkForRangeError()[E:\dev\4.0.0\frameworks\projects\spark\src\spark\components\Group.as:1106]
                       at spark.components::Group/addElementAt()[E:\dev\4.0.0\frameworks\projects\spark\src\spark\components\Group.as:1158]
                       at mx.effects::EffectManager$/removedEffectHandler()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\effects\EffectManager.as:799]
                       at Function/http://adobe.com/AS3/2006/builtin::apply()
                       at mx.core::UIComponent/callLaterDispatcher2()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\UIComponent.as:11354]
                       at mx.core::UIComponent/callLaterDispatcher()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\UIComponent.as:11292]
                  

                  Any ideas?

                  If this post answers your question or helps, please kindly mark it as such.

                  I will when this discussion is over.

                  • 6. Re: Fade away when removed from container?
                    hidarikani Level 2

                    I've replaced removeAllElements() with a while loop and it works

                     

                                   public function workaround():void {
                                        while (0 < group.numChildren) 
                                             group.removeElementAt(0);
                                   }
                    

                     

                    Looks like I found a bug in removeAllElements() method?