今回は，前回作成したボタンのサンプルのサンプルをブラッシュアップして，マウスポインタとボタンの位置関係やクリックに応じて画像を切り替えて表示するようにしてみましょう。さらに，当たり判定の方法についても解説します。
前回作成したボタンのサンプルですが，このムービー，ちょっと気になる点がありますよね。そうです。ボタンとしたビットマップの白い部分です。まずはこの部分を透過させてしまいましょう。
透過色設定と画像切り替え
任意の画像の，任意の色の部分を透過させるには，[シンボルリスト]から画像アイテムを選択して右クリックし，[プロパティ]を選択します。すると，[画像のプロパティ]ダイアログボックスが表示されます。[透過色を指定]チェックボックスにチェックを入れ，ダイアログ上部の画像の中から，透過したい色がある場所をクリックしましょう（図1）。
 |
| 図1●透過色の設定 |
これで，クリックした位置の色は透過して表示されるようになります。また，この画像を使って作成したボタンも，指定した色の部分は透過して表示されるようになります（図2）。
 |
| 図2●透過して表示されるようになったボタン |
これで，自然な感じになりましたね。さらに，このボタンをボタンらしくブラッシュアップしてみましょう。Suzukaでは，ひとつのボタンに対して，3枚の画像を割り当てることができます。
[シンボルリスト]からボタンシンボルを選択し，右クリックして[プロパティ]を選択します。[ボタンのプロパティ]パネルが表示されますので，「通常時(必須)」のほかに，さらに，「押下時」「マウスカーソル通過」にも画像を割り当ててみましょう（図3）。新規に割り当てた2つの画像も，透過の設定をそれぞれ行っておきます。
 |
| 図3●3つの状態に3枚の画像を割り当てる （作成した判定用画像をダウンロードできます [画像のクリックで拡大表示] |
3枚の絵を割り当てたムービーが図4です。マウスポインタとボタンの位置関係や，クリックした時の動きに注目してください。それぞれの状態に応じて，3枚の画像を切り替えて表示するボタンが作成できていますね。かなりボタンらしくなりました。
 |
| 図4●表示を切り替えるボタン [クリックするとムービーを表示します] |
