hitTestのロールアウト判定

質問

auのスライド式メニューなんですが、あれってボタンの中にボタンが入っていますよね？過去記事を読んだところ、「ボタンが重なり合った領域でマウス操作すると手前のインスタンスしかイベントを受け取れない」ので「hitTestを使う」とありました。ただ、ちょっと問題が・・
--問題点---
_________________________
|　　　　　　|mc|mc|mc|mc|
|　　余白　　|　|　|　|　|
|　　　　　　|　|　|　|　|
￣￣￣￣￣￣￣￣￣￣￣￣
こんな感じなんですが、swfに余白のある左側に出た場合はrollOut処理が働くのですが、余白のない「上、右、下」に出た場合に、処理が働かないんです。on()で記述した場合にはどの方向からでもrolloutするのに何故ダメなのでしょうか？
--ActionScript---
onClipEvent (load) {
　totalNum=4;leftX=20;rightX=320;mcPos=rightX;speed=5;
　function mcSet(myNum){
　　var i=1;
　　while(i<=myNum){_parent["cont"+i+"_mc"].setMove("left");i++;}
　　while(i<=totalNum){_parent["cont"+i+"_mc"].setMove("right");i++;}
　}
　function setMove(dir) {
　　if(dir=="left"){mcPos=leftX;}else if(dir=="right"){mcPos=rightX;}
　　this.onEnterFrame=xMove;
　}
　function xMove(){
　　nextX=this._x+(mcPos-this._x)/speed;
　　if(Math.abs(mcPos-nextX)>0.1){this._x=nextX;
　　}else{this._x=mcPos;this.onEnterFrame=undefined;}
　}
　function init(){
　　var i=1;
　　while(i<=totalNum){
　　　_parent["cont"+i+"_mc"].setMove("right");i++;
　　}
　}
}
onClipEvent(enterFrame){
　if(this.hitTest(_root._xmouse, _root._ymouse, true)){this.mcSet(1);}else{init();}
}

回答No.2

noname#35109 · ベストアンサー

＃１です。おはようございます。

> このように書いたら、小さいボタンに移ったときに
> ダイナミックテキストのエリアに判定結果rollOutが入っちゃったんですよね。

そうでしょう。rollOutになると思います。
それだから，上に乗った小さなボタンにも，同じスクリプトを書いて動作を続行させれば良いのです。

つまり，この部分。

