2 Replies Latest reply on May 26, 2010 8:32 AM by sleblang

    [FB4] Transitions Issue in states

    sleblang Level 1

      I am using the following transitions between two states, 'normal' and 'add'. It works when moving from the 'normal' to 'add' state. However, when moving from 'add' to 'normal', the transition is not executed. The objects are simply removed.

       

      <?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>
                
                <s:Sine easeInFraction=".2" id="powerEasing" />
                
           </fx:Declarations>
           
           
           <fx:Script>
                <![CDATA[
                     import mx.controls.Alert;
                     import mx.effects.easing.*;
                     import mx.events.FlexEvent;
                     
      
                     protected function add_btn_clickHandler(event:MouseEvent):void
                     {
                          this.currentState = "add";
                     }
      
      
      
                     protected function cancel_btn_clickHandler(event:MouseEvent):void
                     {
                          this.currentState = "normal"
                     }
      
                ]]>
           </fx:Script>
      
           
           <s:states>
                <s:State name="normal"/>
                <s:State name="add"/>
           </s:states>
      
      
           <s:transitions>
                <s:Transition fromState="normal" toState="add">
                     <s:Parallel targets="{[theGroup]}"  >
                          <s:Wipe direction="down" duration="750" easer="{powerEasing}" />
                          <s:Fade  startDelay="750" duration="750"   />
                     </s:Parallel>                    
                </s:Transition>
      
                <s:Transition fromState="add" toState="normal" >
                     <s:Parallel targets="{[theGroup]}" >
                          <s:Fade duration="1000" />
                          <s:Wipe direction="up" duration="1000" easer="{powerEasing}"  />
                     </s:Parallel>                    
                </s:Transition>          
           </s:transitions>
           
           <s:Group id="theGroup" >
           
           <s:Rect id="theRect" includeIn="add" width="865" height="151" y="266" radiusX="2" radiusY="2" left="45">
                     <s:filters>
                          <s:DropShadowFilter color="0x000000" alpha="0.6" distance="10" blurX="5" blurY="5" angle="45" />
                     </s:filters>
                     <s:fill >
                          <s:SolidColor color="#336699">
                          </s:SolidColor>
                     </s:fill>
                     <s:stroke >
                          <s:SolidColorStroke color="#999999" weight="1">               
                          </s:SolidColorStroke>
                     </s:stroke>
                </s:Rect>
                <s:Button includeIn="add" x="830" y="390" label="Cancel" id="cancel_btn" click="cancel_btn_clickHandler(event)"/>
                <s:Button includeIn="add" x="752" y="390" label="Save " id="save_btn"/>
                <s:TextInput x="176" y="311" width="552" height="18" includeIn="add"/>
                <s:Label id="wDriveLocation_lbl" x="60" y="317" text="W Drive Location:" fontWeight="bold" includeIn="add"/>
                
           </s:Group>
      
           <s:Button x="824" y="205" label="Add Project" id="add_btn" enabled.add="false" click.normal="add_btn_clickHandler(event)" y.add="200" y.normal="200"/>
      
      
           </s:Application>
      
        • 1. Re: [FB4] Transitions Issue in states
          David_F57 Level 5

          hi,

           

          Your problem is how you did the transition on the group, the group needs to be the control so it exists in one state but not the other, whats in the group doesn't matter. I adjusted your code a little so that your transitions now work.

           

          David.

           

          <?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>

          <s:Sine easeInFraction=".2" id="powerEasing" />

          </fx:Declarations>

           

          <fx:Script>

          <![CDATA[

          import mx.controls.Alert;

          import mx.effects.easing.*;

          import mx.events.FlexEvent;

           

          protected function add_btn_clickHandler(event:MouseEvent):void

          {

          this.currentState = "add";

          }

           

          protected function cancel_btn_clickHandler(event:MouseEvent):void

          {

          this.currentState = "normal"

          }

          ]]>

          </fx:Script>

           

          <s:states>

          <s:State name="normal"/>

          <s:State name="add"/>

          </s:states>

           

          <s:transitions>

          <s:Transition fromState="normal" toState="add">

          <s:Parallel target="{theGroup}" duration="750"  >

          <s:Wipe direction="down" easer="{powerEasing}" />

          <s:Fade startDelay="250"/>

          </s:Parallel>                   

          </s:Transition>

           

          <s:Transition fromState="add" toState="normal" >

          <s:Parallel target="{theGroup}" duration="750">

          <s:Wipe direction="up" easer="{powerEasing}"  />

          <s:Fade startDelay="250" />

          </s:Parallel>                   

          </s:Transition>         

          </s:transitions>

           

          <s:Button label="Add Project" id="add_btn" click="add_btn_clickHandler(event)" y="9" x="6" enabled.add="false"/>

           

          <s:Group id="theGroup" width="865" height="151" y="53" includeIn="add" x="32">

          <s:Rect id="theRect" top="0" left="0" bottom="0" right="0" radiusX="2" radiusY="2">

          <s:filters>

          <s:DropShadowFilter color="0x000000" alpha="0.6" distance="10" blurX="5" blurY="5" angle="45" />

          </s:filters>

          <s:fill >

          <s:SolidColor color="#336699">

          </s:SolidColor>

          </s:fill>

          <s:stroke >

          <s:SolidColorStroke color="#999999" weight="1">              

          </s:SolidColorStroke>

          </s:stroke>

          </s:Rect>

          <s:TextInput x="176" y="50" width="552" height="18" />

          <s:Label id="wDriveLocation_lbl" x="60" y="52" text="W Drive Location:" fontWeight="bold" />

          <s:Button x="711" y="120" label="Save " id="save_btn"/>

          <s:Button x="789" y="120" label="Cancel" id="cancel_btn" click="cancel_btn_clickHandler(event)"/>

          </s:Group>

          </s:Application>