今回から,MovieClipインスタンスの座標の扱いについて解説する。お題は,マウスポインタの後を追うMovieClipのフレームアクションだ。座標を考えるときは,どこから見た値なのかを意識することが大切になる。
インスタンスとマウスポインタの座標
まず,MovieClipインスタンスの座標とマウスポインタの座標にアクセスするプロパティの確認が必要だ(表1)。マウスポインタの座標は,調べることができるだけで,設定はできない。
表1 インスタンスとマウスポインタの座標についてのプロパティ
| プロパティ | 説明 |
|---|---|
| mouseX | マウスポインタのx座標を,ピクセル数で返す。取得のみで,設定はできない。 |
| mouseY | マウスポインタのy座標を,ピクセル数で返す。取得のみで,設定はできない。 |
| x | インスタンスのx座標を,ピクセル数で示す。 |
| y | インスタンスのy座標を,ピクセル数で示す。 |
確認のため[ヘルプ]で[MovieClipクラス]の[プロパティ]一覧を見ると,デフォルトではこれらのプロパティが表示されていない(図1)。
しかし,表の上部に「継承されるブロパティを表示」というボタンがある(図1)。これをクリックすると,表が拡張されて,上表1の座標のプロパティも現れる(図2)。
最初の[プロパティ]一覧に表示されていたのは,表の右端の「定義元」がMovieClipと記載されたものだ。実は,これらがMovieClipクラスに定義されたプロパティなのである。
[プロパティ]一覧を拡張すると,それ以外の「定義元」のプロパティも示される。x/yやmouseX/mouseYプロパティの定義元には,「DisplayObject」と記されている。つまり,これらのプロパティはDisplayObjectクラスに定義されているのだ。前回まで使っていたrotationもこのDisplayObjectクラスのプロパティである。なぜそれらが,MovieClipインスタンスからアクセスできるのか。
多くのクラスは,階層構造を成している。その場合,ベースとなるクラスのプロパティやメソッド一式を引継ぎ,そこに新たなプロパティやメソッドを追加するかたちで新しいクラスが定義される。ベースとなるクラスは一般に「スーパークラス」と呼ばれ,それを拡張したいわば子どものクラスは「サブクラス」という。
DisplayObjectとMovieClipクラスは,このスーパークラスとサブクラスの関係にある(※1)。だから,DisplayObjectクラスのプロパティは,MovieClipインスタンスから使えるのである。スーパークラスの機能(プロパティやメソッド)がサブクラスで使えるプログラミングの仕組みを「継承」という。
- ※1)
MovieClipクラスは,DisplayObjectクラスを直接継承している訳ではない。クラスは何段階でも継承することが可能なのだ。MovieClipクラスの継承は,[ヘルプ]で確認できる(図3)。
マウスポインタの水平方向の動きに追随させる?
ではまず,MovieClipインスタンスを,マウスポインタの水平方向の動きに追随させてみる。いきなり水平・垂直両方向の処理を書く前に,できるだけ小分けして確認しながら進めるのは,スクリプティングを効率的に行うためのコツだ。小分けすれば頭を整理しやすいし,問題が起こったときも早期発見・早期治療が可能になる。
スクリプトは,MovieClipのフレームアクションとして記述する。アニメーションの処理だから,Event.ENTER_FRAMEイベントで処理するのが定石だ。すると,つぎのようなフレームアクションでよさそうに思える(図4)。
addEventListener(Event.ENTER_FRAME, xFollowMouse);
function xFollowMouse(eventObject:Event):void {
x = mouseX;
}
ところが[ムービープレビュー]を確認すると,チカチカと点滅したような動きになる。ただ,マウスポインタの水平方向の動きに,反応している様子は伺える。なぜ,このような動作になるのか。ヒントは,初めに確認した[ヘルプ]にある。
mouseXは,MovieClipインスタンスの(継承した)プロパティだった。ということは,インスタンスによって,その値が異なりうることを意味する。マウスポインタは,コンピュータの画面にひとつしか存在しないのに,である。
理由は,mouseXプロパティが,インスタンスの基準点から見た座標を返すためだ。つまりこの値は,マウスポインタがインスタンスの右側にあればプラスに,左側にあるとマイナスになる。地球から見て太陽が昇ったり沈んだりしている,と考えるようなものだ。つまり,DisplayObject.mouseX/DisplayObject.mouseYは,「天動説」のプロパティなのである。

