関数と変数を使う

変数とは

　「変数」とは、プログラムの実行中に、メモリに値を保存することができるデータの入れ物のようなものです。変数には数値や文字列を保存させ、その値を実行中に呼び出したり利用することができます。

　変数を使うには、まず「var」と記述して宣言を行います。次に半角スペースを入れて任意の変数名を付けます。次に=（イコール）を入れ左辺に1つの値を記述すると、変数に値を保存することができます。数値の場合はそのまま記述して（リスト8）、文字列の場合は""（ダブルコーテーション）で囲みます（リスト9）。

変数を使った位置移動

　今度は、変数を使いmyCarの位置を数値でコントロールしていきます。サンプルはこちらからダウンロード（http://www.thinkit.co.jp/images/article/81/2/8124.zip）できます（8124.zip/26.8 KB）。

　前ページのonEnterFrameは、ムービークリップmyCar内のタイムラインを再生させて、連続移動を行いましたが、この処理をメイン（シーン）のタイムライン上で行うこともできます。onEnterFrameで連続再生を行う時の注意点は、ムービークリップでonEnterFrameの再生をできるのは1つのタイムラインだけということです。サンプル2の左右移動はムービークリップmyCar内のタイムラインを再生しました（myCar.onEnterFrame）。今回の目的地移動はシーンのタイムラインを再生しています（_root.onEnterFrame）。onEnterFrameの前に付けるパスの記述で、どのタイムラインを再生するかが変わってくることを理解しましょう。

　まずあらかじめ注意点として、myCarの基準点を考えておかなければいけません。今回はイラストの左上がシンボルの基準点となるので、自動車の後部がX座標の基準になります。

　変数名「disitanceX」は、目的地「targetX」からmyCarのX位置を差し引いた「距離」になります。

　スタート地点の myCarのX位置が10pxで、目的地targetXが210pxとすると距離distanceXは、210px-10px=200pxになります。次に2行目 では、myCarのX位置に距離distanceXの割る5を代入します。これで目的値までの5分の1だけ移動します。

　onEnterFrameは連続再生なので、フレームが1回目まわる時には200px÷5=40px。目的地まで40px移動します。フレームの2回目ではすでに40px進んでいるので、今度は目的値までの距離は160pxです。2回目は160px÷5=32px。だんだん差を縮めていきます。

　このように距離に5を割った値を代入していくと、移動する値がだんだん減っていきます。この動きが目的値にゆっくり近づくイージング機能を表現できるのです。

　4つのボタンにそれぞれインスタンス名を付けます。「10pxにへ移動」に「btnA」、「210pxへ移動」に「btnB」、「410pxへ移動」に「btnC」です。それぞれのtargetXに移動させたいX座標を指定します。（リスト11）

　この方法はActionScriptを使った移動アニメーションの基本です。次回は、if文を使った条件分岐を使いこなしていきます。より実践的なスクリプトアニメーションを習得していきましょう。