5 Replies Latest reply on Jul 5, 2010 2:07 AM by Matt Le Fevre

    Some help with transitions

    djh88ukwb Level 1

      Hello all,

       

      Im trying to get to grips with trandisitions.

       

      I have  a basic layout -

       

      <?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" width="828" height="532">
          <mx:DataGrid x="6" y="6" height="516">
              <mx:columns>
                  <mx:DataGridColumn headerText="Column 1" dataField="col1"/>
                  <mx:DataGridColumn headerText="Column 2" dataField="col2"/>
                  <mx:DataGridColumn headerText="Column 3" dataField="col3"/>
              </mx:columns>
          </mx:DataGrid>
          <s:BorderContainer x="316" y="6" width="232" height="516" id="tab1">
              <s:Button x="10" y="483" label="Button" click="tab2.visible=true"/>
          </s:BorderContainer>
          <s:BorderContainer x="562" y="6" width="232" height="516" id="tab2" visible="false">
          </s:BorderContainer>
         


      </s:Application>

       

      Where when you click the button in tab 1  tab 2 appears.  At the moment it jus pops up, the normal way flex does it.

       

      How easy is it to add some transitions and effects so that it fades in or something ?

       

      ANy help would be great !

        • 1. Re: Some help with transitions
          VRPDeveloper Level 3

          You need to define states and transitions and need to set PropertyAction of it... I am giving you an example ,you can do something like this in your application....

           

          <?xml version="1.0" ?>
          <!-- transitions\ActionTransitions.mxml -->
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
              verticalAlign="middle"
              layout="vertical">

              <!-- Define one view state, in addition to the base state.-->
              <mx:states>
                  <mx:State name="OneOnly">
                      <mx:SetProperty target="{p2}" name="visible" value="false"/>
                      <mx:SetProperty target="{p2}"
                          name="includeInLayout" value="false"/>
                  </mx:State>
              </mx:states>   

              <!-- Define Transition array with one Transition object.-->
              <mx:transitions>
                  <mx:Transition id="toOneOnly" fromState="*" toState="OneOnly">
                      <mx:Sequence id="t1" targets="{[p2]}">
                          <mx:Iris showTarget="false" duration="350"/>
                          <mx:SetPropertyAction name="visible"/>
                          <mx:SetPropertyAction target="{p2}" name="includeInLayout"/>
                      </mx:Sequence>
                  </mx:Transition>
             
                  <mx:Transition id="toAnyFromAny" fromState="*" toState="*">
                      <mx:Sequence id="t2" targets="{[p2]}">
                          <mx:SetPropertyAction target="{p2}" name="includeInLayout"/>
                          <mx:SetPropertyAction name="visible"/>
                          <mx:Iris showTarget="true" duration="350"/>
                      </mx:Sequence>
                  </mx:Transition>
              </mx:transitions>

              <mx:Panel id="p1" title="One"
                  width="100" height="100">
                  <mx:Label fontSize="24" text="One"/>
              </mx:Panel>
                 
              <mx:Panel id="p2" title="Two"
                  width="100" height="100">
                  <mx:Label fontSize="24" text="Two"/>
              </mx:Panel>
             
              <mx:Button id="b1" label="Change state"
                  click="currentState = currentState == 'OneOnly' ? '' : 'OneOnly';"/>
          </mx:Application>
          • 2. Re: Some help with transitions
            djh88ukwb Level 1

            Thank you for your answer.

             

            So there is not way to add custom effects without adding extra states?  I would rather not do this, i am building out a quite a large app with lots of different states for log in's as it is, i dont want to confuse things anymore.

             

            Does the fact im using Flash BUilder 4 change anything ?

             

            Does this allow for it in another way ?

            • 3. Re: Some help with transitions
              Matt Le Fevre Level 4

              there's a vastly easier way

               


              add a transition in your declarations, give it an id +  duration and link it to the showEffect or hideEffect of whatever  component you want,

               

               

              ta daa

               

               

              <?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" width="828" height="532">
                 
                  <fx:Declarations>
                      <!-- Place non-visual elements (e.g., services, value objects) here -->
                     
                      <s:Transition>
                          <mx:Fade id="fadeIn" duration="1000"/>
                      </s:Transition>

                  </fx:Declarations>
                 
                  <mx:DataGrid id="dg1" x="6" y="6" height="516" hideEffect="{fadeIn}">
                      <mx:columns>
                          <mx:DataGridColumn headerText="Column 1" dataField="col1"/>
                          <mx:DataGridColumn headerText="Column 2" dataField="col2"/>
                          <mx:DataGridColumn headerText="Column 3" dataField="col3"/>
                      </mx:columns>
                  </mx:DataGrid>
                 
                  <s:BorderContainer x="316" y="6" width="232" height="516" id="tab1">
                      <s:Button x="10" y="483" label="Button" click="tab2.visible = true; dg1.visible = false"/>
                  </s:BorderContainer>
                 
                  <s:BorderContainer x="562" y="6" width="232" height="516" id="tab2" showEffect="{fadeIn}" visible="false">
                  </s:BorderContainer>
              </s:Application>
              • 4. Re: Some help with transitions
                djh88ukwb Level 1

                Thank You

                 

                What other transitions are there ?

                • 5. Re: Some help with transitions
                  Matt Le Fevre Level 4

                  Wipe up/down/left/right, dissolve, move, rotate, resize, blur, glow etc....

                   

                   

                  there will be a list somewhere on google or the flex docs pages i imagine, those are just the ones i easily remember.