マウスに追随するMC

質問

マウスに追随するMCがあります。そこまではスクリプトで書いています。
そのMCをウネウネした縦のガイドラインに沿わせて、マウスのY座標のみで動かしたいのですが、どうしてもまっすぐにしか移動してくれません。

どうしたらよいでしょうか？
よろしくお願いいたします。

回答No.1

DPE · ベストアンサー

ガイドに沿って動かすトゥイーンは、スクリプトではサポートされていなかったかと思います。
予めガイドに沿うモーショントゥイーンとして作っておき、マウスカーソルの位置に対応するフレームを割り出して、表示するフレームを切り替えるという方法はいかがでしょう。

マウスカーソルの位置は _xmouse および _ymouse プロパティを見ると分かります。
このプロパティは実は、どのムービークリップのプロパティを見るかによって値が変わります。
Flash ではムービー自身もムービークリップとして扱い、通常は _root という名前で参照します。
_xmouse と _ymouse には、そのムービークリップの中心点から見たマウスカーソルの座標が入っています。
ステージの中心点は左上ですので、ステージ = _root の _xmouse と _ymouse を見ると、ステージの左上を原点とするマウスカーソルの座標を取得できます。

_xmouse と _ymouse は、ムービークリップのインスタンスであればどれでも持っているプロパティです。
例えばステージに clip というムービークリップのインスタンスを配置し、

　x = _root.clip._xmouse;

とすれば、clip の中心点を原点とするマウスカーソルの位置を取得できます。
今回は、マウスカーソルの位置からフレームの番号を割り出します。
フレーム番号は１から始まりますから、できるだけマウスカーソルの座標とフレーム番号が１対１に対応するように作った方が、計算式は考えやすくなります。
_root の中心点は先述の通りステージの左上なので、これを原点とする位置情報では計算が面倒です。
そこで、_root ではなくあるムービークリップの中心点から見たマウスカーソルの位置を利用する方法を考えます。
ムービークリップの中心点を基準にした設計であれば、ムービークリップをステージのどこに配置しても、数値やスクリプトを変更することなく同じ動作になります。

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

まず、ムービークリップシンボルの中にモーションガイドと動かすムービークリップを配置し、１つのムービークリップにします。
ムービークリップインスタンスの中心点とは、ステージに配置した時に表示される＋マーク（○と＋が重なったマークとして表示される場合もあります）の位置です。
インスタンスの中心点は元になっているシンボルと必ず同じ位置になり、インスタンスごとに変更はできません。
シンボルの中心点は、シンボルを編集する際に決めることができます。
シンボルの編集画面で、画面中央あたりに＋のマークが表示されているかと思います。この位置が、シンボルの中心点になります。マークは移動できないので、絵の方を移動して中心点を決めます。
メインのムービークリップは、中心点が上端になるように作ります。
モーションガイドの上端が＋マークの位置に来るように配置してください。「プロパティ」か「情報」パネルでオブジェクトの左上の座標を表示させ、Ｙ座標に 0.0 を入力すると簡単です。

動かすムービークリップをモーションガイドの上端に配置し、ガイドに沿って動くモーショントゥイーンを作ります。
この時、トゥイーンのフレーム数にご注意ください。
例えば _ymouse が 100 だった時、ムービークリップが Y = 100 の位置にくるフレームの番号を計算で割り出して表示するフレームを切り替えるというのが、今回のポイントです。
仮にモーションガイドの高さが 200 だとすると、フレーム 201 でガイドの下端に達するようにトゥイーンを作れば、マウスカーソルの位置と１対１に対応させることができます。
（座標は０から、フレームは１から始まります。座標で０～ 200 は距離にすると 201 ですので、201 フレームのアニメとして作った方が簡単です）
モーションガイドが 400px や 500px の場合、ムービークリップのフレーム数も 400 や 500 になると厄介になります。この場合は 200 フレームや 250 フレームといった具合に縮小して作るといいでしょう。
ただし、縮小した分、マウスカーソルの位置からフレーム番号を割り出す計算にも修正が必要になります。

とりあえず、モーションガイドの高さが 200px 、ガイドの上端がムービークリップの中心点に配置されており、201 フレームから成るムービークリップ” clip ”を作ったとします。
マウスカーソルのＹ座標に合わせて動かすスクリプトは、大体、次のようになります。
このスクリプトは” clip ”のインスタンスに設定してください。

（↓各行頭に全角のスペースが入っています。コピーする際は、全て半角のスペースかタブに置き換えてください）

　onClipEvent(load)
　{
　　//ガイドの高さを保持
　　guide_h = 200;

　　//最初はタイムラインを止めておく
　　this.stop();
　}

　onClipEvent(mouseMove)
　{
　　//マウスカーソルの座標をチェック
　　//ガイドの高さの範囲内にある場合のみ、フレームを切り替える
　　if( this._ymouse >= 0 && this._ymouse <= guide_h )
　　{
　　　this.gotoAndStop( Math.floor( this._ymouse ) + 1 );
　　　updateAfterEvent();
　　}
　}

普通、ムービークリップの縦の長さは _height というプロパティに保存されています。
しかし、モーションガイドを使ったトゥイーンを含むムービークリップでは _height プロパティにガイドのサイズが反映されないようですので、上記のスクリプトでは guide_h という変数にガイドの高さを保存し、_height プロパティの代わりにしています。
this._ymouse で、clip の中心点（上端）を原点とするマウスカーソルの位置を取得します。
ガイドも clip の中心点に配置されており、アニメのフレーム数もガイドの長さと同じになっていますから、マウスカーソルの位置をそのままフレーム番号に利用できます。
マウスカーソルは小数点以下の数値が付くことがありますから、Math.floor でこれを切り捨て、整数にしてフレームの番号を求めます。
ただ、マウスカーソルの座標は０～ 200 の範囲が有効ですが、トゥイーンのフレームは１～ 201 です。１フレームのズレがありますので、実際に gotoAndStop で移動する時は +1 してズレを補正しています。

まあ、少々力技ですが（^^;）、こんな感じでいかがでしょう。

お礼

こんなに詳しく、教えていただきとても助かりました。
我ながら身の程知らずな事をやろうとしていました。
マウスに近づくような動きは・・・あきらめます＾＾；
教えていただいたやり方で、なんとかなりそうです。
本当にありがとうございました！