5 Replies Latest reply on Jul 10, 2010 12:55 PM by Shongrunden

    Frustrated Animation issue

    jerry98225

      Hi guys..

         I have spent 2 hours on this simple state to state transition with simply resize and move animation.... I can get the element to move and fade...but there is no resize animation at all. The panel element stay the same width whole time. If I copy the code to a brand new test mxml file, it works, but not in my main application file...I was wondering if someone here can help me out. Thanks a lot.

       

      //This is a custom component inside the main application...Not sure if it relates to my issue.....

       

       

      <mx:Canvas 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="1000" height="600" xmlns:getcomplist="services.getcomplist.*" xmlns:components="components.*"

      currentState="defaultState">

       

      <fx:Script>

      <![CDATA[

       

         protected function compList_changeHandler(event:IndexChangeEvent):void

         {

             currentState="whenClick";

         }

       

      ]]>

      </fx:Script>

       

      <mx:states>

      <s:State name="defaultState"/>

      <s:State name="whenClick" />

      </mx:states>

       

      <mx:transitions>

      <s:Transition toState="whenClick">

       

      <s:Parallel target="{animationIsAnnoying}">

      <!--<s:Fade duration="1000"/>-->    // Fade is working fine...

      <s:Resize heightFrom="600" duration="5000" />  //resize is not working

      <s:Move xFrom="500" duration="5000" />  //Move is working fine

      </s:Parallel>

       

      </s:Transition>

      </mx:transitions>

       

       

      <s:HGroup>

       

      <s:List id="compList"

      width="280"

      height="500"

      change="compList_changeHandler(event)">

      </s:List>

       

       

      <s:Panel id="animationIsAnnoying" height="150" includeIn="whenClick" /> //The panel I want to animated...

       

       

      <components:compDisplayDetail includeIn="whenClick" id="compDisplay" width="600" height="500" userPic="{userPicResult.lastResult}" dataFromClick ="{compDetailinfoResult.lastResult}" />

       

      </s:HGroup>

       

       

      </mx:Canvas>

        • 1. Re: Frustrated Animation issue
          saisri2k2 Level 4

          remove it from the HGroup - this does not allow you to move the component by X/Y coords. Please look at the following working code

           

          <mx:Canvas 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="1000" height="600" xmlns:getcomplist="services.getcomplist.*" xmlns:components="components.*"
                       currentState="defaultState">
               
               <fx:Script>
                    <![CDATA[
                         import spark.events.IndexChangeEvent;
                         
                         protected function compList_changeHandler(event:IndexChangeEvent):void
                         {
                              currentState="whenClick";
                         }
                         
                    ]]>
               </fx:Script>
               
               <mx:states>
                    <s:State name="defaultState"/>
                    <s:State name="whenClick" />
               </mx:states>
               
               <mx:transitions>
                    <s:Transition toState="whenClick">
                         
                         <s:Parallel target="{animationIsAnnoying}">
                              <!--<s:Fade duration="1000"/>-->    
                              <s:Resize heightFrom="600" duration="5000" />  
                              <s:Move xFrom="500" duration="5000" /> 
                         </s:Parallel>
                         
                    </s:Transition>
               </mx:transitions>
               
               
               
                    
                    <s:List id="compList"
                              width="280"
                              height="500"
                              change="compList_changeHandler(event)">
                         <s:dataProvider>
                              <s:ArrayCollection>
                                   <fx:String>Hi</fx:String>
                                   <fx:String>Hello</fx:String>
                              </s:ArrayCollection>
                         </s:dataProvider>
                    </s:List>
                    
                    
                    <s:Panel id="animationIsAnnoying" height="150" width="200" includeIn="whenClick" />
                    
                    <!--<mx:Button click="compList_changeHandler(event)" label="click"/>-->
                    
                    
               
               
               
          </mx:Canvas>
          

          1 person found this helpful
          • 2. Re: Frustrated Animation issue
            jerry98225 Level 1

            Thanks saisri2k2

             

            I do need the HGroup for my layout. I thought we can use "[property]From" (ex: xFrom or widthFrom but not xTo or yTo) to achieve the effect since the final property value is known (from the VGroup or HGroup). If we can't use Move or any other effect that might change X or Y, then there is no point to use VGroup or HGroup because you can't apply too many effects on them and that doesn't make sense to me...For this case, I even create a brand new mxml and try the transition effect. It all mess up...I dont know if it's my Flex or Firefox issue..There are lots of fault language involved when I work on it.........Have you guys ever encounter effect problem especially doing the state transition?

            • 3. Re: Frustrated Animation issue
              David_F57 Level 5

              hi,

               

              There are a few things to consider with state transitions -

               

                   when you have layout constraints the transition may be affected

                   state transitions are clever if you layout how you want each state to look the transition works out what it needs to do

                   s:move really hates layout so in the case where you have a layout constraint use mx:move or posttransformlayout(i think cheating with mx:move is the easier option)

                   generally mixing and matching between mx and spark is not good practise, behaviour between the two is similarbut  not necessarily the same.

               

              this is a simple transition based on components with layout constraints - becuase 1 component in a layout group(panel) has to 'move' its wrapped in a standard group which allows individual control

               

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

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

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

                 currentState="defaultState">

               

              <s:states>

              <s:State name="defaultState"/>

              <s:State name="whenClick" />

              </s:states>

               

              <s:transitions>

              <s:Transition toState="whenClick">

              <s:Parallel target="{animationIsAnnoying}" duration="3000">

              <s:Resize/> 

              <mx:Move/> 

              </s:Parallel>

              </s:Transition>

              <s:Transition toState="defaultState">

              <s:Parallel target="{animationIsAnnoying}" duration='3000'>

              <s:Resize/> 

              <mx:Move/> 

              </s:Parallel>

              </s:Transition>

              </s:transitions>

               

               

              <s:HGroup>

              <s:List id="compList"

              width="280"

              height="500" click="currentState='whenClick'">

              </s:List>

              <s:Group height="500">

              <s:Panel id="animationIsAnnoying" width.whenClick="488" click.whenClick="currentState='defaultState'" verticalCenter.defaultState="0" top.whenClick="0"

              height.defaultState="150" bottom.whenClick="0" click="currentState='defaultState'"/>

              </s:Group>

              </s:HGroup>

              </s:Group>

              • 4. Re: Frustrated Animation issue
                jerry98225 Level 1

                Thank you David...Very helpful tip....

                • 5. Re: Frustrated Animation issue
                  Shongrunden Adobe Employee

                  You might want to look into setting applyChangesPostLayout=true on a spark effect so that the effect is not restricted by the layout of the parent container.  You will probably want to understand what post layout transform offsets are: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/core/IVisualElement. html#postLayoutTransformOffsets

                   

                  Another workaround without using postLayoutTransformOffsets would be to wrap another Group around the target.  See this thread for an explanation and example: http://forums.adobe.com/message/2908803