title: Flex button skins return to default
body: <p>I have a problem which involves skinned buttons returning to their default skins after certain actions occur in my application. Below I have included a partial screenshot where you can observe the problem.</p>
  
  <p><img src="https://i.stack.imgur.com/lkksZ.jpg" alt="enter image description here"></p>
  
  <p>The left button is returned to its default skin after it was clicked (the click triggers a state transition). The right button is the default skinned button. Note that my mouse is neither over nor pressing the left button.</p>
  
  <p>The code for the Button Skin is as follows:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;fx:Metadata&gt;
      &lt;![CDATA[ 
          [HostComponent("spark.components.Button")]
      ]]&gt;
  &lt;/fx:Metadata&gt;
  
  &lt;fx:Script fb:purpose="styling"&gt;
      &lt;![CDATA[         
          import spark.components.Group;
  
          static private const exclusions:Array = ["labelDisplay"];
  
          override public function get colorizeExclusions():Array {return exclusions;}
  
          override protected function initializationComplete():void
          {
              useChromeColor = true;
              super.initializationComplete();
          }            
      ]]&gt;        
  &lt;/fx:Script&gt;
  
  &lt;s:states&gt;
      &lt;s:State name="up" /&gt;
      &lt;s:State name="over" /&gt;
      &lt;s:State name="down" /&gt;
      &lt;s:State name="disabled" /&gt;
  &lt;/s:states&gt;
  
  &lt;s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2"&gt;
      &lt;s:fill&gt;
          &lt;s:LinearGradient rotation="270"&gt;
              &lt;s:GradientEntry color.down="#545454"
                               color.over="#444444"
                               color="#343434"
                               alpha="0.95"/&gt;
              &lt;s:GradientEntry color.down="#767676"
                               color.over="#666666"
                               color="#565656"
                               alpha="0.95"/&gt;
          &lt;/s:LinearGradient&gt;
      &lt;/s:fill&gt;
  &lt;/s:Rect&gt;
  
  &lt;s:Rect id="border" left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="3"&gt;
      &lt;s:stroke&gt;
          &lt;s:SolidColorStroke id="borderStroke" weight="1" color="#343434" caps="round" joints="round" /&gt;
      &lt;/s:stroke&gt;
  &lt;/s:Rect&gt;
  
  &lt;s:Label id="labelDisplay"
           textAlign="center" verticalAlign="middle" maxDisplayedLines="1" fontSize="12"
           left="10" right="10" verticalCenter="0"
           color="#FFFFFF" fontFamily="SegoeUI"&gt;
  &lt;/s:Label&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here's the code for the transition that is causing the problem:</p>
  
  <pre><code>        &lt;s:Transition fromState="State0" toState="State1"&gt;
          &lt;s:Sequence targets="{[contacts_nocontacts, contacts_list, button_contacts, button_add, button_delete, ac_vgroup]}"&gt;
              &lt;s:Parallel&gt;
                  &lt;s:Fade target="{contacts_nocontacts}" alphaFrom="1" alphaTo="0" duration="200" /&gt;
                  &lt;s:Fade target="{contacts_list}" alphaFrom="1" alphaTo="0" duration="200" /&gt;
                  &lt;s:Fade target="{button_add}" alphaFrom="1" alphaTo="0" duration="200" /&gt;
                  &lt;s:Fade target="{button_delete}" alphaFrom="1" alphaTo="0" duration="200" /&gt;
              &lt;/s:Parallel&gt;
              &lt;s:RemoveAction targets="{[contacts_nocontacts, contacts_list, button_add, button_delete]}" /&gt;
              &lt;s:AddAction targets="{[button_contacts, ac_vgroup]}" /&gt;
              &lt;s:Parallel&gt;
                  &lt;s:Fade target="{button_contacts}" alphaFrom="0" alphaTo="1" duration="300" /&gt;
                  &lt;s:Fade target="{ac_vgroup}" alphaFrom="0" alphaTo="1" duration="300" /&gt;
              &lt;/s:Parallel&gt;
          &lt;/s:Sequence&gt;
      &lt;/s:Transition&gt;
  </code></pre>