ActionScript 3.0で始めるオブジェクト指向スクリプティング

第9回 座標の天動説と地動説

この記事を読むのに必要な時間:およそ 2.5 分

今回から,MovieClipインスタンスの座標の扱いについて解説する。お題は,マウスポインタの後を追うMovieClipのフレームアクションだ。座標を考えるときは,どこから見た値なのかを意識することが大切になる。

インスタンスとマウスポインタの座標

まず,MovieClipインスタンスの座標とマウスポインタの座標にアクセスするプロパティの確認が必要だ表1)。マウスポインタの座標は,調べることができるだけで,設定はできない。

表1 インスタンスとマウスポインタの座標についてのプロパティ

プロパティ説明
mouseXマウスポインタのx座標を,ピクセル数で返す。取得のみで,設定はできない。
mouseYマウスポインタのy座標を,ピクセル数で返す。取得のみで,設定はできない。
xインスタンスのx座標を,ピクセル数で示す。
yインスタンスのy座標を,ピクセル数で示す。

確認のため[ヘルプ][MovieClipクラス][プロパティ]一覧を見ると,デフォルトではこれらのプロパティが表示されていない図1)。

図1 [ヘルプ]に表示された[MovieClipクラス][プロパティ]一覧

図1 [ヘルプ]に表示された[MovieClipクラス]の[プロパティ]一覧

しかし,表の上部に「継承されるブロパティを表示」というボタンがある(図1)。これをクリックすると,表が拡張されて,上表1の座標のプロパティも現れる図2)。

図2 [MovieClipクラス][プロパティ]一覧が拡張して表示されたxとy

図2 [MovieClipクラス]の[プロパティ]一覧が拡張して表示されたxとy

最初の[プロパティ]一覧に表示されていたのは,表の右端の「定義元」がMovieClipと記載されたものだ。実は,これらがMovieClipクラスに定義されたプロパティなのである。

[プロパティ]一覧を拡張すると,それ以外の「定義元」のプロパティも示される。x/ymouseX/mouseYプロパティの定義元には,「DisplayObject」と記されている。つまり,これらのプロパティはDisplayObjectクラスに定義されているのだ。前回まで使っていたrotationもこのDisplayObjectクラスのプロパティである。なぜそれらが,MovieClipインスタンスからアクセスできるのか。

多くのクラスは,階層構造を成している。その場合,ベースとなるクラスのプロパティやメソッド一式を引継ぎ,そこに新たなプロパティやメソッドを追加するかたちで新しいクラスが定義される。ベースとなるクラスは一般に「スーパークラス」と呼ばれ,それを拡張したいわば子どものクラスは「サブクラス」という。

DisplayObjectとMovieClipクラスは,このスーパークラスとサブクラスの関係にある※1)。だから,DisplayObjectクラスのプロパティは,MovieClipインスタンスから使えるのである。スーパークラスの機能(プロパティやメソッド)がサブクラスで使えるプログラミングの仕組みを「継承」という。

※1)

MovieClipクラスは,DisplayObjectクラスを直接継承している訳ではない。クラスは何段階でも継承することが可能なのだ。MovieClipクラスの継承は,[ヘルプ]で確認できる図3)。

図3 [MovieClipクラス]の解説に示された「継承」

図3[MovieClipクラス]の解説に示された「継承」

マウスポインタの水平方向の動きに追随させる?

ではまず,MovieClipインスタンスを,マウスポインタの水平方向の動きに追随させてみる。いきなり水平・垂直両方向の処理を書く前に,できるだけ小分けして確認しながら進めるのは,スクリプティングを効率的に行うためのコツだ。小分けすれば頭を整理しやすいし,問題が起こったときも早期発見・早期治療が可能になる。

スクリプトは,MovieClipのフレームアクションとして記述する。アニメーションの処理だから,Event.ENTER_FRAMEイベントで処理するのが定石だ。すると,つぎのようなフレームアクションでよさそうに思える図4)。

addEventListener(Event.ENTER_FRAME, xFollowMouse);
function xFollowMouse(eventObject:Event):void {
  x = mouseX;
}

図4 マウスポインタの水平方向の動きに追随させるフレームアクション

図4 マウスポインタの水平方向の動きに追随させるフレームアクション

ところが[ムービープレビュー]を確認すると,チカチカと点滅したような動きになる。ただ,マウスポインタの水平方向の動きに,反応している様子は伺える。なぜ,このような動作になるのか。ヒントは,初めに確認した[ヘルプ]にある。

mouseXは,MovieClipインスタンスの(継承した)プロパティだった。ということは,インスタンスによって,その値が異なりうることを意味する。マウスポインタは,コンピュータの画面にひとつしか存在しないのに,である。

理由は,mouseXプロパティが,インスタンスの基準点から見た座標を返すためだ。つまりこの値は,マウスポインタがインスタンスの右側にあればプラスに,左側にあるとマイナスになる。地球から見て太陽が昇ったり沈んだりしている,と考えるようなものだ。つまり,DisplayObject.mouseX/DisplayObject.mouseYは,「天動説」のプロパティなのである。

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入