5 Replies Latest reply on Dec 14, 2010 9:17 AM by Shongrunden

    Animate the expansion of a group in a skin

    nikos101 Level 2

      I'm trying to animate the expansion of a group in a skin in the "over and down states" but am not sure how.

       

         <s:Group id="group" verticalCenter="0" horizontalCenter="0"  width="14" height="14" layoutDirection="ltr" width.overStates="18" height.overStates="18" width.downStates="18" height.downStates="18">

       

      I think I need to do something like thisbut am not sure how to do it in my case :

       

         <s:transitions> 
              <mx:Transition fromState="up" toState="over">
                  <mx:Parallel duration="350">
                      <s:Resize target="{ myImage }"/>
                      <s:Fade targets="{ [myImage,labelDisplay] }"/>
                  </mx:Parallel>
              </mx:Transition>
              <mx:Transition fromState="over" toState="up">
                  <mx:Parallel duration="200">
                      <s:Resize target="{ myImage }"/>
                      <s:Fade targets="{ [myImage,labelDisplay] }"/>
                  </mx:Parallel>
              </mx:Transition>
          </s:transitions>
        • 1. Re: Animate the expansion of a group in a skin
          nikos101 Level 2

          Looks like this is the way:

           

          Thing is I'm not sure what fromState and toState values to use so that the group expands when the mouse is over the component


              <s:transitions>
                  <s:Transition fromState="*" toState="*">
                      <s:Scale target="{group}" scaleXTo="1.2" scaleYTo="1.2" easer="{elasticEaser    }" />
                  </s:Transition>
                  <s:Transition fromState="*" toState="*">
                      <s:Scale target="{group}" scaleXTo="1" scaleYTo="1" easer="{elasticEaser}" />
                  </s:Transition>
              </s:transitions>
             

           

              <s:states>
                  <s:State name="up" />
                  <s:State name="over" stateGroups="overStates" />
                  <s:State name="down" stateGroups="downStates" />
                  <s:State name="disabled" stateGroups="disabledStates" />
                  <s:State name="upAndSelected" stateGroups="selectedStates" />
                  <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
                  <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
                  <s:State name="disabledAndSelected" stateGroups="disabledStates, selectedStates" />
              </s:states>

          • 2. Re: Animate the expansion of a group in a skin
            nikos101 Level 2

            found it

             

            <s:transitions>
                    <s:Transition fromState="*" toState="over">
                        <s:Scale target="{group}" scaleXTo="1.2" scaleYTo="1.2" easer="{elasticEaser    }" />
                    </s:Transition>
                    <s:Transition fromState="*" toState="overAndSelected">
                        <s:Scale target="{group}" scaleXTo="1.6" scaleYTo="1.6" easer="{elasticEaser    }" />
                    </s:Transition>
                    <s:Transition fromState="*" toState="up">
                        <s:Scale target="{group}" scaleXTo="1" scaleYTo="1" easer="{elasticEaser}" />
                    </s:Transition>
                    <s:Transition fromState="*" toState="upAndSelected">
                        <s:Scale target="{group}" scaleXTo="1" scaleYTo="1" easer="{elasticEaser}" />
                    </s:Transition>
                </s:transitions>

            • 3. Re: Animate the expansion of a group in a skin
              Shongrunden Adobe Employee

              You shouldn't specify scaleXTo/scaleYTo etc. on an effect in a Transition, but rather specify different state values for scaleX/scaleY and let the transition figure it out for itself.  See this thread for an example: http://forums.adobe.com/message/2793282.  Otherwise you might run into snapping issues.

              • 4. Re: Animate the expansion of a group in a skin
                nikos101 Level 2

                thanks,

                 

                im not sure what you mean by snapping issues

                • 5. Re: Animate the expansion of a group in a skin
                  Shongrunden Adobe Employee

                  Here's 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:transitions>

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

                              <s:Scale target="{btn}" scaleXTo="3" />

                          </s:Transition>

                      </s:transitions>

                   

                      <s:controlBarContent>

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

                      </s:controlBarContent>

                   

                      <s:Button id="btn" label="content" scaleX.state1="1" scaleX.state2="2" />

                   

                  </s:Application>

                   

                  When the transition is finished playing the state value will be applied to the Button. This bug fix that will be in Hero might make this snapping situation more commonly experienced when using side effecting values: http://bugs.adobe.com/jira/browse/SDK-28195