as3 マウスオーバー、マウスアウトの処理

with コメントはまだありません

マウスオーバーしたら要素がだんだん表示され、
マウスアウトしたら要素がだんだん消えていくという簡単なボタンを作成しました。

//マウスオーバー
public function Over(e:Event):void {
e.currentTarget.addEventListener(Event.ENTER_FRAME, FadeIn);
}
//マウスアウト
public function Out(e:Event):void {
e.currentTarget.addEventListener(Event.ENTER_FRAME, FadeOut);
}
//フェードイン
public function FadeIn(e:Event):void {
e.currentTarget.alpha += (1 – e.currentTarget.alpha) * 0.2;
if(e.currentTarget.alpha >= 0.97) {
e.currentTarget.alpha = 1;
e.currentTarget.removeEventListener(Event.ENTER_FRAME, FadeIn);
}
}
//フェードアウト
public function FadeOut(e:Event):void {
e.currentTarget.alpha += (0 – e.currentTarget.alpha) * 0.2;
if(e.currentTarget.alpha < = 0.03) {
e.currentTarget.alpha = 0;
e.currentTarget.removeEventListener(Event.ENTER_FRAME, FadeOut);
}
}

な感じです。

これ一見何の問題もなさそうですが、
大きな問題が。。。

例えば、マウスオーバーして要素が表示されている途中に、
マウスアウトしたら表示が途中に止まってしまいます。
逆にマウスアウトして表示が消えかけている途中にマウスオーバーしても
途中で止まってしまいます。(高速にマウスを動かされた時です)

なので、こうしなきゃだめです。

//マウスオーバー
public function Over(e:Event):void {
e.currentTarget.addEventListener(Event.ENTER_FRAME, FadeIn);
e.currentTarget.removeEventListener(Event.ENTER_FRAME, FadeOut);
}
//マウスアウト
public function Out(e:Event):void {
e.currentTarget.addEventListener(Event.ENTER_FRAME, FadeOut);
e.currentTarget.removeEventListener(Event.ENTER_FRAME, FadeIn);
}
以下同じ↓

それぞれ、途中でマウスが外れても、
リスナーを削除するように記述の追加をしておけば
問題ありません!

Leave a Reply