1 Reply Latest reply on Jul 29, 2010 6:26 PM by Shongrunden

    Sequencing State Transitions

    docwisdom

      I am trying to use a resize transition in between states and am having some problem with the sequencing.

      Basically I have a titlewindow with different heights for different states. I have the resize working just fine, and I sequenced a fade just after the resize for the new content that is in the larger window. Unfortunately what happens is when you change states, it immediately shows the new bordercontainer before the resize effect finishes, then it fades. It seems like I am missing some property somewhere that makes it invisible prior to the fade completing.

       

      Thanks!

       

      <s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"

         xmlns:s="library://ns.adobe.com/flex/spark"

         xmlns:mx="library://ns.adobe.com/flex/mx"

         xmlns:popup="com.adobe.cairngorm.popup.*"

         title="Edit Ticket" y="10" width="800" height="500" close="dispatchEvent(new Event(Event.CLOSE))" textAlign="left" height.logTime="800" height.logMaterials="800">

      <s:layout>

      <s:VerticalLayout  horizontalAlign="center"/>

      </s:layout>

       

      <s:transitions>

      <s:Transition fromState="*" toState="*">

      <s:Parallel>

      <s:Sequence>

      <s:Resize target="{this}" duration="1000" />

      <s:Fade target="{logInfo}" duration="500" />

      </s:Sequence>

      </s:Parallel>

      </s:Transition>

      </s:transitions>

       

      ~~~~my State1 content here~~~~~~

       

      <s:BorderContainer borderVisible="false" includeIn="logTime" x="0" y="407" id="logInfo" height="318">

      ~~~~my logTime state content here~~~~~~

      </s:BorderContainer>

      </s:TitleWindow>

       

        • 1. Re: Sequencing State Transitions
          Shongrunden Adobe Employee

          You're probably going to want to use the AddAction/RemoveAction tags to tell the effects system when in the sequence a component should be added or removed.

           

          Here is an example:

           

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                         xmlns:s="library://ns.adobe.com/flex/spark">

           

              <s:states>

                  <s:State name="state1" />

                  <s:State name="state2" />

              </s:states>

           

              <s:controlBarContent>

                  <s:Button label="change state" click="currentState=currentState=='state1'?'state2':'state1'" />

              </s:controlBarContent>

           

              <s:transitions>

                  <s:Transition fromState="state1" toState="state2">

                      <s:Parallel>

                          <s:Sequence>

                              <s:Resize target="{parentGroup}" duration="1000" />

                              <s:RemoveAction target="{compInState1}" />

                              <s:AddAction target="{compInState2}" />

                              <s:Fade target="{compInState2}" duration="500" />

                          </s:Sequence>

                      </s:Parallel>

                  </s:Transition>

           

                  <s:Transition fromState="state2" toState="state1">

                      <s:Parallel>

                          <s:Sequence>

                              <s:Fade target="{compInState2}" duration="500" />

                              <s:RemoveAction target="{compInState2}" />

                              <s:AddAction target="{compInState1}" />

                              <s:Resize target="{parentGroup}" duration="1000" />

                          </s:Sequence>

                      </s:Parallel>

                  </s:Transition>

              </s:transitions>

           

              <s:Group id="parentGroup" height.state1="200" height.state2="300" width="150">

           

                  <s:Rect width="100%" height="100%">

                      <s:fill>

                          <s:SolidColor color="red" />

                      </s:fill>

                  </s:Rect>

           

                  <s:Button id="compInState1" label="state1" includeIn="state1" />

                  <s:BorderContainer id="compInState2" includeIn="state2" />

           

              </s:Group>

           

          </s:Application>

           

           

           

          http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/effects/AddAction .html?allClasses=1

           

          http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/effects/RemoveAct ion.html?allClasses=1