Flexは、そのままでも十分すぎるほどデザインの完成度が高い。
だけど、ボタンやタブ・Comboxなど、CSSで変更してもルックアンドフィールが合わないときがある。そんなときにスキンを使う。スクロールバーのカスタマイズ方法やプリロードのカスタマイズ方法は書いてきたけど、ボタンやら他のパーツも変更する方法まとめて書いておこうと思う。

スキンを適用する方法として２つ方法がある。

グラフィカルスキン
埋め込みアセットを指定

Button {
overSkin: Embed("../assets/images/orb_over_skin.gif");
upSkin: Embed("../assets/images/orb_up_skin.gif");
downSkin: Embed("../assets/images/orb_down_skin.gif");
}

プログラムスキン
描画クラスを指定し、指定はClass Referenceを利用。

Button {
upSkin:ClassReference('MySkin');
downSkin:ClassReference('MySkin');
overSkin:ClassReference('MySkin');
disabledSkin:ClassReference('MySkin');
}

という風にしてすると使える。
プログラムスキンの利点として描画内容はすべてスクリプトで記述する、画像リソースが含まれないのでコンパイル後の容量が大きくならないらしい。

ボタンに独自のデザインを適用する場合

<mx:Button
useHandCursor="true"
buttonMode="true"
upSkin="@Embed('../image/return.png')"
overSkin="@Embed('../image/return.png')"
downSkin="@Embed('../image/return.png')" />

TabNavigator に画像を使用する方法も見つけたのでメモ。
画像を指定するにはStyleを使用し、外部CSSを設定して TabNavigator の Style を設定する。

CSSの記述

タブのスタイル

  • tabBt – タブのスタイル
  • last-tab-style-name – タブボタンの左端のスタイル
  • first-tab-style-name – タブボタンの右端のスタイル

ボタンのスタイル

  • up-skin – 通常状態の画像を指定(ボタン)
  • over-skin – マウスオーバーの画像を指定(ボタン)
  • down-skin – マウスダウンの画像を指定(ボタン)
  • selected-up-skin – 通常状態の画像を指定(ボタン選択状態)
  • selected-over-skin – マウスオーバーの画像を指定(ボタン選択状態)
  • selected-down-skin – マウスダウンの画像を指定(ボタン選択状態)
 .tab{
 tab-width:150;
 tab-height:30;
 tab-style-name:"tabBt";
 last-tab-style-name:"tabBtLeft";
 first-tab-style-name:"tabBtRight";
 }
 .tabBt{
 up-skin: Embed("./assets/tab_up.png");
 over-skin: Embed("./assets/tab_over.png");
 down-skin: Embed("./assets/tab_down.png");

 selected-up-skin: Embed("./assets/tab_selected_up.png");
 selected-over-skin: Embed("./assets/tab_selected_over.png");
 selected-down-skin: Embed("./assets/tab_selected_down.png");

 }
 .tabBtLeft{
 up-skin: Embed("./assets/tab_up_left.png");
 over-skin: Embed("./assets/tab_over_left.png");
 down-skin: Embed("./assets/tab_down_left.png");

 selected-up-skin: Embed("./assets/tab_selected_up_left.png");
 selected-over-skin: Embed("./assets/tab_selected_over_left.png");
 selected-down-skin: Embed("./assets/tab_selected_down_left.png");

 }
 .tabBtRight{
 up-skin: Embed("./assets/tab_up_right.png");
 over-skin: Embed("./assets/tab_over_right.png");
 down-skin: Embed("./assets/tab_down_right.png");
 selected-up-skin: Embed("./assets/tab_selected_up_right.png");
 selected-over-skin: Embed("./assets/tab_

selected_over_right.png");
 selected-down-skin: Embed("./assets/tab_selected_down_right.png");
 }

MXML

  • <mx:Style source=”CSSファイルのパスを指定”/>
  • <mx:TabNavigator styleName=”タブスタイルを指定”>
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Style source="./assets/default.css"/>

 <mx:TabNavigator id='tab' label="test tab" width='100%' styleName="tabBt">

 <mx:VBox label="test 1">
 <mx:Label text="test1 test1"/>
 </mx:VBox>

 <mx:VBox label="test 2">
 <mx:Label text="test2 test2"/>
 </mx:VBox>

 <mx:VBox label="test 3">
 <mx:Label text="test1 test1"/>
 </mx:VBox>

 <mx:VBox label="test 4">
 <mx:Label text="test1 test1"/>
 </mx:VBox>
 </mx:TabNavigator>
</mx:WindowedApplication>

これでtabnavigatorのカスタマイズができるらしい。
comboxのカスタマイズもどこかで見つけたけど、見当たらなくなってしまった（汗）

スキンは、CSSファイルで管理したほうがいいのか、ASファイルで管理したほうが良いのか、迷っている。
いろいろと調べていたら、「Flex, 画像skinなどをCSSで一元管理する」で解説してくれている。

今、作っているものでどのくらいビジュアルデザインがカスタマイズできるか試してみようと思う。

関連記事