つれずれなるままの開発日記(最近はFlexばかり..)

Archive for 2009/4/17

よくおすすめ度とかで星が並んでいるやつをボタンとして作成してみました。
前回、ImageButtonで画像関連をいじってみましたので、これもできるなとつくってみました。

サンプルとして、ボタンとして星の上の部分をクリックするとその星の数の分だけ、星の色が変わります。
また、現在の星の数は number というプロパティで取得できます。

下のサンプルは、星を押しても何もなりませんが、ボタンを押すと星が増えていきます。
（最大に達すると、また、０に戻ります。）
また、４つ以上になると星の色が変わります。

これらの星は画像として登録できます。
はじめは、ベクターとして線を書こうかなと思いましたが、結局、画像が一番いろいろ融通がきくとおもったので、
画像にしました。

ちなみに、画像は３種類設定できます。

1. 選択されていないときの画像（サンプルでは灰色）
2. 選択されているときの画像（サンプルでは黄色）
3. マウスが上にきたときの画像（サンプルでは赤）

また、条件としてこれらの画像サイズは同じである必要があります。

onImg="@Embed(source='assets/StarOn.png')"
offImg="@Embed(source='assets/StarOff.png')"
overImg="@Embed(source='assets/StarOver.png')"
total="5"
number="4"
buttonMode="true"
click="onMouseClick(event)"
/>

ソースはこちらからダウンロードできます。