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

第22回 MovieClipシンボルにクラスを定義する

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

前掲のフレームアクションで,EllipticMotionクラスのコンストラクタを呼出してインスタンスを作成しただけでは,まだStageオブジェクトを頂点とするツリー構造の表示リスト前掲図5には加えられていない。その状態では,インスタンスのDisplayObject.stageプロパティに値がなく(null),Stageインスタンスにアクセスできないのだ。

対処の方法は,いくつか考えられる。今回は, EllipticMotionクラスに宣言した楕円軌道の中心座標をもつインスタンスプロパティの値は,クラスの外つまりフレームアクションから渡すことにしよう。具体的には,楕円軌道の中心座標とxy半径の値をコンストラクタメソッドの引数とする。さらに,複数のインスタンスを生成して配置したいので,角度の初期値も引数に加えよう。

中心や半径の値は,xとyの値の組になっている。これらをばらばらに指定すると引数の数が増えてしまうし,ひと組として扱うべきものはひとつの値で指定できると便利だ。そこで,xy座標の値をひとつのインスタンスとして扱うPointクラスを利用しよう。Pointクラスのコンストラクタメソッドには,xとyの値を引数に渡す。そして,それぞれの値には,Point.xおよびPoint.yプロパティとしてアクセスすればよい。

new Point(x座標, y座標)

以上の修正をクラスEllipticMotionに加えたのが,以下のスクリプト2だ。第1に,Pointクラスの完全修飾クラス名flash.geom.Pointをimport宣言した。第2に,楕円軌道の中心座標およびxy半径を納めるプロパティ値は,コンストラクタメソッドに渡されるので,var宣言で初期値は与えない。第3に,コンストラクタが受取る角度と中心座標,およびxy半径の引数を,メソッド本体でブロパティ値に設定している。後のふたつはPointインスタンスで渡されるので,xyそれぞれの値はPoint.xおよびPoint.yプロパティとして取出した。なお,この機会にプロパティとメソッドの名前から接頭辞は除いた。

スクリプト2 EllipticMotionクラスのコンストラクタに角度/中心座標/半径を引数として渡す

// ActionScript 3.0クラス定義ファイル: EllipticMotion.as
// 回転するMovieClipシンボルの[クラス]に設定
package {
  import flash.display.MovieClip;
  import flash.events.Event;
  import flash.filters.BlurFilter;
  import flash.geom.Point;
  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 var centerX:Number;   // 初期値なし
    private var centerY:Number;   // 初期値なし
    private var radiusX:Number;   // 初期値なし
    private var radiusY:Number;   // 初期値なし
    private var cos:Number = Math.cos(radian);
    private var sin:Number = Math.sin(radian);
    public function EllipticMotion(nDegree:Number, myCenter:Point, myRadius:Point) {
      degree = nDegree;
      centerX = myCenter.x;
      centerY = myCenter.y;
      radiusX = myRadius.x;
      radiusY = myRadius.y;
      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;
    }
    private function moveY(eventObject:Event):void {
      y = centerY + sin * radiusY;
    }
    private function scale(eventObject:Event):void {
      scaleX = scaleY = getIndexZ(0.8,1);
      scaleX *= getIndexZ();
    }
    private function blur(eventObject:Event):void {
      var nBlur:Number=getIndexZ(4,0);
      var myBlur:BlurFilter=new BlurFilter(nBlur,nBlur/2);
      filters=[myBlur];
    }
    private function update(eventObject:Event):void {
      degree += speed;
      degree = (degree%360+360)%360;
      radian=degree*degreeToRadian;
      cos=Math.cos(radian);
      sin=Math.sin(radian);
    }
    private function getIndexZ(nMin:Number=-1, nMax:Number=1):Number {
      var nIndexZ:Number = (nMax-nMin)*(sin+1)/2+nMin;
      return nIndexZ;
    }
  }
}

これで,EllipticMotionクラスのコンストラクタに角度と中心座標,およびxy半径を引数で指定して,インスタンスを配置することができる。試しに,4つのインスタンスを生成し,90度間隔で回転させてみよう。フレームアクションは,つぎのようになる。

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);
addChild(_mc);
_mc = new EllipticMotion(90,myCenter,myRadius);
addChild(_mc);
_mc = new EllipticMotion(180,myCenter,myRadius);
addChild(_mc);
_mc = new EllipticMotion(270,myCenter,myRadius);
addChild(_mc);

前述のとおり,楕円軌道の中心座標とxy半径は, EllipticMotionクラスのコンストラクタにPointインスタンスで渡す。[ムービープレビュー]を確かめると,4つのインスタンスが90度間隔で配置され,楕円軌道を描いてアニメーションする図9)。前記フレームアクションでは,4つのインスタンスの生成と表示リストへの追加が,似たようなステートメントをただ羅列した処理になっている。このような繰返し処理のすっきりした書き方や,EllipticMotionクラスのさらなるリファインについては,次回に譲ろう。

図9 4つのインスタンスが動的に配置されて回転する

図9 4つのインスタンスが動的に配置されて回転する

今回解説した次のサンプルファイルがダウンロードできます。

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書