7 Replies Latest reply on Oct 19, 2009 7:37 PM by mewk

    Slide Container Up On State Change?

    saveth

      I have two containers. On state change I want the top container to disappear and the bottom container to slide up into the top containers previous position.

       

      I've been able to get a Fade out of the top container to work and then the bottom container snaps into position but I want a smooth transitions upward.

       

      Any help on how to accomplish this would be appreciated.

       

      Thanks,

      Brian

        • 1. Re: Slide Container Up On State Change?
          mewk Level 3

          Hi-ya saveth,

           

          What you are interested in is transitions and effects and you can begin reading more about them here.

           

          In the meantime here is some code to chew on.

           

          B.O.L.,

           

          - e

           

           

          <?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/halo"
              currentState="State1">
          
              <fx:Script>
                 <![CDATA[
                     protected function clickHandler():void
                     {
                        if (currentState == "State1") {
                          currentState="State2";
                        } else {
                          currentState="State1";
                        }
                     }
                 ]]>
             </fx:Script>
          
             <s:states>
                <s:State name="State2"/>
                <s:State name="State1"/>
             </s:states>
          
             <s:transitions>
                <s:Transition id="myTransition" fromState="*" toState="*">
                   <s:Parallel id="t1" targets="{[box1, box2]}">
                      <s:Move duration="400"/>
                      <s:Fade duration="400" />
                   </s:Parallel>
                </s:Transition>
             </s:transitions>
          
             <s:Group id="box1" x="100" y="50" width="200" height="200" includeIn="State1"
                      click="clickHandler()">
               <s:Rect width="100%" height="100%">
                 <s:fill>
                   <s:SolidColor color="red" />
                 </s:fill>
               </s:Rect>
               <s:Label text="drink me" verticalCenter="0" horizontalCenter="0" />
            </s:Group>
            <s:Group id="box2" x="100" y.State1="300" y.State2="50" width="200" height="200"
                     click="clickHandler()">
                <s:Rect width="100%" height="100%">
                   <s:fill>
                      <s:SolidColor color="blue" />
                   </s:fill>
                </s:Rect>
                <s:Label text="eat me" verticalCenter="0" horizontalCenter="0" />
             </s:Group>
          </s:Application>
          
          • 2. Re: Slide Container Up On State Change?
            saveth Level 1

            Thanks mewk!

             

            I had been able to get the fade to work on my previous tries but the move never worked. I see now from your example on how it does it.

             

            Thanks again,

            Brian

            • 3. Re: Slide Container Up On State Change?
              saveth Level 1

              Ok, I spoke too soon. Here is my situation where this doesn't work for some reason. If you remove the outer most Container then it works. Any ideas?

               

               

              <?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/halo" minWidth="1024" minHeight="768" currentState="State1">
                   <fx:Declarations>
                        <!-- Place non-visual elements (e.g., services, value objects) here -->
                   </fx:Declarations>
                   
                   <fx:Script>
                        <![CDATA[
                             protected function clickHandler():void
                             {
                                  if (currentState == "State1") {
                                       currentState="State2";
                                  } else {
                                       currentState="State1";
                                  }
                             }
                        ]]>
                   </fx:Script>
                   
                   <s:states>
                        <s:State name="State2" />
                        <s:State name="State1" />
                   </s:states>
                   
                   <s:transitions>
                        <s:Transition id="myTransition" fromState="*" toState="*">
                             <s:Parallel id="t1" targets="{[box1, box2]}">
                                  <s:Move duration="400" />
                                  <s:Fade duration="400" />
                             </s:Parallel>
                        </s:Transition>
                   </s:transitions>
                   
                   <s:SkinnableContainer>
                        <s:layout>
                             <s:VerticalLayout gap="40" />
                        </s:layout>
                        <s:SkinnableContainer id="box1" x="100" y="50" width="200" height="200" includeIn="State1" click="clickHandler()">
                             <s:Rect width="100%" height="100%">
                                  <s:fill>
                                       <s:SolidColor color="red" />
                                  </s:fill>
                             </s:Rect>
                        </s:SkinnableContainer>
                        <s:SkinnableContainer id="box2" x="100" y.State1="300" y.State2="50" width="200" height="200" click="clickHandler()">
                             <s:Rect width="100%" height="100%">
                                  <s:fill>
                                       <s:SolidColor color="blue" />
                                  </s:fill>
                             </s:Rect>
                        </s:SkinnableContainer>
                   </s:SkinnableContainer>
              </s:Application>
              
              • 4. Re: Slide Container Up On State Change?
                mewk Level 3

                i think the problem here is that you are using a vertical layout and vertical layouts don't respect the y properties. i'll go play around a bit and see if there's something else missing. thanks,

                 

                - e

                1 person found this helpful
                • 5. Re: Slide Container Up On State Change?
                  saveth Level 1

                  You're correct. I removed the vertical layout and everything is sound as a pound. Seems a little clunky to have it work like this. I like to use automatic spacing when I can but I can work with it.

                   

                  Thanks mewk,

                  Brian

                  • 6. Re: Slide Container Up On State Change?
                    mewk Level 3

                    Well, you can use the vertical layout; you'll just have to adjust your strategy.

                     

                    The vertical layouts will shrink once you remove a visual object so you can use the <s:Resize duration="400" /> effect in your transition. The only problem is that box2 can't (???) move up until box1 has been completely removed. So one option might be to fade out box1 and then resize/move box2 in as a sequence.

                     

                    - e

                    • 7. Re: Slide Container Up On State Change?
                      mewk Level 3

                      Sorry no luck animating the y-property with the vertical layout constraint. Also the box doesn't move with the Resize effect on the main container and I don't see how one could stuff any frames into the discontinuity (that's as best as I can describe it! )

                       

                      Like I said, we can try for other strategies, and, another way might be to fade the alpha of box1 and then shrink it's height to zero. This almost works BUT you have to contend with the vertical gap, which introduces a whole new level of trouble. First the mainBox.layout is not bindable, which means that you can shrink the gap but the container won't be aware of the changes, so there will be a lurch during the transition. Secondly, there appears to be a bug.

                       

                      @ adobe employees (or whoever!) will you please take a look at the files (see TransitionsEffectsBug.fxp in the zip). It seems like you cannot transition and animate in parallel on the same object. What gives??

                       

                      Anyway, back @saveth, my recommendation is to be cautious of transitions while under layout constraints.

                       

                      That's all folks,

                       

                      - e