Flex button skins return to default - apache-flex

Question

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.
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.
The code for the Button Skin is as follows:
<?xml version="1.0" encoding="utf-8"?>
<fx:Metadata>
<![CDATA[
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
<![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();
}
]]>
</fx:Script>
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">
<s:fill>
<s:LinearGradient rotation="270">
<s:GradientEntry color.down="#545454"
color.over="#444444"
color="#343434"
alpha="0.95"/>
<s:GradientEntry color.down="#767676"
color.over="#666666"
color="#565656"
alpha="0.95"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Rect id="border" left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="3">
<s:stroke>
<s:SolidColorStroke id="borderStroke" weight="1" color="#343434" caps="round" joints="round" />
</s:stroke>
</s:Rect>
<s:Label id="labelDisplay"
textAlign="center" verticalAlign="middle" maxDisplayedLines="1" fontSize="12"
left="10" right="10" verticalCenter="0"
color="#FFFFFF" fontFamily="SegoeUI">
</s:Label>
Here's the code for the transition that is causing the problem:
<s:Transition fromState="State0" toState="State1">
<s:Sequence targets="{[contacts_nocontacts, contacts_list, button_contacts, button_add, button_delete, ac_vgroup]}">
<s:Parallel>
<s:Fade target="{contacts_nocontacts}" alphaFrom="1" alphaTo="0" duration="200" />
<s:Fade target="{contacts_list}" alphaFrom="1" alphaTo="0" duration="200" />
<s:Fade target="{button_add}" alphaFrom="1" alphaTo="0" duration="200" />
<s:Fade target="{button_delete}" alphaFrom="1" alphaTo="0" duration="200" />
</s:Parallel>
<s:RemoveAction targets="{[contacts_nocontacts, contacts_list, button_add, button_delete]}" />
<s:AddAction targets="{[button_contacts, ac_vgroup]}" />
<s:Parallel>
<s:Fade target="{button_contacts}" alphaFrom="0" alphaTo="1" duration="300" />
<s:Fade target="{ac_vgroup}" alphaFrom="0" alphaTo="1" duration="300" />
</s:Parallel>
</s:Sequence>
</s:Transition>

Answer 1

It looks like the skin is being set to the spark.skins.spark.DefaultButtonSkin (not to be confused with the normal Button skin - spark.skins.spark.ButtonSkin). This happens when you set emphasized="true" on the Button or that button is being used as a default Button in a Form.
See this thread for an example of how to customize the emphasized skin: http://forums.adobe.com/message/3811868

Answer 2

The problem is that the Skin is reset when focus is lost on a button that is set as Default button. It's standard behaviour, a quick fix can be found beneath (it's the same solution as the one Steven pointed out, but It's easier to have it on this actual page)
s|Button.emphasized {
skinClass: ClassReference("MyNewButtonSkin");
}
Just attach the same button skinClass on the emphasized style property of your button. The best way to do this the quickest is to do it with above CSS. On this way you can target all the buttons at once!