２つの透明部分を含む画像をそれぞれMovieClip化し、マウスイベントで何らかの処理をしたい。
とっても簡単なことなのだが、ここにちょっとした問題が潜んでいた。
画像が重なりあった時、下のMCをクリックしたいのに、上にあるMCの透明部分が邪魔でクリックできないのだ。
オブジェクトを動かしている場合、画像が重なりあうのは必至。
これって結構迷惑な話である。
その対応として、mc.mouseEnabled = false; を利用してみる。
ただし、そう単純な話ではない。
上のMCにこれを設定してしまうと、上のMCをクリックしたつもりでも、下のMCをクリックしてしまう。そう、透明部分を無効にするのではなく、MC自体のマウスイベントを無効にするのだ。(あたりまえだけど)
なので、MCの構造自体を全くの別物に変えてあげる必要がある。
準備するものとしては、透明画像：Ａの他に、Ａを「ビットマップのトレース」したもの：Ｂ。
それらを以下のようなレイヤーでMovieClip化する。
注：Ａに半透明な部分が含まれる場合は、Ｂのアルファを０にしておく必要がある。
targetMc
├ pngMc
｜ └ 透明画像：Ａ
└ bitmapMc
└ 「ビットマップのトレース」をしたもの：Ｂ
で、ActionScriptでは以下のように指定する。
targetMc.mouseEnabled = false;
targetMc.pngMc.mouseEnabled = false;
targetMc.bitmapMc.addEventListener( MouseEvent.MOUSE_UP, onClick );
function onClick(e){
trace("targetMc Clicked");
}
targetMc.pngMc.mouseEnabled = false;
targetMc.bitmapMc.addEventListener( MouseEvent.MOUSE_UP, onClick );
function onClick(e){
trace("targetMc Clicked");
}
解る人には当たり前の話だが、実際にクリックされているのは、bitmapMcなわけで、実際の画像はマウス操作ができない状態で表示されているだけ。
合わせて targetMcを mouseEnabled = false することで、bitmapMc のみをクリックのターゲットとする。
ちなみに、カーソルを指にする buttonMode = true; の指定については、targetMc でも targetMc.bitmapMc でも同じ結果になるようだ。（個人的には、addEventListener するターゲットと同じにした方が分かりやすいと思う）
また、単純に透明画像を含むMCが重なりあっていて、下のMCだけクリックしたいが、絵が重なっているところはクリックさせたくない場合にも使えるはず。
加えてハマった内容としては、そのMC達をそれぞれのラッパー用のMCに含んでしまっている場合。当然のごとく、上位のMCにも .mouseEnabled = false; を指定してあげないと上手くいかないので注意が必要。
余談だが、修正対応で各オブジェクトに.mouseEnabled = false;を入れたのだが上手くいかず。それぞれのオブジェクトをラッパー用のMCにaddChildしていたのを忘れていたため、どうしても透明部分が解消されずハマってしまった昨日・・・。
コメントする