オンマウス時にポインタを指マークにしてバックの画像をハイライト表示

Adobe Flex Builder 3 での Flash 開発。

例えばサムネイル画像をマウスでクリックして何かする処理があったとする。
「何かする処理」はサムネイル画像の click イベントに書くのだが、それだけだと、マウスをサムネイル画像の上に持っていっても、「マウスポインタは矢印のまま」「サムネイル画像にも何の変化もない」ので、「サムネイル画像をクリックしたら何か起きる」感が全然ない。

ということで、マウスをサムネイル画像の上に持っていったら「マウスポインタを指マークにする」「サムネイルをハイライト（明るく）表示する」ことで、「クリックしたら何か起きる」感を出すことにしたい。

この場合、<mx:Image>タグで、

<mx:Image x="576" y="4" id="sumimg" source="img/sum1.jpg" width="48" height="48"
    click="changeImage();"
    useHandCursor="true" mouseChildren="false" buttonMode="true"
    rollOver="rollOverHandler(event)" rollOut="rollOutHandler(event)" />

という具合に、useHandCursor="true" mouseChildren="false" buttonMode="true" という指定を追加すれば、このサムネイル画像上にマウスポインタが来た時は指マークに変化する。

で、ハイライト表示だが、これは、rollOver プロパティ、rollOut プロパティにそれぞれマウスがロールオーバー、ロールアウトした時の処理を以下のように記述する。、

private function rollOverHandler (evt:MouseEvent) :void { 
    sumimg.alpha = 0.60; 
}

private function rollOutHandler (evt:MouseEvent) :void { 
    sumimg.alpha = 1.00; 
}

マウスがサムネイル画像の上に乗った（ロールオーバー）時は、サムネイル画像の非透明度を 60%（うっすら透明）に、マウスがサムネイル画像の外に動いた（ロールアウト）時は非透明度を100%（まったく透けてない）状態にしてるんだな。

こうすれば、うっすら透明にした時に、バックの白色が透けて、まるで画像が明るく光っているように見えるわけだ。画像のバックが黒色なら、多分、暗くなったように見えるんじゃろう。やったことないけど。

と、まあ、いつもは明るく光ってる画像を用意して、ロールオーバー時に画像を切り替えたりしてたんだけど、alpha プロパティの値変える方が簡単なので、メモっとく。