HTMLBtnBlue.mxml という名前のボタン スキンを作成し、HTMLBtnBlue.mxml のコピーを使用して別のスキンを作成し、HTMLBtnYellow という名前を付けて、色を 0xF8C313 に変更しました。HTMLBtn.mxml のコードは次のとおりです。
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
.upStyle {
color: #FF0000;
}
.overStyle {
color: #009900;
}
.downStyle {
color: #00FF00;
}
.disabledStyle {
color: #666666;
}
</fx:Style>
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<s:Label
id="labelDisplay"
styleName.up="upStyle"
styleName.over="overStyle"
styleName.down="downStyle"
styleName.disabled="disabledStyle"/>
<s:Rect width="100%" height="1" includeIn="over,up" bottom="0">
<s:fill>
<s:SolidColor color.over="#009900" color.up="#0000FF"/>
</s:fill>
</s:Rect>
</s:Skin>
ボタンのコードは次のとおりです。
<s:Button label="Open Menu" id="bluebtn" skinClass="skins.HTMLBtn" />
<s:Button label="Close Menu" id="yellowbtn" skinClass="skins.YellowSkin" />
ただし、[メニューを開く] ボタンと [メニューを閉じる] ボタンの両方に HTMLBtn スキンを適用します。