on (rollOver) {
_root.onEnterFrame = function() {
_root.cont1._x += (150-_root.cont1._x)*0.8;
};

この部分は下の大きなボタンにも上の小さなボタンにも共通部分です。
下の大きなボタンをrollOutしても，小さなボタンにrollOverするので，小さなボタンが，x座標150に近づくようなスクリプトを続行させます。

> これってレイヤー分けても意味ないのでは・・・

おっしゃるとおり，スクリプト上は分ける必要はないです。
同じレイヤーで上に小さなボタンが乗っていてもまったくOKです。
作成するときの管理の問題です。

もし大きいボタンの下に小さなボタンが隠れてしまったら，それを上に持ってくるのに手間だから，レイヤーを分けているだけです。
また，先に大きなボタンを作ってしまった場合，同レイヤーで，その上に小さなボタンを作成するのは不可能でしょう。
また動かしたくないレイヤーはロックをかけておけば，間違って動かすこともないですし，作成上の都合だけです。
それと，スクリプトで動かす場合はレイヤーをさほど意識しなくても良いですが，
モーショントゥイーンなどで動かすときは，１つの動く部分につき１レイヤーに決まっています。
１つのキャラクターに複雑な動きをさせる場合，胴体レイヤー，頭部レイヤー，右手レイヤー，顔レイヤー，右目レイヤー…
など全ての別々のパーツで別々のレイヤーにしないとなりません。
マスクレイヤーなども含めると，Aキャラに20レイヤー，Bキャラに20レイヤー。それでやっとABキャラが会話する。
というアニメーションができるというケースがけっこうにあります。
だからレイヤーは分ける習慣がついているので，分けたという面もあります。

> マジですか？「最初に書いたスクリプト」って、on(rollOver)ではなく、
> hitTestでロールオーバー状態をmcに作ったやつですよね？

スススス，すみません。
書き方が悪かったです。そういう意味ではなく，

下レイヤーの「cont１本体ＭＣ」には，
--------------------------------------
onClipEvent (load) {
_root.cont1._x = 250;
}
on (rollOver) {
_root.onEnterFrame = function() {
_root.cont1._x += (150-_root.cont1._x)*0.8;
};
}
on (rollOut, dragOut) {
_root.onEnterFrame = function() {
_root.cont1._x += (250-_root.cont1._x)*0.8;
};
}
--------------------------------------

上レイヤーのボタンには
--------------------------------------
on (rollOver) {
_root.onEnterFrame = function() {
_root.cont1._x += (150-_root.cont1._x)*0.8;
};
}
on (release) {
getURL("○○.html");
}
--------------------------------------

とした場合，この cont をステージの上にぴったり引っ付けても，rollOut は認識しましたよと言うことです。

お礼

sassakunさん、色々ありがとうございました。
↑で追加で質問した事は、今後本で調べたりとかして考えてみます。

補足

遅くなりすいません。

＞上に乗った小さなボタンにも，同じスクリプトを書いて動作を続行させれば良いのです

あ～、なるほど。そういうことだったんですか。ある意味、逆転の発想ですね。

--------------------------------------------------

＞cont をステージの上にぴったり引っ付けても，rollOut は認識しました

そうなんですよね。on(rollOut)ならするんですよね。
だけどhitTestではしなくて・・・・
なんでhitTestだと余白のないところから出たときにrollOutしなかったんでしょうか？
僕の書き方が悪かったのでしょうか？それともhitTestってそういうものなんですか？

回答No.1

noname#35109

ａｕのページ見ました。

>> auのスライド式メニューなんですが、あれってボタンの中にボタンが入っていますよね？

そういう見方もできますが，
私はそう見えません(そう考えません)。
なぜかと言うと，そう取ると面倒くさいからですσ(^_^;)。
面倒くさがりやなんですよ。

私だったらこう考えます。

１つのタブみたいなMCに「cont1」というインスタンス名を付けるなら，
その「cont1」内を上下２レイヤーにして，下の図のように配置します。

　┌ｃｏｎｔ１（インスタンス名）────┐
　│上レイヤー…　ボタン１　ボタン２ │
　│下レイヤー…　cont１本体ＭＣ 　 │
　└──────────────┘

下レイヤーの「cont１本体ＭＣ（仮称：インスタンス名ではない）」が大きくて，cont1全体に広がっているMCです。
ボタン（MC）の中にボタン（MC）があるのではなく，大きいボタン（MC）の上に小さなボタン（MC）が乗っている感じです。
複数のcontが存在するので，ややこしいですからcontは１つであったとすると，
下レイヤーの「cont１本体ＭＣ」には，

--------------------------------------
onClipEvent (load) {
_root.cont1._x = 250;
}
on (rollOver) {
_root.onEnterFrame = function() {
_root.cont1._x += (150-_root.cont1._x)*0.8;
};
}
on (rollOut, dragOut) {
_root.onEnterFrame = function() {
_root.cont1._x += (250-_root.cont1._x)*0.8;
};
}
--------------------------------------

上レイヤーのボタンには
--------------------------------------
on (rollOver) {
_root.onEnterFrame = function() {
_root.cont1._x += (150-_root.cont1._x)*0.8;
};
}
on (release) {
getURL("○○.html");
}
--------------------------------------

のようなことを書きます。250やら0.8は適当に書きました。
ボタンみたいなのでボタンにしていますが，実際はMCに書いた方がこの場合は発展性があると思います。
onEnterFrameの前の＜オブジェクト＞は，一応，_root という共通なオブジェクトにしています。
でないと，onEnterFrame どうしがぶつかると思います。

もちろん，「cont」は複数あるので，
動くスピードや座標などは変数にしておいて，実行する方が良いですが，
説明をシンプルにするために上のようなスクリプトにしてみました。

実際ａｕのようにするには，これらＭＣに直接，動くスクリプトは書かず，
管制塔のような別のMCを作って，その中に動くスクリプトは書き，
「時間経過」で動く場合と「rollOver」で動く場合を共通スクリプトにして，
両方の場合を振り分けるとは思います。

例えば「cont１本体ＭＣ」にはFlagAとBを立てるだけのスクリプト

　on (rollOver) {
　　_root.flagA=1;　//時間とマウス振り分け用Flag
　　_root.flagB=1;　//contポジション移動用Flag
　}
　on (rollOut, dragOut) {
　　_root.flagA=0;
　　_root.flagB=0;
　}

みたいなものを書いておいて，管制塔みたいなＭＣには

　this.onEnterFrame = function() {
　　もし，_root.flagA==0 だったら，{
　　　○秒に１回　flagBに１を加え続ける
　　}else もし，_root.flagB==0 であれば，{
　　　全てのcontを 最初の位置に戻す。
　　}else もし，_root.flagB==1 であれば，{
　　　それぞれのcontをどこどこ1に動かす。
　　}else もし，_root.flagB==2 であれば，{
　　　それぞれのcontをどこどこ2に動かす。
　　}
　　　　…　…　…
　　}

みたいなことを書くと思うということです。

>> 余白のない「上、右、下」に出た場合に、処理が働かないんです。
>> on()で記述した場合にはどの方向からでもrolloutするのに何故ダメなのでしょうか？

最初に書いたスクリプトで余白なしのものを作って実行してみましたが，
SWFのボタン(MC)領域から直接HTML領域に「rollout」してもちゃんと「rollout」は認識され，中のスクリプトは実行されましたよ。

補足

ご丁寧な回答ありがとうございます。よく分からないので、2点質問させてください。

まず
>大きいボタン（MC）の上に小さなボタン（MC）が乗っている感じにする
に関してなんですが、ここ良く分からないです。下のようなswfを試してみたんです。

「ダイナミックテキスト（判定結果表示）」

|￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣|
|　　大きいボタンmc　　　　　　|
|　|￣￣￣￣￣￣￣￣￣￣￣￣|　|
|　|　|￣小さいボタンmc￣|　|　|
|　|　　￣￣￣￣￣￣￣￣￣　|　|
|　|＿＿＿＿＿＿＿＿＿＿＿＿|　|
|＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿|

----大きいボタンmcのScript------
on(rollOver) {
_root.judg = "rollOver";
}
on (rollOut) {
_root.judg = "rollOut";
}
このように書いたら、小さいボタンに移ったときにダイナミックテキストのエリアに判定結果rollOutが入っちゃったんですよね。これってレイヤー分けても意味ないのでは・・・って。なんか僕が作り方を誤解してるのでしょうか？すいません、良く分からなくて。

それから
>最初に書いたスクリプトで余白なしのものを作って実行してみましたが，
>SWFのボタン(MC)領域から直接HTML領域に「rollout」してもちゃんと
>「rollout」は認識され，中のスクリプトは実行されましたよ。

マジですか？「最初に書いたスクリプト」って、on(rollOver)ではなく、hitTestでロールオーバー状態をmcに作ったやつですよね？なんか本を見たりとか、ネットで色々調べたりしたんですが、やっぱりhitTestだと余白のないところから出たときにrollOutしてくれないんですよね・・・on(rollOut)で記述するとちゃんとしてくれるのに・・・・

なんかActionScriptってホントに難しい・・・挫折しそう（笑）