1 Reply Latest reply on Dec 5, 2009 10:14 PM by Gregory Lafrance

    Question on animating change in button skins with states.

    Gregory Lafrance Level 6

      I have the following component that has buttons.

       

      The buttons change size using skins using states.

       

      I'd like to use some kind of effect so the skin changes look more fluid.

       

      I believe there is no way to animate the actual change from the "small" skin to the "medium" skin, but how might I animate the button shrinking, then the skin changes while the button is invisible (because its width and height is 0), then animate growing with the new skin applied?

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%"
        paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5">
        <mx:Script>
          <![CDATA[
            import mx.controls.Alert;
            include "TitleBarAssets.as";
          ]]>
        </mx:Script>
          <mx:states>
            <mx:State name="video">
              <mx:SetStyle target="{videoBtn}" name="upSkin" value="{videoBtnUpMediumSkin}"/>
              <mx:SetStyle target="{videoBtn}" name="overSkin" value="{videoBtnOverMediumSkin}"/>
              <mx:SetStyle target="{videoBtn}" name="downSkin" value="{videoBtnDownMediumSkin}"/>
              <mx:SetStyle target="{videoBtn}" name="disabledSkin" value="{videoBtnDisabledMediumSkin}"/>
              <mx:SetStyle target="{homeBtn}" name="upSkin" value="{homeBtnUpSmallSkin}"/>
              <mx:SetStyle target="{homeBtn}" name="overSkin" value="{homeBtnOverSmallSkin}"/>
              <mx:SetStyle target="{homeBtn}" name="downSkin" value="{homeBtnDownSmallSkin}"/>
              <mx:SetStyle target="{homeBtn}" name="disabledSkin" value="{homeBtnDisabledSmallSkin}"/>
            </mx:State>
            <mx:State name="audio">
              <mx:SetStyle target="{audioBtn}" name="upSkin" value="{audioBtnUpMediumSkin}"/>
              <mx:SetStyle target="{audioBtn}" name="overSkin" value="{audioBtnOverMediumSkin}"/>
              <mx:SetStyle target="{audioBtn}" name="downSkin" value="{audioBtnDownMediumSkin}"/>
              <mx:SetStyle target="{audioBtn}" name="disabledSkin" value="{audioBtnDisabledMediumSkin}"/>
              <mx:SetStyle target="{homeBtn}" name="upSkin" value="{homeBtnUpSmallSkin}"/>
              <mx:SetStyle target="{homeBtn}" name="overSkin" value="{homeBtnOverSmallSkin}"/>
              <mx:SetStyle target="{homeBtn}" name="downSkin" value="{homeBtnDownSmallSkin}"/>
              <mx:SetStyle target="{homeBtn}" name="disabledSkin" value="{homeBtnDisabledSmallSkin}"/>
            </mx:State>
            <mx:State name="images">
              <mx:SetStyle target="{imagesBtn}" name="upSkin" value="{imagesBtnUpMediumSkin}"/>
              <mx:SetStyle target="{imagesBtn}" name="overSkin" value="{imagesBtnOverMediumSkin}"/>
              <mx:SetStyle target="{imagesBtn}" name="downSkin" value="{imagesBtnDownMediumSkin}"/>
              <mx:SetStyle target="{imagesBtn}" name="disabledSkin" value="{imagesBtnDisabledMediumSkin}"/>
              <mx:SetStyle target="{homeBtn}" name="upSkin" value="{homeBtnUpSmallSkin}"/>
              <mx:SetStyle target="{homeBtn}" name="overSkin" value="{homeBtnOverSmallSkin}"/>
              <mx:SetStyle target="{homeBtn}" name="downSkin" value="{homeBtnDownSmallSkin}"/>
              <mx:SetStyle target="{homeBtn}" name="disabledSkin" value="{homeBtnDisabledSmallSkin}"/>
            </mx:State>
            <mx:State name="docs">
              <mx:SetStyle target="{docsBtn}" name="upSkin" value="{docsBtnUpMediumSkin}"/>
              <mx:SetStyle target="{docsBtn}" name="overSkin" value="{docsBtnOverMediumSkin}"/>
              <mx:SetStyle target="{docsBtn}" name="downSkin" value="{docsBtnDownMediumSkin}"/>
              <mx:SetStyle target="{docsBtn}" name="disabledSkin" value="{docsBtnDisabledMediumSkin}"/>
              <mx:SetStyle target="{homeBtn}" name="upSkin" value="{homeBtnUpSmallSkin}"/>
              <mx:SetStyle target="{homeBtn}" name="overSkin" value="{homeBtnOverSmallSkin}"/>
              <mx:SetStyle target="{homeBtn}" name="downSkin" value="{homeBtnDownSmallSkin}"/>
              <mx:SetStyle target="{homeBtn}" name="disabledSkin" value="{homeBtnDisabledSmallSkin}"/>
            </mx:State>
          </mx:states>
        <mx:HBox id="navBtnHB" paddingLeft="0" paddingBottom="0"
          paddingRight="0" paddingTop="0">
          <mx:Button id="videoBtn" upSkin="{videoBtnUpSmallSkin}" overSkin="{videoBtnOverSmallSkin}"
            downSkin="{videoBtnDownSmallSkin}" disabledSkin="{videoBtnDisabledSmallSkin}"
            focusThickness="0" click="currentState='video'"/>
          <mx:Button id="audioBtn" upSkin="{audioBtnUpSmallSkin}" overSkin="{audioBtnOverSmallSkin}"
            downSkin="{audioBtnDownSmallSkin}" disabledSkin="{audioBtnDisabledSmallSkin}"
            focusThickness="0" click="currentState='audio'"/>
          <mx:Button id="imagesBtn" upSkin="{imagesBtnUpSmallSkin}" overSkin="{imagesBtnOverSmallSkin}"
            downSkin="{imagesBtnDownSmallSkin}" disabledSkin="{imagesBtnDisabledSmallSkin}"
            focusThickness="0" click="currentState='images'"/>
          <mx:Button id="docsBtn" upSkin="{docsBtnUpSmallSkin}" overSkin="{docsBtnOverSmallSkin}"
            downSkin="{docsBtnDownSmallSkin}" disabledSkin="{docsBtnDisabledSmallSkin}"
            focusThickness="0" click="currentState='docs'"/> 
          <mx:Button id="homeBtn" upSkin="{homeBtnUpMediumSkin}" overSkin="{homeBtnOverMediumSkin}"
            downSkin="{homeBtnDownMediumSkin}" disabledSkin="{homeBtnDisabledMediumSkin}"
            focusThickness="0" click="currentState=''"/>
        </mx:HBox>
      </mx:Canvas>