3 Replies Latest reply on Feb 11, 2011 2:25 AM by mbskels

    Transitions between States

    mbskels

      Struggling to learn FB4 transitions. Code for simplified example below.

       

      Text boxes are intended to fade out and move off screen to be replaced with new text box that fades in and moves onto screen.

       

      Screen 1 to 2 is ok but after completing transition from screen2 to screen1 the textbox1 disappears.

       

      I assume it is related to AddAction/RemoveAction placement but I have tried all combinations without success.

       

      Could someone point out where I have gone wrong.

       

      Thanks

      mb

       

       

       

      <?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>
               <!-- Place non-visual elements (e.g., services, value objects) here -->
              
           </fx:Declarations>
           <s:states>
               <s:State name="screen1"/>
               <s:State name="screen2"/>
           </s:states>
           <s:transitions>
               <s:Transition fromState="screen1" toState="screen2">
                   <s:Sequence duration="1000" targets="{[screen1_text,screen2_text]}">
                       <s:Parallel target="{screen1_text}" >
                           <s:Fade alphaFrom="1.0" alphaTo="0.0"/>
                           <s:Move xFrom="200" xTo="-500"/>
                       </s:Parallel>
                       <s:RemoveAction target="{screen1_text}"/>
                       <s:AddAction target="{screen2_text}"/>
                       <s:Parallel target="{screen2_text}" >
                           <s:Fade alphaFrom="0.0" alphaTo="1.0"/>
                           <s:Move xFrom="-500" xTo="200"/>
                       </s:Parallel>
                   </s:Sequence>
               </s:Transition>
               <s:Transition fromState="screen2" toState="screen1">
                   <s:Sequence duration="1000" targets="{[screen1_text,screen2_text]}">
                       <s:Parallel target="{screen2_text}" >
                           <s:Fade alphaFrom="1.0" alphaTo="0.0"/>
                           <s:Move xFrom="200" xTo="-500"/>
                       </s:Parallel>
                       <s:RemoveAction target="{screen2_text}"/>
                       <s:AddAction target="{screen1_text}"/>
                       <s:Parallel target="{screen1_text}" >
                           <s:Fade alphaFrom="0.0" alphaTo="1.0"/>
                           <s:Move xFrom="-500" xTo="200"/>
                       </s:Parallel>
                   </s:Sequence>
               </s:Transition>
           </s:transitions>
          
           <s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    xmlns:mx="library://ns.adobe.com/flex/mx"
                    width="100%" height="100%" cornerRadius="5"
                    backgroundColor="#B6B8E8"
                    title="Transition between States Example"
                    includeIn="screen1, screen2">
              
               <s:layout>
                   <s:BasicLayout/>
               </s:layout>
              
               <s:BorderContainer id="screen1_text" includeIn="screen1" width="400" height="220" x="200" y="10">
                   <s:layout>
                       <s:BasicLayout/>
                   </s:layout>
                   <s:TextArea width="95%" height="95%" >
                       <s:textFlow>
                           <s:TextFlow>
                               <s:p>
                                   Text for screen 1
                               </s:p>
                           </s:TextFlow>
                       </s:textFlow>
                   </s:TextArea>
               </s:BorderContainer>
               <s:BorderContainer id="screen2_text" includeIn="screen2" width="400" height="300" x="200" y="10">
                   <s:layout>
                       <s:BasicLayout/>
                   </s:layout>
                   <s:TextArea width="95%" height="95%" >
                       <s:textFlow>
                           <s:TextFlow>
                               <s:p>
                                   Text for screen 2
                               </s:p>
                           </s:TextFlow>
                       </s:textFlow>
                   </s:TextArea>
               </s:BorderContainer>
               <s:Button includeIn="screen1, screen2" x="200" y="382" label="Screen 1" click="{currentState='screen1'}"/>
               <s:Button includeIn="screen1, screen2" x="530" y="382" label="Screen 2" click="{currentState='screen2'}"/>
           </s:Panel>   
      </s:Application>