マウス・ポインタに付いてくるインスタンス
図1のムービーの上でマウスを動かしてみてください。インスタンスがマウス・ポインタを追跡してきますね。
図1：マウス・ポインタを追うムービー（クリックするとムービーを表示します）
このようなムービーの作成方法はいろいろな方法があるのですが，共通して必要な仕組みというのは，「一定のタイミングでインスタンスを動かす方法」と「マウス・ポインタの位置（座標）を知る方法」です。一定のタイミングでインスタンスを動かす方法は，本連載の第20回に学習しましたね。
あとはマウス・ポインタの位置を知る方法がわかれば良さそうです。一定のタイミングごとに，だんだんとマウス・ポインタの位置へとインスタンスの位置を近づけていく処理を記述すれば良いわけですね。
マウス・ポインタの位置を獲得する
ではまず，マウス・ポインタの位置を知る方法から見ていきましょう。これはもう，そのまんま「_xmouseプロパティ」と「_ymouseプロパティ」というプロパティが用意されています（表1）。
| プロパティ | 説明 |
|---|---|
| _xmouse | マウス・ポインタの横位置（x座標）を取得します |
| _ymouse | マウス・ポインタの縦位置（y座標）を取得します |
二つのプロパティは，_xプロパティや_yプロパティと同じく，「任意のインスタンスの中心点からみた（マウス・ポインタへの）距離」という形で管理されています。ですから，「_root.xmouse」とすれば，メインのタイムライン（_root）の中心点であるムービーの左上からみた，マウス・ポインタまでの横方向の距離（位置）となります。図2にこの仕組みを使ったサンプルを挙げておきますので，確認してみてください。
図2： マウス・ポインタの座標（クリックするとムービーを表示します）
したがって，_rootに配置してあるインスタンス「cat」をマウス・ポインタの位置と同じ位置に移動させたいのならば，同じ階層からの目線（同じ中心点からの距離）ですのでそのまま
_root.cat._x = _root._xmouse; _root.cat._y = _root._ymouse;とコードを記述してあげればOKなわけですね。この処理をonEnterFrameイベントハンドラを使って定期的に実行させれば，マウス・ポインタとぴったりと同じ位置をキープするムービーができあがります（図3）。簡単ですね＊1。
図3：マウスにぴったりとくっ付くインスタンス（クリックするとムービーを表示します）
function moveCat() {
this._x = _root._xmouse;
this._y = _root._ymouse;
}
cat.onEnterFrame = moveCat;
動きに変化をつける
このままでも十分なのですが，ちょっと動きに変化を加えてみましょう。まず，ぴったりとくっ付くのではなく，段々とマウス・ポインタに近づいてくるような動きに変更します。いろいろなやり方が考えられるのですが，以下の方法を使ってみましょう。//中間点へと移動 this._x = (this._x+_root._xmouse)/2; this._y = (this._y+_root._ymouse)/2;ここでは，現在地と目的地の座標を足して2で除算することで「中間点の座標」を得て，その座標にインスタンスを移動させています。onEnterFrameでこの処理を何度も実行すると，徐々にマウス・ポインタへと近付いて行くわけですね。
さらに，マウス・ポインタとの位置関係によってインスタンスの向きを変更してみましょう。インスタンスの向きを変更するには，現在の_xscaleプロパティの値の正負の符号を逆にしてあげればOKです。今回のインスタンスは，通常時は右向きのイラストを使っていますので，_xscaleプロパティが正の値であれば右向き，負の値であれば左向きとなります。
これをコードで記述すると次のようになります＊2。
//位置関係により，符号を決定 var direction:Number = (this._x<_root._xmouse) ? 1 : -1; //_xscaleプロパティの値に決定した符号を適用 this._xscale = Math.abs(this._xscale)*direction完成したムービーおよびコードは図4のようになります。これで動きに変化が付きました。
図4：動きに変化をつける（クリックするとムービーを表示します）
//メインのタイムライン上の座標を使ってマウス・ポインタを追う関数
function moveCat(){
//移動処理
this._x = (this._x+_root._xmouse)/2;
this._y = (this._y+_root._ymouse)/2;
//向きを調整
var direction:Number = (this._x<_root._xmouse) ? 1 : -1;
this._xscale = Math.abs(this._xscale)*direction;
}
//インスタンス「cat」がマウス・ポインタを追うように設定
cat.onEnterFrame=moveCat;
もちろん，ここで紹介した動きとは別に，自分なりの動きをつけても構いません。_xmouseと_ymouseの値を利用して，目的の位置まで進むいろいろな動きを作ってみるのも面白いですね。
今回はマウス・ポインタを追いかけるインスタンスの作成方法を通じて，マウス・ポインタの座標の取得の仕方をご紹介しました。次回はさらにマウスの動きに深く迫り，マウスの動きに対応した「イベント」を使った処理を作成してみましょう。お楽しみに。
【コーヒーブレイク】
ぴったりついてくるムービーの簡単な作り方
本文中ではonEnterFrameイベントハンドラ内で_xmouseプロパティや_ymouseプロパティの値を利用して，マウス・ポインタにくっついたり，追いかけたりするインスタンスの作成方法をご紹介しました。でも，実はマウス・ポインタにぴったりとくっ付くインしタンスを作成するだけであれば，もっと簡単な方法があります。それは，インスタンスをドラッグするための仕組みである「startDragメソッド」を利用する方法です。startDragメソッドは，ムービークリップ・インスタンスをドラッグできる状態にするメソッドなのですが，これを利用して任意のインスタンスを「ドラッグしっぱなし」状態にしてしまうのです（図A）。
図A：startDragメソッドでマウスに追随（クリックするとムービーを表示します）
上記のムービーに記述してあるスクリプトは
cat.startDrag(true);の1行のみです。インスタンス「cat」に対して，引数に「true」を指定してstartDragメソッドを実行しているだけです＊3。特にマウス・ポインタを追う動きは必要ない，という場合には，こちらのほうがお手軽ですね。
＊1 マウス・ポインタと重ならないのはどうして？と思われるかもしれません。答えは単純で，インスタンス「cat」のシンボル中心点を，ネコの目の前にしているからです。こうしておけば，中心点の座標をマウスの座標に重ね合わせると，常にマウス・ポインタを見つめているような動きになります。
＊2 コード中の「変数 = 式 ? 値1 : 値2」という「?:条件演算子」を使ったステートメントでは，式の値がtrueである場合には値1を変数に返し，falseである場合には値2を変数に返します。ifステートメントとよく似ていますね。「Math.abs(数値)」メソッドは，数値の絶対値を返します。
＊3 startDragメソッドの第1引数は「true」を指定すると，ドラッグ中はマウス・ポインタの中心点とインスタンスの中心点へとロックします。ちなみに「false」を指定すると，startDragメソッド実行時の相対的なマウス・ポインタとインスタンスの位置にロックします。
