0 Replies Latest reply on Oct 19, 2011 6:48 AM by freeseiler

    Slide effect for rows in a grid

    freeseiler

      Hello,

       

      i just got a problem i am unable to solve yet. I wrote the following program:

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                      layout="absolute"
                      minWidth="955"
                      minHeight="600"
                      creationComplete="{this.cc()}">
          
          <mx:Script>
              <![CDATA[
                  import mx.core.UIComponent;
                  import mx.effects.Dissolve;
                  import mx.effects.Effect;
                  import mx.effects.Fade;
                  import mx.events.EffectEvent;
                  
                  private function buttonClicked():void {
                      var grandparent:UIComponent = this.label2.parent.parent as UIComponent;
                      
                      this.newValue = !grandparent.visible;
                      
                      grandparent.visible = this.newValue;
                      //grandparent.includeInLayout = this.newValue;
                      this.label2.visible = this.newValue;
                      //this.label2.includeInLayout = this.newValue;
                  }
                  
                  private var newValue:Boolean;
                  
                  private function onSwitchComponent(event:EffectEvent):void {
                      var effect:Effect = event.target as Effect;
                      var uiComp:UIComponent;
                      
                      if (effect != null)
                          uiComp = effect.target as UIComponent;
                      
                      // determine gridrow
                      while (uiComp != null && !(uiComp is GridRow)) {
                          uiComp = uiComp.parent as UIComponent;
                      }
                      
                      if (uiComp != null) {
                          uiComp.includeInLayout = this.newValue;
                      }
                  }
                  
                  private function cc():void {
                      var bf:BlurFilter = new BlurFilter(0, 0, 0);
                      var myFilters:Array = new Array();
                      myFilters.push(bf);
                      this.label2.filters = myFilters;
                      
                      this.fadeOut.addEventListener(EffectEvent.EFFECT_END, this.onSwitchComponent);
                      this.fadeIn.addEventListener(EffectEvent.EFFECT_START, this.onSwitchComponent);
                  }
                              
                  
              ]]>
          </mx:Script>
          
          <mx:Button click="buttonClicked()"
                     label="switch"
                     top="10"
                     left="10"/>
          
          <!--    <mx:Button click="buttonClicked2()"
          label="switch Label vis"
          top="10"
          left="150"/>-->
          
          <mx:Fade id="fadeOut"
                   duration="1000"
                   alphaFrom="1.0"
                   alphaTo="0.0"/>
          <mx:Fade id="fadeIn"
                   duration="1000"
                   alphaFrom="0.0"
                   alphaTo="1.0"/>
          
          <mx:Resize id="resize"
                     duration="1000"/>
          
          <mx:Grid top="40"
                   left="10"
                   borderThickness="1"
                   borderColor="#FFFFFF"
                   borderStyle="solid"
                   width="300"
                   height="300">
              <mx:GridRow >
                  <mx:GridItem>
                      <mx:Label id="label1"
                                text="label 1"/>
                  </mx:GridItem>
              </mx:GridRow>
              
              <mx:GridRow hideEffect="{this.fadeOut}"
                          showEffect="{this.fadeIn}">
                  <mx:GridItem>
                      <mx:Label id="label2"
                                text="label 2"
                                hideEffect="{this.fadeOut}"
                                showEffect="{this.fadeIn}"/>
                  </mx:GridItem>
              </mx:GridRow>
              
              <mx:GridRow>
                  <mx:GridItem>
                      <mx:Label id="label3"
                                text="label 3"/>
                  </mx:GridItem>
              </mx:GridRow>
          </mx:Grid>
          
      </mx:Application>
      

       

      This application uses SDK 3.6.

       

      As you can see, the second row will disappear as soon the button is clicked and become visible again on a second click. When the second row has disappeared the third row takes its position instantly but I want to implement an slide effect there.

      How can I do that? Can anyone give me an idea? thx.