ActionScript 3.0で始めるオブジェクト指向スクリプティング
第23回 クラスのデザインとループ処理
前回の第22回「MovieClipシンボルにクラスを定義する」では，MovieClipシンボルに設定するクラスEllipticMotionを定義した（図1）。シンボルに設定したクラスは，シンボルのグラフィックやタイムラインなどのアセットに関連づけられる。その結果，インスタンスは，シンボルのアセットをデータとしてもつことになる。
図1 [シンボルプロパティ]のダイアログボックスに[クラス]を設定
![図1 [シンボルプロパティ]のダイアログボックスに[クラス]を設定](http://image.gihyo.co.jp/assets/images/dev/serial/01/as3/0023/01.gif "図1 [シンボルプロパティ]のダイアログボックスに[クラス]を設定")
EllipticMotionインスタンスをタイムラインに配置すると，シンボルのグラフィックが表示され，楕円を描いて3D風にアニメーションした（図2）。もっとも，前回のEllipticMotionクラスの処理内容は，以前の第17回「3D風に回転するアニメーション」で書いたフレームアクションに，クラスとして最小限の手を加えたものに過ぎない。
図2 シンボルのグラフィックが3D風に回転のアニメーションをする
今回は，まずEllipticMotionクラスの処理について，今後の拡張まで考えてデザインを整理してみたい。その後，タイムラインに複数のインスタンスを配置するといった，繰返し処理のテクニックをご紹介しよう。
クラスのデザインを考える
クラスEllipticMotionのスクリプトには，大きく3つの修正を加える。第1に，インスタンスプロパティの整理だ。第2は，それらのプロパティの修正にメソッドを対応させ，さらにメソッド間の呼出しの構成についても手を入れたい。第3に，get/setアクセサメソッドをひと組追加する。
それでは，第1のプロパティの整理からいこう。まず，前回フレームアクションからは，つぎのようにコンストラクタメソッドの引数として，楕円軌道の中心座標やxy半径をPointインスタンスで渡した。したがって，EllipticMotionクラスでもこれらの値を数値でなく，Pointインスタンスのままプロパティとしてもつようにする。
var myCenter:Point = new Point(stage.stageWidth / 2, stage.stageHeight / 2);
var myRadius:Point = new Point(100, 50);
var _mc:EllipticMotion;
// コンストラクタの呼出し
_mc = new EllipticMotion(0, myCenter, myRadius); // 中心座標とxy半径はPointインスタンスで渡す
つぎに，EllipticMotionクラスには角度のプロパティとして，度数とラジアンが併存していた。しかし，一方の値がわかれば，他方は変換比率から直ちに導ける。そのため，プロパティは度数のみとし，ラジアンは削除する（※1）。最後に，プロパティとして宣言してあった度数からラジアンへの変換比率は，constキーワードを使って「定数」とした。この「定数」の意義については，つぎのスクリプトを見てから説明しよう。
public class EllipticMotion extends MovieClip {
private var degree:Number = 0;
// private var radian:Number = 0; // 削除
private var speed:Number = 5;
// private var degreeToRadian:Number = Math.PI / 180;
private const DEGREE_TO_RADIAN:Number = Math.PI / 180; // 定数として宣言
// private var centerX:Number;
// private var centerY:Number;
private var center:Point; // Pointクラスで宣言
// private var radiusX:Number;
// private var radiusY:Number;
private var radius:Point; // Pointクラスで宣言
// private var cos:Number = Math.cos(radian);
private var cos:Number = Math.cos(degree * DEGREE_TO_RADIAN); // 度数をラジアンに変換
// private var sin:Number = Math.sin(radian);
private var sin:Number = Math.sin(degree * DEGREE_TO_RADIAN); // 度数をラジアンに変換
さて，定数はvarでなくconstキーワードで宣言する。それ以外は，ひとつの点を除いて，プロパティと異なることろはない。その違いというのは，「定数」という名前のとおり，設定した値が変更できないことだ。円周率πはギリシャの昔から変わらない。したがって，その値を使った比率は変えないし，変えられない方がよい。そのような場合に，定数を宣言する。ちなみに，プログラミングでは，定数名はすべて大文字にする習慣がある（※2）。
const 定数名:型指定 // 定数名はすべて大文字が習慣
EllipticMotionクラスのデザインについて，変更点の第2はメソッドだった。第1のプロパティの整理にともなう修正を，先に済ませておこう。とくに難しいものはない。楕円軌道の中心座標とxy半径をPoint型のプロパティに変えたことと，ラジアン値を定数から計算することに対応させた。
public function EllipticMotion(nDegree:Number, myCenter:Point, myRadius:Point) {
degree = nDegree;
// centerX = myCenter.x;
// centerY = myCenter.y;
center = myCenter; // プロパティにPointインスタンスを設定
// radiusX = myRadius.x;
// radiusY = myRadius.y;
radius = myRadius; // プロパティにPointインスタンスを設定
addEventListener(Event.ENTER_FRAME, moveX);
addEventListener(Event.ENTER_FRAME, moveY);
addEventListener(Event.ENTER_FRAME, scale);
addEventListener(Event.ENTER_FRAME, blur);
addEventListener(Event.ENTER_FRAME, update);
}
private function moveX(eventObject:Event):void {
// x = centerX + cos * radiusX;
x = center.x + cos * radius.x; // Pointインスタンスから値を取得
}
private function moveY(eventObject:Event):void {
// y = centerY + sin * radiusY;
y = center.y + sin * radius.y; // Pointインスタンスから値を取得
}
private function update(eventObject:Event):void {
degree+=speed;
degree = (degree%360+360)%360;
// radian=degree*degreeToRadian;
var radian:Number=degree*DEGREE_TO_RADIAN; // ラジアン値を定数で計算
cos=Math.cos(radian);
sin=Math.sin(radian);
}
- ※1）
- 処理としておもに使うのは，三角関数を計算するラジアン値だ。そのため，ラジアンのプロパティを残す方が，効率としてはよいかもしれない。ただ，複数のインスタンスを等間隔で配置するときなどは度数の方が扱いやすいので，ラジアンをなくすことにした。
- ※2）
- これまで見てきたように，ActionScript 3.0の定義済みのクラスでも，Math.PIやイベント定数などはすべて大文字で定義されている。
野中文雄（のなかふみお）
ソフトウェアトレーナー，テクニカルライター，オーサリングエンジニア。上智大学法学部卒，慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で，総務・人事，企画，外資系企業担当営業などに携わる。その後，マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング，コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。
URL：http://www.FumioNonaka.com/
![ActionScript 3.0辞典 [FlashPlayer 10/9対応]](http://image.gihyo.co.jp/assets/images/cover/other/thumb/TH40_9784798119014.jpg){kind=small}
![[改訂3版]図解でよくわかる ネットワークの重要用語解説](http://image.gihyo.co.jp/assets/images/cover/2009/thumb/TH40_9784774138213.jpg){kind=small}
