虫眼鏡拡大ムービーの中にボタンを配置する

質問

現在、勉強を兼ねて以下のサイトの虫眼鏡ムービーを改造しています。

http://www.geocities.co.jp/Playtown-Domino/6340/memo/

このムービーにボタンを複数配置して、マスク部分の領域にボタンが入ってon(release)したとき
別ページにリンクさせたいのですが、_rootにボタン"hogeBtn"を置いて
on(release){getURL("hoge.html");}ではリンク先が開きません。
ボタン範囲のマスクの領域外をクリックするとリンクするので、
どうやらマスクが邪魔をしているようです。

どなたかマスクの領域内でもボタンにリンクさせる方法、お分かりの方お願いします。
※上記のスクリプトではマスクはドラッグして移動しているんですが、
rollOverでもなんでもとりあえずクリックした時にリンクする方法があればお願いします。

回答No.1

noname#35109

>> _rootにボタン"hogeBtn"を置いて
>> on(release){getURL("hoge.html");}では
>> リンク先が開きません。

_rootにボタン"hogeBtn"を置く？
質問内容自体より，ここが最大の謎です。

_root に置いたら何の問題も起こらないと思います。
書かれているURLのサンプルで言うと，
_root ではなくて，
_root. upsizephoto　の中にボタンを置いたのではないでしょうか。
つまり，拡大される写真のムービークリップの中です。
そうでないと，拡大や移動などの意味がなくなります。

上記の前提，つまり，
_root. upsizephoto の中にボタンを置く場合として，
以下回答します。

=*=　原因・理由　=*=*=*=*=*=*=*=*=*=*=

>> ボタン範囲のマスクの領域外をクリックするとリンクするので、
>> どうやらマスクが邪魔をしているようです。

その推測は，そもそも間違いです。
マスクの問題ではなくて，
「ボタン上勝ちの法則（今勝手に命名）」です。

ボタンを上下に重ねたら，
普通は上のボタンしか効かなくなるでしょう。
単にそれだけのことです。

書かれているURLのサンプルでは，
マスクは，マスクとしてだけではなく，
マスクをドラッグで動かすボタンになっています。

※ココで言うボタンとは
　ボタンシンボルのインスタンスという
　狭義のボタンではなく，
　ボタン的役割をするオブジェクトのことです。

その，ボタン機能が上（レイヤー）にあるので，
下（レイヤー）のボタンが無効になるのです。

=*=　解決策　=*=*=*=*=*=*=*=*=*=*=

解決方法は，
だいたいこういうケースの場合 hitTest を使うのが，
定石手段となっています。

onハンドラを使わずにロールオーバー/ロールアウトを検出する
http://www.fumiononaka.com/TechNotes/Flash/FN0308001.html

詳細は，上記URLの通りです。

上のURLの考え方を使って，
この場合に当てはめて日本語でスクリプトを書くと，

　マウスがクリックされた状態の時{
　　　ボタンがマウスと重なっていた場合{
　　　　　getURL("hoge.html");
　　　}
　}

となります。
「マウスがクリックされた状態の時」
これを，簡単にするには，
　onClipEvent (mouseDown)
などを使います。
これは，ボタンシンボルのインスタンスには書けないので，
ボタンはムービークリップで作ってください。

ご質問で書かれている URL のサンプルの場合，
上の写真「upsizephoto」をダブルクリックして，
そのムービークリップ内の編集に入ります。
そのムービークリップにはレイヤーが１つしかないので，
写真のレイヤーより上にレイヤーを追加して２レイヤーにします。

そして上のレイヤーに，
塗りでボタンになる丸でも描いてください。
どこに描いても良いですが，
京都タワーの上の先端にでも描いたとしますか。

その塗りを選択して，ムービークリップに変換します。
そして，そのムービークリップを選択して，
下のアクションパネルに，

---------------------------------------
onClipEvent (mouseDown) {
if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
getURL("hoge.html");
}
}
---------------------------------------

と書けば一応出来上がりです（コピペ可）。

ボタンの

　on (release) {}

に当たるクリップイベントは，
普通，

　onClipEvent (mouseUp) {}

ですが，書かれているサンプルの場合，
マスクエリア内でマウスダウンすると，
マスクの中心位置が，スルリとマウスの座標に動くようにしてあるので，
ボタンに逃げられてしまうため，

　onClipEvent (mouseDown) {}

にしています。

補足

丁寧な解説ありがとうございます。
なるほどそういうやり方で解決できたんですね。

>_root に置いたら何の問題も起こらないと思います。
>書かれているURLのサンプルで言うと，
>_root ではなくて，
>_root. upsizephoto　の中にボタンを置いたのではないでしょうか。

これに関しては_rootのどこにボタンを置いても何も反応なしでした。
何かやり方が間違っていたんでしょうか。

しかしボタンが重なっているのが原因なんだなと考えて、
マスクのインスタンスのアクションのdragの動作をonClipEvent(enterFrame) {}で
囲んでやることでボタンを_rootに置いても動作させることが出来ました。

とりあえず動くには動いたんですが、sassakunさんに教えていただいた方法で
組み直してみようと思います。

ありがとうございました。