Flashムービー上に表示したインスタンスを動かす――。ごくごく基本的な操作ですが，非常に多用する操作でもあります。インスタンスの位置を動かすには，二つの考え方があります。一つは，「座標」でとらえる考え方，そしてもう一つは，「行列(マトリクス)」でとらえる考え方です。今回は，基本となる，座標での考え方をご紹介します。

　インスタンスを好きな位置に配置する処理は，コンテンツの配置から，イベント処理と組み合わせたアニメーションまで，幅広く応用ができる処理です。今回はインスタンスを動かす操作にスポットを当て，どのような考え方で動かすのかを学んでみましょう（図1）。

図1●インスタンスの位置を移動する
図1●インスタンスの位置を移動する
[画像のクリックでサンプルを表示]

　Flashムービー上で，インスタンスを動かす操作は大きく分けて，「移動」「回転」「拡大・縮小」の三つの要素で考えることができます。ここではまず，インスタンスの位置を表すプロパティについて説明し，続いて上記三つの要素について解説していきましょう。

Flashムービーではy軸の値は下に向かって増えてゆく

　ActionScript3.0では，Flashムービー上に表示されているインスタンスの位置を，「xプロパティ」と「yプロパティ」で管理します（表1）。

表1●位置を管理するプロパティ
プロパティ 説明
x 横位置。基準点からの水平方向の距離
y 縦位置。基準点からの垂直方向の距離

　xがヨコ位置，yがタテ位置です。例えば，インスタンス「star」を横位置100，縦位置150の位置に移動したいのであれば，次のようにコードを記述します。 

//starの位置を変更
star.x = 100;
star.y = 150;

　すでに連載の中でも何回か使ってきたおなじみのプロパティですね。でも，今回は，この二つのプロパティについて，もう少し踏み込んで考えてみましょう。

　まず，xとyは「100」や「150」といった数値で指定するわけですが，いったい，この数値の意味するものは何なのでしょうか？　この意味を考えるには，まず，Flashムービーの「座標系」について知っておく必要があります。「座標系」とは，簡単に言うと，1点の位置を表すためのルールです。

　座標系の例としてすぐに思いつくのは「グラフ」ですね。皆さんも，算数や数学の授業で，こんなグラフを見たり，作成したことがあるかと思います（図2）。

図2●算数や数学で良く使ったグラフ
図2●算数や数学で良く使ったグラフ

　こうしたグラフは，横方向にx軸，縦方向にy軸を取りましたね。そして，基準点となる(x,y)=(0,0)の位置を定めています。x軸の値は，基準点より右方向へ進むと増加し，左方向へ進むと減少します。y軸に関しては，基準点より上方向へ行くほど増加し，下方向へ行くほど減少します。

　この座標系で，座標(10,15)と言うと，図2の★マークの位置になります。なんだか懐かしいですね。基準点，軸，そして増減の方向があるので，上記のような座標で，グラフ上の1点の位置がきっちりとわかります。

　Flashムービーでも，インスタンスの位置を管理するのに，このグラフとよく似た座標系の仕組みを使用しています。ただしFlashムービーの場合，ちょっと違うのは，y軸の増減の方向です。

　Flashムービーでは，図3のような座標系でインスタンスの位置を管理しています。x軸方向は，基準点より右方向へ進むと増加し，左方向へ進むと減少します。そして，y軸に関しては，基準点より下方向へ行くほど増加し，上方向へ行くほど減少します。図2とは逆向きですね。

図3●Flashムービーでの座標系
図3●Flashムービーでの座標系

　数学等で使っていたグラフのイメージでは「yが大きくなる」というのは，「グラフの上方向に向かう」という見た目になりますが，Flashムービーの場合は「yが大きくなる」というのは，「グラフの下方向に向かう」という見た目になります。

　この「y軸が逆向き」ということをよく覚えておいてください。このことをうっかり忘れていると，回転の操作の時に，ちょっと混乱してしまうことがあります。

　Flashの座標系で，先ほどと同じ座標(10,15)は，図3の★のマークの位置になります。このように，Flashのx,yプロパティは，基準点を元に，右に行くほど増加するx座標と，下に行くほど増加するy座標で位置情報を管理しています。上下だけひっくり返っているわけですね。