Tips: GUI関連

イメージボタンの作り方

画像イメージをボタンとして作成する方法を解説する。その前に、FlexのSkinの基礎知識としてこの記事を予め読んでおくことをお薦めします。

まず、ボタンとして使用したいイメージ(スキン)を用意します。用意するイメージ(スキン)は以下の４つ。

upSkin(通常のイメージ)
overSkin(マウスカーソルが重なった時のイメージ)
downSkin(マウスでクリックされた時のイメージ)
disabledSkin(無効時のイメージ)

次にCSSファイルを記述します。以下にその例を示します。

style.css:

  .iconBtn {
      upSkin: Embed(source="images/upskin.png");
      overSkin: Embed(source="images/overskin.png");
      downSkin: Embed(source="images/downskin.png");
      disabledSkin: Embed(source="images/disabledskin.png");
  }

後は、作成したCSSファイルを読み込み、ボタンにスタイルを設定するだけです。

myApplication.mxml:

  <?xml version="1.0" encoding="utf-8"?>
  <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute>
      <mx:Style source="style.css"/>
      <mx:Button x="10" y="10" styleName="iconBtn"/>
  </mx:WindowedApplication>

簡単ですね。サンプルソースはこちら(244KB)