Adobe Flash CS3 Professional ActionScript 3.0

□09 MovieClipシンボルにクラスを定義する

• 09-01 MovieClipシンボルに設定するクラス定義
• 09-02 クラスの中身を整理する
• 09-03 インスタンスを動的に配置する
• 09-04 複数のインスタンスを配置する ー forステートメント
• 09-05 重ね順と遠近法


• Column 09 [ライブラリ]アイテムから動的にインスタンスをつくる


• PNG画像: ActionScript30_09.zip(約6.0MB)

○09-01 MovieClipシンボルに設定するクラス定義
07「三角関数を使って楕円軌道のアニメーションを作成する」では、楕円軌道に沿って3D風にアニメーションするフレームアクションを作成しました。その完成させた前掲スクリプト07-005(図09-001)を、クラスとして定義し直したうえで、アニメーションさせるMovieClipシンボルに設定してみます。

●MovieClipシンボルに定義するクラスのスタイル
MovieClipシンボルに設定するクラスは、基本的には以下のような記述がベースになります。(1)import宣言の存在と(2)クラスのpublic属性の指定、および(3)extendsキーワードによるMovieClipクラスの継承が特徴です。クラス定義本体については、前章08「カスタムクラスを定義する」でご説明したとおりです。

【MovieClipシンボルに設定するクラス定義の基本】
// ActionScript 3.0クラス定義ファイル: クラス名.as
package [パッケージ名]{
  import flash.display.MovieClip;
  // 他のimport宣言
  public class クラス名 extends MovieClip {
    // クラス定義の本体
  }
}

import宣言については、継承の話をしてから触れることにします。そこでMovieClipシンボルに定義するクラスに必要な第1は、クラスをpublic属性で指定することです。MovieClipインスタンスは、配置されたタイムライン上で操作できる必要があります。つまり、外部からのアクセスを受入れるpublicなクラスのインスタンスでなければならないのです(08-01「空のクラスをつくる」「タイムラインから呼出せるクラス」参照)。

第2に、MovieClipクラスを継承することです。継承により、「スーバークラスのプロパティやメソッドは、すべてサブクラスに受継がれます」(Word 04-001「継承」参照)。継承を行うには、クラス名に続けてextends定義キーワードを記述し、その後に継承すべきスーパークラスを指定します。

MovieClipシンボルにカスタムクラスを設定すると、そのインスタンスはカスタムクラスのオブジェクトになります。もし継承をしなかったら、MovieClipのプロパティやメソッドが一切使えなくなります。DisplayObjectのサブクラスでもなくなりますから、DisplayObject.xやDisplayObject.yプロパティの操作はできず、座標が動かせません。同じようにEventDispatcherクラスのaddEventListener()メソッドも呼出せなくなり、リスナー関数がまったく登録できなくなってしまいます。

テスト用に、MovieClipクラスを継承したコンストラクタだけのクラスMyClassを、以下のように定義してみます。コンストラクタ内では確認のために、プロパティDisplayObject.xとDisplayObject.y、並びにメソッドEventDispatcher.addEventListenerをtrace()関数で[出力]します。なお、trace()関数の引数に渡すEventDispatcher.addEventListenerはメソッドそのものを参照しますので、呼出しの括弧()はつけないことにご注意ください。また、このクラスはMovieClipシンボルに設定する必要はありません。

// ActionScript 3.0クラス定義ファイル: MyClass.as
package {
  import flash.display.MovieClip;
  public class MyClass extends MovieClip {
    public function MyClass() {
      trace(x, y);
      trace(addEventListener);
    }
  }
}

FLAファイルのフレームアクションでクラスMyClassのコンストラクタを呼出せば、[ムービープレビュー]でプロパティDisplayObject.xとDisplayObject.yの初期値0と、メソッドEventDispatcher.addEventListenerの参照が[出力]パネルに表示されます(図09-002)。メソッドはActionScript上は関数(function)として扱われますですので、[出力]は「function Function() {}」となります。

// フレームアクション
var myObject:MyClass = new MyClass();
// [出力]パネルの表示
0 0
function Function() {}

試しにMovieClipクラスを継承するextends定義キーワードの記述をコメントアウトすると、MyClassはプロパティもメソッドもない空のクラスになります。したがって、同じようにコンストラクタを呼出すと、プロパティやメソッドが未定義である旨の[コンパイルエラー]が表示されることになります(図09-003)。

ですから、カスタムクラスがMovieClipクラスおよびそのスーパークラスのプロパティやメソッドを使うためには、MovieClipクラスを継承しなければならないのです。

さらに、継承するMovieClipクラスを指定するには、第3にimport宣言が必要になります。前章08(Tips 08-002「パッケージはクラスをグループ分けする仕組み」参照)に述べたとおり、ActionScript 3.0の多くのクラスは、パッケージに属しています。そして、MovieClipクラスのパッケージは、flash.displayです(図09-002)。

パッケージに含まれるクラスは、正式な名前がつぎのような記述で表されます。

パッケージ名.クラス名

つまり、MovieClipクラスの「フルネーム」は、flash.display.MovieClipなのです。したがって、カスタムクラスにMovieClipクラスの継承を指定するとき、以下のように記述することもできます。なお、クラスのフルネームは、「完全修飾名」と呼ばれます。

public class クラス名 extends flash.display.MovieClip {

また、MovieClip型で指定するプロパティやローカル変数は、同じ書き方ではつぎのように宣言することになります。

var 識別子:flash.display.MovieClip;

しかし、クラス定義で使うMovieClipクラスの指定に、いちいちflash.display.MovieClipと記述するのは手間でしょう。しかも、パッケージに属するクラスは、MovieClipクラスだけではありません。それらすべてにフルネームを書いていたのでは、煩雑なだけでなく、スクリプトも読みにくくなります。

そこでActionScript 3.0では、カスタムクラス定義の中でパッケージに含まれるクラスを使う場合、その完全修飾名は冒頭にimportディレクティブ(指示子ともいいます)を用いて1度だけ宣言すればよいとされます。完全修飾名をimport宣言されたクラスは、そのスクリプト内では単に(パッケージを省いた)クラス名のみ記述するだけで、パッケージのクラスが正しく読込まれるということです。

たとえば、作曲家のバッハについてWikipediaで調べると(<http://ja.wikipedia.org/wiki/ヨハン・ゼバスティアン・バッハ>)、つぎのような説明で始まります。

ヨハン・ゼバスティアン・バッハ(以下バッハとする)はアイゼナハの町楽師ヨハン・アンブロジウスの末子として生まれた。

「ヨハン・ゼバスティアン・バッハ(以下バッハとする)」というのは、仮にjohann.sebastian.Bachというクラスがあったとしたら、つぎのimport宣言と同じ意味になります。

import johann.sebastian.Bach;   // 以下Bachとする

作曲家のバッハについてWikipediaの冒頭説明以降はフルネームを書く必要がないのと同じように、import宣言後はクラスをBachと記述するだけで指定できるからです。

なお、同じパッケージ内にあるすべてのクラスは、ワイルドカード*を使って指定することができます。たとえば、flash.displayパッケージには、MovieClipクラスのほかDisplayObjectやInteractiveObjectその他多くのクラスが含まれています。つぎの1行のステートメントで、それらすべてのクラスをimport宣言したことになります。

import flash.display.*;

ところで、前掲スクリプト07-005(図09-001)を始め、これまで作成してきたフレームアクションではimportディレクティブはとくに用いることなく、MovieClipおよびそのスーパークラスのプロパティやメソッドを使うことができました。フレームアクションには、import宣言は要らないのでしょうか。

実は、フレームアクションにもimport宣言は必要です。ただし、ActionScript 3.0のおもな定義済みクラスについては、私たちが直接記述しなくてもよいのです。なぜなら、Flash CS3が、それらのクラスを自動的にimport宣言してくれているからです。

Tips 09-002■タイムラインで自動的にimport宣言されるクラス タイムラインに対して自動的にimport宣言されるクラスは、Flashアプリケーションの中にXMLファイルで指定されています。具体的には、Adobe Flash CS3アプリケーションフォルダ内のConfigration/ActionScript 3.0/implicitImports.xmlにその記述があります(図09-005)。 XMLファイルimplicitImports.xmlには、flash.displayを始め、ActionScript 3.0に定義済みのクラスのパッケージのパスが記載されています。これらのパッケージが、コンパイル(SWF書出し)時に、ファイル名が示すとおり黙示的(implicit)にimport宣言されます。 図09-005■implicitImports.xmlの内容 XMLファイルに指定されたパッケージが、コンパイル時に自動的にimport宣言される。

すでに見たとおり、ActionScript 3.0クラス定義ファイルには、この自動的なimport宣言は適用されませんので、importディレクティブを用いて明示的に記述する必要があります。また、フレームアクションでも、自分や他の人が定義してパッケージ化したクラスを使うときには、やはりimport宣言をしなければなりません。そこで、以降はフレームアクションの場合にも、パッケージを意識するために、import宣言を記述することがあります。

●フレームアクションを修正してMovieClipシンボルに設定するクラスとして定義する
それでは、前掲スクリプト07-005(図09-001)を、MovieClipシンボルに設定するクラスとして定義してみましょう。クラス名は、EllipticMotionとします(スクリプト09-001)。

すでに「MovieClipシンボルに定義するクラスのスタイル」で述べたおり、第1にクラスはpublic属性で指定します。第2に、extends定義キーワードを用いて、MovieClipクラスを継承します。第3は、import宣言です。継承するMovieClipクラスのほか、イベントを定義するEventクラスおよびぼかしフィルタを設定するBlurFilterクラスもパッケージに属しますので、importする必要があります。

クラスEllipticMotionに定義したすべてのプロパティと、コンストラクタを除くすべてのメソッドには、アクセス制御の属性としてprivateを指定しました。また、イベントリスナーを登録する(EventDispatcher.addEventListener()メソッド呼出しの)ステートメントは、コンストラクタメソッド内に記述しています。

角度の度数をラジアンに変換する比率(Math.PI/180)を格納するNumber型の変数(DEGREE_TO_RADIAN)には、varでなくconstという新しいキーワードが指定されています。これは「定数」の宣言になります。定数も、値を格納する変数であることは、var宣言したプロパティと同じです。ただし、定数はその名前のとおり、数値が定まっており、1度設定した値は変更できません。

たとえば、以下のフレームアクションのようにconst宣言した定数に値を設定したうえで、その定数に別の値を代入しようとすると、「定数として指定した変数への代入が無効」であるという[コンパイルエラー]が表示されます(図09-006)。

// フレームアクション
const DEGREE_TO_RADIAN:Number = Math.PI/180;
DEGREE_TO_RADIAN = 0;   // コンパイルエラー

なお、前述(Tips 02-010「小文字で始めない識別子」)のとおり、定数には識別子としてすべて大文字を用いるのが一般的です。そのため、上記スクリプト09-001でも定数名を"DEGREE_TO_RADIAN"と、すべて大文字にしました。

●MovieClipシンボルにクラスを設定する
楕円軌道に沿って3D風にアニメーションさせるスクリプトがMovieClipを継承するクラスEllipticMotion(スクリプト09-001)として定義できましたので、これをMovieClipシンボルに設定しましょう。

[ライブラリ]パネルでMovieClipシンボルを選んで、[リンケージプロパティ]ダイアログボックスを開きます([ライブラリ]のオプションポップアップメニューまたはシンボルを右クリックして[リンケージ])。そして、[リンケージ]の[ActionScriptに書き出し]をチェックしたうえで、設定するクラス名EllipticMotionを[クラス]のフィールドに入力します(図09-007)。なお、[最初のフレームに書き出し]がデフォルトで選択されますので、この設定は変えないでください(後述参照 )。

[リンケージプロパティ]ダイアログボックスで[クラス]の設定ができたら、[ムービープレビュー]で動作を確かめます。EllipticMotionクラスを設定したMovieClipインスタンスは、スクリプト07-005をフレームアクションに記述したときと同じく、予めステージに配置しておく必要があります。クラスEllipticMotionの定義と、そのMovieClipシンボルへの設定が正しくできていれば、フレームアクション(スクリプト07-005)の場合とまったく同じように、インスタンスが楕円軌道に沿って3D風にアニメーションします(図09-008)。

なお、[リンケージプロパティ]ダイアログボックスで[クラス]にEllipticMotionを設定したMovieClipシンボルは、ActionScriptの観点からはEllipticMotionクラスのシンボルということになります。したがって、解説中ではこのシンボルのインスタンスをEllipticMotionインスタンスと呼ぶことがあります。ただ、とくにオーサリング時には、[ライブラリ]パネル内のシンボルは外観がMovieClipのまま変わりません。また、MovieClipはクラスEllipticMotionのスーパークラスですので、EllipticMotionクラスを設定したMovieClipシンボルという表現も用います。

[リンケージプロパティ]ダイアログボックスのオプション[ActionScriptに書き出し](図09-009)は、英語版の表記が"Export for ActionScript"で、「ActionScript用に書出し」することを意味します。それは第1に、[リンケージプロパティ]ダイアログボックスで指定した[クラス]などのAcrionScript用の設定を、シンボルのデータとともにSWFファイルに書出すことを示します。

そして第2に、ActionScriptで使えるように、シンボルのインスタンスがフレームに配置されていなくても、必ずSWFファイルとして書出すという指定でもあります。

後述するように、ActionScriptを用いれば、シンボルのインスタンスを予めステージに配置することなく、動的に作成することができます。しかし、アニメーションツールとしてのFlashは、ファイルサイズを最適化するため、実際にタイムラインで使われたシンボルのデータのみをSWFに書き出す仕様になっています。[ActionScriptに書き出し]のオプションを選択すると、インスタンスがフレームで使われているかどうかを問わず、SWFファイルへの書出しが行われることになるのです。

[ActionScriptに書き出し]をチェックして選択すると、デフォルトで[最初のフレームに書き出し]が選ばれます。これはシンボルが、メインタイムラインの第1フレームで使われるデータとして、SWFファイルに書出されることを意味します。逆にいえば、Flashコンテンツ(SWF)の第1フレームが表示される前に、シンボルのデータはダウンロードされるのです。つまり、最初のフレームが表示された瞬間に、すでにシンボルのデータはActionScriptで使える準備が整っていることになります。

○09-02 クラスの中身を整理する
前節で定義したクラスEllipticMotion(スクリプト09-001)は、フレームアクションに対してMovieClipシンボルに設定するクラスとしての最低限の修正を施したものです。このクラスには、この後さらに拡張を加えていく予定です。それに先立ち、クラスEllipticMotionのプロパティやメソッドを少し整理しておきましょう。

●メンバー名とプロパティの整理
まず第1に、メンバー名つまりプロパティやメソッドの識別子は、接頭辞を除きます。この作業は必須ではありません。しかし、クラスを汎用化して、自分以外の人が利用する場合も考えると、ActionScript定義済みクラスのプロパティやメソッドに準じた名前を用いた方がよいでしょう。

第2に、角度を保持するプロパティは、度数かラジアンのどちらか一方があれば、定数DEGREE_TO_RADIANを使っていつでも値が得られます。そこで、位置決めのしやすい度数のプロパティをdegreeとして残し、ラジアン値のプロパティnRadianは削除することにします。この変更にともなうスクリプト09-001の修正部分は、つぎのとおりです(なお、識別子のみの変更箇所は割愛します)。

// private var nRadian:Number = 0;
// ...[中略]...
// private var nCos:Number = Math.cos(nRadian);
// private var nSin:Number = Math.sin(nRadian);
private var cos:Number = Math.cos(degree*DEGREE_TO_RADIAN);
private var sin:Number = Math.sin(degree*DEGREE_TO_RADIAN);
// ...[中略]...
private function update(eventObject:Event):void {
  degree += speed;
  degree = (degree%360+360)%360;
  // nRadian = degree*DEGREE_TO_RADIAN;
  var nRadian:Number = degree*DEGREE_TO_RADIAN;
  cos = Math.cos(nRadian);
  sin = Math.sin(nRadian);
}

スクリプト09-001の変更されたステートメントは、コメントアウトして示しました。修正内容としては、cosとsinの初期値が上述のとおりプロパティdegreeに定数DEGREE_TO_RADIANを掛合わせて求められていることと、メソッドupdate()内でラジアン値をプロパティでなくローカル変数に納めたことです。

●Pointクラスでxyの値を管理する
整理点の第3は、楕円軌道の中心座標やx軸y軸の半径など、xとyの値を一緒に管理するということです。Pointクラスは、xとyの値をプロパティとして持ち、簡単なベクトル演算も行うことができます。パッケージは、幾何学(geometry)的な処理を行うクラスが納められたflash.geomに属します。

Pointインスタンスは、ふたつの引数として(x, y)座標を渡して作成します。各座標値は、それぞれPoint.xおよびPoint.yプロパティにより、取得および設定することができます(Word 09-002「Pointコンストラクタ」参照)。

楕円軌道の中心座標およびx軸とy軸方向の半径をPointインスタンスで扱うと、以下のような修正が必要になります。プロパティ名は、それぞれcenterとradiusにしました。

import flash.geom.Point;
public class EllipticMotion extends MovieClip {
  // ...[中略]...
  // private var nCenterX:Number = stage.stageWidth/2;
  // private var nCenterY:Number = stage.stageHeight/2;
  private var center:Point = new Point(stage.stageWidth/2, stage.stageHeight/2);
  // private var nRadiusX:Number = 100;
  // private var nRadiusY:Number = 50;
  private var radius:Point = new Point(100, 50);
  // ...[中略]...
  private function moveX(eventObject:Event):void {
    // x = nCenterX+nCos*nRadiusX;
    x = center.x+cos*radius.x;
  }
  private function moveY(eventObject:Event):void {
    // y = nCenterY+nSin*nRadiusY;
    y = center.y+sin*radius.y;
  }

数値で設定していた各(x, y)座標値は、Point()コンストラクタに引数として渡すことにより、Pointインスタンスのプロパティ値になります。したがって、各座標の数値が必要なときは、Point.xまたはPoint.yプロパティにより取出します。

以上3点の修正を前掲スクリプト09-001に加えたのが、以下のEllipticMotionクラス(スクリプト09-002)です。プロパティやメソッドなどの内部的な扱い方を整理しただけで、動作は変えていません。したがって、[ムービープレビュー]を見れば、前のスクリプト09-001と同じアニメーションになります。

●メソッドの整理
プロパティに続いて、メソッドも少し整理しましょう。第1は、リスナー関数をまとめることです。前述(Tips 07-002「リスナー関数の利点」)のとおり、複数のリスナー関数をそれぞれ同じイベントに登録すると、それらの組換えがたやすく行えます。しかし、今回はこの後、複数のインスタンスを配置して、それらの連携したアニメーションに発展させる予定です。そうなると、アニメーションを構成するそれぞれのメソッド(moveX()/moveY()/scale()/blur()/update())は、まとめて扱う方が都合はよいといえます。

そこで、新たにメソッドrotate()を定義して、その中からアニメーションの各メソッド(moveX()/moveY()/scale()/blur()/update())を呼出すことにします。その際、とくに各メソッドに渡すべき引数はありません。しかし、これらのメソッドはリスナー関数だったために、すべてイベントオブジェクトが引数として指定されています。引数のある関数(function)を、引数なしに呼出せばエラーになってしまいます。そこで、これらのメソッドに宣言されたイベントオブジェクトの引数は、すべて削除します。前掲スクリプト09-002に対する修正箇所は、つぎのとおりです。

public function EllipticMotion() {
  /*
  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);
  */
  addEventListener(Event.ENTER_FRAME, rotate);
}
private function rotate(eventObject:Event):void {
  update();
  moveX();
  moveY();
  scale();
  blur();
}
// private function moveX(eventObject:Event):void {
private function moveX():void {
  // ...[中略]...
// private function moveY(eventObject:Event):void {
private function moveY():void {
  // ...[中略]...
// private function update(eventObject:Event):void {
private function update():void {
  // ...[中略]...
// private function scale(eventObject:Event):void {
private function scale():void {
  // ...[中略]...
// private function blur(eventObject:Event):void {
private function blur():void {

メソッドを整理する第2の点として、度数の角度を保持するプロパティdegreeはget/setアクセサメソッドとして定義することにします。角度に連動して値が設定されるsinおよびcosは、角度のsetアクセサメソッド内で設定してしまいます。すると、元のクラスEllipticMotion(スクリプト09-002)のメソッドupdateの処理が、基本的に角度のsetアクセサメソッドに移行できそうです。

getおよびsetアクセサメソッドの名前は、改めてdegreeとしましょう。そして、内部的に用いるprivateな角度のプロパティは、_degreeとして宣言し直します。すると、スクリプト09-002のクラスEllipticMotionには、さらにつぎのような修正を加えることになります。

// private var degree:Number = 0;
private var _degree:Number = 0;
// ...[中略]...
// private var cos:Number = Math.cos(degree*DEGREE_TO_RADIAN);
// private var sin:Number = Math.sin(degree*DEGREE_TO_RADIAN);
private var cos:Number = Math.cos(_degree*DEGREE_TO_RADIAN);
private var sin:Number = Math.sin(_degree*DEGREE_TO_RADIAN);
// ...[中略]...
private function get degree():Number {
  return _degree;
}
// private function update():void {
private function set degree(nDegree:Number):void {
  // degree += speed;
  // degree = (degree%360+360)%360;
  _degree = (nDegree%360+360)%360;
  // var nRadian:Number = degree*DEGREE_TO_RADIAN;
  var nRadian:Number = _degree*DEGREE_TO_RADIAN;
  cos = Math.cos(nRadian);
  sin = Math.sin(nRadian);
}
private function rotate(eventObject:Event):void {
  // update();
  degree += speed;
  moveX();
  moveY();
  scale();
  blur();
}

以上2点の修正を前掲スクリプト09-002に加えると、新たなクラスEllipticMotionはつぎのように定義されます(スクリプト09-003)。

上記のクラスEllipticMotion(スクリプト09-003)には、さらにメソッドsetRotation()が新たに加えられています。処理内容は、元のメソッドrotate()に記述されていた4つのメソッド(moveX()/moveY()/scale()/blur())の呼出しです(図09-010)。これら4つのメソッドは、現在設定されている角度(_degreeプロパティの値)にもとづいて、楕円軌道上に配置する処理を行っています。

メソッドsetRotation()を別に定義することにより、メソッドrotate()の処理は(1)角度の加算(setアクセサメソッドdegree()の呼出し)と(2)楕円軌道上の配置のふたつに整理することができました。

そして、メソッドsetRotation()は、クラスEllipticMotionのコンストラクタからも呼出しています(スクリプト09-003および図09-010)。この呼出しがなかったとき(スクリプト09-002)は、最初のDisplayObject.enterFrameイベントが発生してリスナー関数rotate()が呼ばれるまで、インスタンスは楕円軌道上に配置されませんでした。そのため、[ムービープレビュー]で見ると、初めに一瞬予めステージに配置されたインスタンスが表示されていました。コンストラクタからsetRotation()メソッドを呼出すことにより、インスタンスは楕円軌道上に置かれた状態で表示されるようになります。

○09-03 インスタンスを動的に配置する
カスタムクラスを設定したMovieClipシンボルについて、インスタンスは予めステージに置かず、スクリプトで動的に作成して、配置してみましょう。

●シンプルに試す
まずは、コンストラクタだけのごくシンプルなクラスMyClassを、以下のように定義します。そのうえで、クラスMyClassは、MovieClipシンボルに[クラス]として設定します(図09-011)。

// ActionScript 3.0クラス定義ファイル: MyClass.as
package {
  import flash.display.MovieClip;
  public class MyClass extends MovieClip {
    public function MyClass() {
    }
  }
}

クラスMyClassを設定したMovieClipシンボルのインスタンスは、原則どおり、コンストラクタを呼出して作成します。以下のフレームアクションをMyClass.asと同階層のFLAファイルに記述すると、生成されたインスタンスを[出力]パネルで確認できます。ただし、ステージにはインスタンスは表示されません(図09-012)。

// フレームアクション
var my_mc:MyClass = new MyClass();
trace(my_mc);

第6章で、Flash Playerの表示階層は、Stageオブジェクトを頂点とするツリー構造だと説明しました(06-01「キーイベントを受取る」)。このツリー構造でインスタンスを管理する仕組みは、「表示(ディスプレイ)リスト」と呼ばれます。そして、表示リストに加えられたインスタンスが、ツリー構造に従ってFlash Playerの画面に表示されるのです。

コンストラクタでインスタンスを作成しただけでは、表示リストには加わりません。親となるインスタンスに対してDisplayObjectContainer.addChild()メソッドを呼出し、表示リストに加えたいインスタンスを引数として渡す必要があります。上記フレームアクションにこのDisplayObjectContainer.addChild()メソッド呼出しのステートメントを加えれば、インスタンスをステージ上に表示することができます。

親インスタンス.addChild(子インスタンス)

表示リストに加えられた子のインスタンスは、親インスタンスの座標(0, 0)に配置されます。したがって、クラスMyClassのインスタンスをメインタイムラインの子として加え、ステージ中央に配置するには、メインタイムラインに記述した上記フレームアクションをつぎのように修正します(インスタンスの生成を確認するためのtrace()関数のステートメントは除きました)。

// フレームアクション
var my_mc:MyClass = new MyClass();
addChild(my_mc);
my_mc.x = stage.stageWidth/2;
my_mc.y = stage.stageHeight/2;

[ムービープレビュー]を確認すると、クラスMyClassを設定したMovieClipシンボルのインスタンスがステージ中央に表示されます。MyClassインスタンスは、DisplayObjectContainer.addChild()メソッドでメインタイムラインの子として加えられたことによりステージ上に描画され、その座標がステージ中央に設定されたからです。

●DisplayObjectContainer.addChild()メソッド
改めてDisplayObjectContainer.addChild()メソッドについて、確認してみましょう。シンタックスおよび処理内容は、下記Word 09-003に示すとおりです。

ステージ上に表示できるのは、DisplayObjectおよびそのサブクラスのインスタンスです。DisplayObjectのサブクラスには、MovieClipのほかTextFieldやボタンのSimpleButtonクラスなど、多くのクラスがあります。

しかし、自分が親となって、子のインスタンスを持てるのは、その中の一部のクラスです。その機能を備えるのが、DisplayObjectContainerクラスになります。DisplayObjectContainerクラスも、もちろんステージに表示できますので、DisplayObjectクラスを継承します(図09-014)。

DisplayObjectContainerクラスは、子の表示リストを持ち、表示リストや子インスタンスを操作するためのプロパティとメソッドを備えています。これまでご紹介した中では、まずMovieClipクラスがDisplayObjectContainerのサブクラスです。メインタイムラインは、すでにご説明したとおり、MovieClipインスタンスです。それから、StageクラスもDisplayObjectContainerクラスを継承します(図09-015)。

DisplayObjectContainerを継承するクラスは、MovieClipやStageクラス以外にもいくつかあります。それは、後の章で一部ご紹介します。

DisplayObjectContainerインスタンスが保持する子インスタンスのリストは、配列と似た仕組みで管理されます。子インスタンスには、0から始まる整数の連番が与えられ、値が大きいほど前面に配置されます。子リストを操作するためのプロパティやメソッドには、たとえば下表09-001のようなものがあります。

なお、表09-001に掲げたのはDisplayObjectContainerクラスのプロパティとメソッドの一部です。他のプロパティとメソッドや各プロパティ・メソッドの内容について詳しくは、[ヘルプ]の[ActionScript 3.0コンポーネントリファレンスガイド]のDisplayObjectContainerクラスの項をお読みください。

●デバッグは犯罪の捜査と同じ
ここで、前節09-02「クラスの中身を整理する」で作成したクラスEllipticMotion(スクリプト09-003)に戻ります。このクラスの設定されたMovieClipインスタンスをステージから削除し、フレームアクションでインスタンスを動的に作成してみましょう。

処理は基本的に、前掲MyClassをMovieClipシンボルに設定して、インスタンスをステージに配置した場合のスクリプト(図09-013)と同じでよいはずです。インスタンスの座標設定は、クラスEllipticMotionのsetRotation()メソッドで行っていますので、フレームアクションには必要ありません。すると、2行のステートメントで足りそうです(図09-016)。

// フレームアクション
var my_mc:EllipticMotion = new EllipticMotion();
addChild(my_mc);

ところが、[ムービープレビュー]で確認するとランタイムエラーが表示されます(図09-016)。しかも、今回のエラーは、やっかいなことに、発生した具体的なステートメントなどの情報が[コンパイルエラー]パネルに示されません。つまり、クラス定義のどこでエラーが起こったのか、ほとんど手がかりがないということです。

エラーがどこでなぜ発生したのかを探る「デバッグ」は、刑事ドラマの犯罪捜査と似た手順を踏みます(表09-002。なお、F-site「トラブルの『捜査手順』」<http://f-site.org/articles/2004/10/05174315.html>参照)。

まず第1に、問題の特定です。エラーが発生する場合には、何が具体的な問題かは、比較的把握しやすいでしょう。しかし、ひとつの原因から複数のエラーが示されることもあります。そうしたときは、その内のどれが主犯つまり発端なのかを切り分けなければなりません。

さらに、エラーが起こるのではなく、意図しない動作になる場合には、どのような結果が生じているのかを、詳しく見極める必要があります。たとえば、プロパティや変数の値、あるいは演算結果に問題があると推測されるときは、極端な値を与えてみたり、処理を単純化してみるなどして、動作の変化を確認します。

今回はエラーがひとつだけ発生し、つぎのようなメッセージが表示されました。

TypeError: Error #1009: nullのオブジェクト参照のプロパティまたはメソッドにアクセスすることはできません。

このエラー#1009の内容は、[ヘルプ]の[ActionScript 3.0コンポーネントリファレンスガイド] > [付録] > [ランタイムエラー]に説明されています。日本語が少しわかりにくいので、英語版のドキュメントから邦訳すると、つぎのとおりです。

オブジェクト(の参照)がnullと評価されると、プロパティは持てません。このエラーは、予期できない(しかし有効とはされる)状況で起こりえます。

nullは、オブジェクトが存在しないことを示す特別な値です(Word 09-004)。したがって上記の説明は、オブジェクトの参照つまりプロパティや変数に何らかの理由でオブジェクトが設定されていないにも拘らず、オブジェクトがある前提でそのプロパティやメソッドにアクセスしていることを示唆します。

エラー「捜査」の第2は、問題が処理のどの時点で発生しているのかを絞り込むことです。この点では、残念ながら[コンパイルエラー]パネルに該当のステートメントなどの情報が表示されていないため、自力で調査しなければなりません。このときの指針は、できるかぎり問題をシンプルにすることです。

フレームアクションには、2行のステートメントが記述されています。まずは、そのどちらでエラーが起こっているのかを確かめます。第2ステートメントをコメントアウトしても、同じランタイムエラーが生じます。したがって、クラスEllipticMotionのコンストラクタを呼出したときに、問題が発生していると推測できます。

さらにEllipticMotionのクラス定義を見ると、コンストラクタからふたつのメソッドを呼出しています。この2行もコメントアウトすれば、問題がコンストラクタを呼出す初期化時にあるのか、コンストラクタからのメソッドの呼出しが原因なのかを絞り込めます。念のため、クラスEllipticMotionのコンストラクタ以外のメソッドも、すべてコメントアウトしておきます(図09-020)。

すると、それでも同じエラーが発生することを確認できます。メソッドは空のコンストラクタ以外、すべてコメントアウトされています。したがって、インスタンスの初期化時に問題が生じていると推測できます。

エラー「捜査」の第3は、アリバイを洗うことです。しかし、デバッグが犯罪の捜査とひとつ大きく違うのは、容疑者となる処理をひとつひとつ外して、結果が同じように起こるかどうかが試せることです。もちろん犯罪の取調べのように、怪しいプロパティや変数などがあれば、trace()関数でその値を確かめることもできます。

すでにコンストラクタは空ですので、プロパティおよびimport宣言をひとつひとつコメントアウトして結果を確認します。すると、中心座標のPointインスタンスを設定するプロパティcenterの宣言が、エラーの原因らしいと突き止められます(図09-021)。

このステートメントでは、Pointクラスのコンストラクタを呼出し、DisplayObject.stageにアクセスしてそのプロパティ値から計算した座標値を引数として渡しています。このふたつの処理のどちらが原因かを絞り込むには、DisplayObject.stageは使わず、コンストラクタに別の値を渡してみればよいでしょう。

たとえば、プロパティcenterのvar宣言を以下のように修正して、Pointコンストラクタの引数に直接数値を指定してみます。すると、ランタイムエラーは発生しません。ここで、DisplayObject.stageプロパティが重要参考人という結論に達します。

private var center:Point = new Point(120, 90);

さて、するとエラー「捜査」の最後の第4として、問題がどのように発生し、その理由は何なのかを探ることになります。とろこで、前に試したシンプルなクラスMyClassのインスタンスをステージ中央に配置したとき(図09-013)には、今回のようなエラーは発生しませんでした。このときのフレームアクションでも、ステージ中央の座標を計算するため、DisplayObject.stageプロパティを使っていました。クラスMyClassとEllipticMotionとの違いは何なのでしょう。

この段階になると、ヘルプその他のドキュメントで問題のDisplayObject.stageプロパティについて調べる必要があり、場合によってはネットで検索してみることも有効です。しかしここではあえて、ふたつのクラスMyClassとEllipticMotionを、もう少し詳しく比べてみることにします。

DisplayObject.stageプロパティへのアクセスについて、クラスMyClassがEllipticMotionと明らかに違うのは、クラス定義内では何のプロパティも操作しておらず、フレームアクションでインスタンスの座標を設定する際にプロパティ値を取得しただけだということです(図09-022)。

そこで試みに、クラスMyClassの定義を以下のように修正し、コンストラクタの中でDisplayObject.stageプロパティを取得して、ステージ中央の座標にインスタンスを設定します。なお、クラスEllipticMotionでは、インスタンスプロパティの宣言時にDisplayObject.stageプロパティの値を取得していますので、アクセスのタイミングは厳密には少し異なります。

// ActionScript 3.0クラス定義ファイル: MyClass.as
package {
  import flash.display.MovieClip;
  public class MyClass extends MovieClip {
    public function MyClass() {
      x = stage.stageWidth/2;
      y = stage.stageHeight/2;
    }
  }
}

上記のように修正したクラスMyClassのコンストラクタを、フレームアクションから呼出すと、#1009のランタイムエラーが再現します(図09-023)。デバッグでは、このようにできるかぎりシンプルなスクリプトで問題を再現することがとても大切です。この結果により、原因はDisplayObject.stageプロパティで、クラス内からアクセスしていることが問題と関わっているらしいと推測できます。

少し慎重ないいまわしを選びました。というのは、DisplayObject.stageプロパティにはクラス内からアクセスできないようだ、と結論づけるのは早計だからです。なぜエラーが起こったかの理由は、まだ明らかではありません。ですから、クラス内からアクセスする方法はあるかもしれません。また、クラス外からアクセスすればエラーが発生しないという保障もないのです。

DisplayObject.stageプロパティへのアクセスに問題が生じる理由を明らかにするには、取りあえずその値を確認してみるべきでしょう。クラスMyClassのコンストラクタ内で座標を設定するのは止め、替わりにtrace()関数にDisplayObject.stageプロパティを渡して呼出してみると、エラーは発生せずnullが[出力]されます。どうやら、原因がはっきりしてきました。

// ActionScript 3.0クラス定義ファイル: MyClass.as
package {
  import flash.display.MovieClip;
  public class MyClass extends MovieClip {
    public function MyClass() {
      trace(this, stage);   // 出力 : [object MyClass] null
    }
  }
}

さらに詳しく処理経過を調べるため、フレームアクションにDisplayObjectContainer.addChild()メソッドの呼出しを復活させ、プロパティのターゲットも変えつつ何箇所か、trace()関数でDisplayObject.stageプロパティの値を[出力]してみることにします。複数の[出力]結果を見分けやすいように、trace()関数の引数にはターゲットの参照も加えてあります。すると、つぎのような結果になりました(図09-024)。

// フレームアクション
var my_mc:MyClass = new MyClass();
trace(this, stage);   // 出力1 : [object MainTimeline] [object Stage]
trace(my_mc, my_mc.stage);   // 出力2 : [object MyClass] null
addChild(my_mc);
trace(my_mc, my_mc.stage);   // 出力3 : [object MyClass] [object Stage]

まず、フレームアクションを記述したメインタイムラインをターゲットにすると、DisplayObject.stageプロパティで正しくStageオブジェクトを取得できます(出力1)。しかし、MyClassインスタンスを参照した場合には、フレームアクションからでもプロパティ値としてnullが返され、Stageオブジェクトは取得できません(出力2)。したがって、プロパティへのアクセスがクラス内かフレームアクションかは、DisplayObject.stageがnullになる直接の原因ではないということです。

しかし、DisplayObjectContainer.addChild()メソッドでMyClassインスタンスをメインタイムラインの子リストに加えると、このインスタンスに対するDisplayObject.stageプロパティがStageオブジェクトを返すようになります。考えてみると、メインタイムラインは、Flash Playerが初期化された時点でStageオブジェクトの表示リストに含まれています。

つまり、真の原因はDisplayObjectインスタンス(メインタイムラインやMyClassインスタンス)がStageオブジェクトを頂点とした表示リストに含まれていないと、DisplayObject.stageプロパティは値がnullとなり、Stageオブジェクトの参照を返さないということのようです。そのnullのプロパティ値をターゲットにしてStageオブジェクトのプロパティ(Stage.stageWidthやstage.stageHeight)にアクセスしようとしたために、問題の#1009ランタイムエラーが生じたと考えられます。

もっとも今回の問題については、実はヘルプのDisplayObject.stageプロパティの説明に、つぎのように手がかりが示されています。

表示オブジェクト(筆者注: DisplayObjectインスタンス)が表示リストに追加されていない場合、stageプロパティはnullに設定されます。

しかし、ドキュメントにつねに情報があるとはかぎりません。また、本ボシと目をつけた容疑者が実はシロで、真犯人は別にいたということもありえます。ですから、聴込み(ドキュメントの調査や検索)と併せて、さらに詳しく取調べ(テスト)を行っておくことが、事件の早期解決の鍵となるのです。

●DisplayObject.addedToStageイベント
改めてクラスEllipticMotionを、インスタンスが動的に配置できるように修正してみます。クラス内からでも、インスタンスが表示リストに加えられた後であれば、DisplayObject.stageプロパティにアクセスして座標を指定することはできるはずです。Stageオブジェクトを頂点とする表示リストにインスタンスが加えられると、イベントDisplayObject.addedToStageが発生します(Word 09-005)。このイベントにリスナーを登録し、そのメソッド内で座標は設定することにしましょう。

修正箇所は、大きく3点です(図09-025)。第1に、プロパティcenterのvar宣言から、初期値の代入を除きます。EllipticMotionインスタンスが初期化時では、まだDisplayObject.stageプロパティがStageオブジェクトの参照を得られないからです。

private var center:Point;   // = new Point(stage.stageWidth/2, stage.stageHeight/2);

第2に、コンストラクタメソッドに記述されていたDisplayObject.enterFrameイベントへのリスナー登録と座標設定の処理を含むsetRotation()メソッドの呼出しの2行は外します。そして替わりに、DisplayObject.addedToStageイベントへのリスナー登録のステートメントを加えます。リスナーのメソッド名はsetPositionとしましょう。

public function EllipticMotion() {
  addEventListener(Event.ADDED_TO_STAGE, setPosition);
  // addEventListener(Event.ENTER_FRAME, rotate);
  // setRotation();
}

第3に、DisplayObject.addedToStageイベントのリスナーとして新たなメソッドsetPosition()を、以下のように定義します。処理の内容としては、3つあります。

まずプロパティ宣言で未設定だったcenterの値の代入です。DisplayObject.stageプロパティがStageオブジェクトの参照を返しますので、そのプロパティ値から計算した座標をPointインスタンスに渡して設定します。つぎに、コンストラクタメソッドから除いた2行のステートメントを移行します。そして3つ目に、忘れていけないのは、DisplayObject.addedToStageイベントに登録したリスナーの削除(DisplayObject.removeEventListener()メソッドの呼出し)です。

private function setPosition(eventObject:Event):void {
  removeEventListener(Event.ADDED_TO_STAGE, setPosition);
  center = new Point(stage.stageWidth/2, stage.stageHeight/2);
  addEventListener(Event.ENTER_FRAME, rotate);
  setRotation();
}

念のため、DisplayObject.addedToStageイベントのリスナーが正しく削除されているかどうか、EventDispatcher.hasEventListener()メソッドで確かめることにします。EventDispatcher.hasEventListener()メソッドにはイベント定数を引数として渡すと、そのイベントに登録されているリスナーが存在するかどうかをブール(論理)値で返します(Word 09-006)。

イベント定数Event.ADDED_TO_STAGEを引数として呼出したEventDispatcher.hasEventListener()メソッドの戻り値は、trace()関数によりDisplayObject.removeEventListener()メソッド呼出しの前後にそれぞれ[出力]します(図09-025)。戻り値は、イベントリスナーを削除する前がtrue、削除後はfalseになるべきです。

それでは試してみましょう。FLAファイルのムービー内容やフレームアクションは、デバッグをする際に試したとき(図09-016)のまま変更は要りません。前述のとおり、ステージにはインスタンスを置かず、[ライブラリ]のMovieClipシンボルにクラスEllipticMotionを設定します。クラスと同階層に保存したFLAファイルのメインタイムラインには、以下のフレームアクションを記述して、[ムービープレビュー]を試します。

// フレームアクション
var my_mc:EllipticMotion = new EllipticMotion();
addChild(my_mc);

今度は、EllipticMotionインスタンスがStageオブジェクトの表示リストに追加されるのを待って、DisplayObject.stageプロパティにアクセスしていますので、エラーなくインスタンスがステージ上に配置され、楕円軌道を描いてアニメーションが再生されます。

EventDispatcher.hasEventListener()メソッドの戻り値が、trace()関数によりつぎのように[出力]されれば、リスナーは正しく削除されています(図09-026)。

true
false

イベント定数Event.ADDED_TO_STAGEを引数として呼出したEventDispatcher.hasEventListener()メソッドの戻り値によりリスナーの削除が確認できたら、trace()関数のステートメントはコメントアウトか削除して構いません。

修正後のクラスEllipticMotionは、つぎのスクリプト09-004のように定義されます。

○09-04 複数のインスタンスを配置する ー forステートメント
前節09-03でMovieClipシンボルに定義したクラスEllipticMotion(スクリプト09-004)のインスタンスを、複数配置してみることにしましょう。本節では、同じ処理を繰返すforステートメントについて解説します。

●インスタンスの配置を指定する
複数のインスタンスは、同じ場所に重ねて置いても意味がありません。複数のインスタンスを配置する前に、その位置を指定できるようにクラスEllipticMotionを修正する必要があります。

今回のアニメーションでEllipticMotionインスタンスの位置は、(1)中心座標と(2)楕円軌道のx軸・y軸の各半径、および(3)回転角度で決まります。そこで、取りあえず前2者の(1)と(2)は固定として、最後の(3)をコンストラクタの引数で指定するようにしてみます。つまり、Flashムービー(FLA)ファイルのフレームアクションからEllipticMotionインスタンスをつぎのように生成すると、楕円軌道のアニメーションは角度90度の位置から開始することになります。

// フレームアクション
var my_mc:EllipticMotion = new EllipticMotion(90);
addChild(my_mc);

クラスEllipticMotionに対して加える修正は、コンストラクタメソッドに受取る引数を指定して、get/setアクセサメソッドdegreeに設定するだけです。

public function EllipticMotion(nDegree:Number) {
  degree = nDegree;
  addEventListener(Event.ADDED_TO_STAGE, setPosition);
}

前に定義したクラスEllipticMotion(スクリプト09-004)は、以下のスクリプト09-005のように変更されます()。コンストラクタの引数には、デフォルト値として0を指定しました。

これで、スクリプトから楕円軌道上の任意の位置にEllipticMotionインスタンスを配置して、3D風の回転のアニメーションが実行できます。90度間隔で4つのインスタンスを生成して回転させるには、フレームアクションをつぎのように記述すればよいでしょう。

// フレームアクション
var my_mc:EllipticMotion;
my_mc = new EllipticMotion();
addChild(my_mc);
my_mc = new EllipticMotion(90);
addChild(my_mc);
my_mc = new EllipticMotion(180);
addChild(my_mc);
my_mc = new EllipticMotion(270);
addChild(my_mc);

[ムービープレビュー]を確かめると、4つのインスタンスが楕円軌道上を等間隔で回転します(図09-027)。ただし、アニメーションをよく観察すると、各インスタンスの重ね順が変わらないので、楕円軌道の上(つまり仮想3Dの奥)に移動したインスタンスが、下(仮想3Dの手前)のインスタンスの前に表示されることもあります(図09-028)。この重ね順については、本節の最後に対応する処理を加えます。

上記フレームアクションで4つのインスタンスをタイムラインに配置する処理は、基本的に同じ2行のステートメントの繰返しです。つまり、ひとつはコンストラクタによりインスタンスを生成するステートメントで、引数に渡す角度の値以外は同じです。もうひとつは、インスタンスをStageオブジェクトの表示リストに加えるステートメントです。こちらは、インスタンスによる違いはまったくありません。

ActionScriptには、このような繰返しの処理を行う構文が用意されています。その代表であるforステートメントを、次項で使ってみましょう。

●forステートメント
forステートメントは、指定された条件(継続条件)が満たされる間、予め決められたステートメントのまとまり(「ステートメントブロック」と呼びます)を繰返し処理します。条件を評価して一定の処理を行う点は、ifステートメントと同じです。しかし、条件が満たされなくなるまで処理を繰返すところが、forステートメントの特徴です。そのシンタックスは、つぎのとおりです。

for (初期化処理; 継続条件; 更新処理) {
   // 繰返す処理
}

初期化処理は、繰返し処理(「ループ処理」ともいいます)に先立って行っておくべき設定です。通常は変数を宣言し、その初期値を代入します。ループ処理は、継続条件が満たされるかぎり繰返されます。条件の指定の仕方はifステートメントと同じです。終了条件ではありませんので、ご注意ください。更新処理は、ループ処理がひとつ終わるごとに実行されます。変数値の更新を行うことが多いでしょう。

簡単な例として、配列に0から9まで10個の整数を連番で格納してみましょう。forステートメントは、以下のように記述します。フレームアクションに記述して、[ムービープレビュー]で確かめると、0から9までの配列エレメントがカンマ区切りで[出力]されます。

for (var i:int = 0, _array:Array = new Array(); i<10; i++) {
  _array.push(i);
}
trace(_array);   // 出力: 0,1,2,3,4,5,6,7,8,9

第1に、初期化の処理ではふたつの変数、int型のiとArray型の_arrayを宣言し、それぞれに初期値として整数0と空の配列を代入しています。複数の変数を初期化するときは、このように間をカンマ(,)で区切り、varキーワードはその先頭にだけ記述します。

第2に、継続条件は関係演算子を使うなどして、ifステートメントの条件と同じように指定します。上記フレームアクションでは変数iの値が10未満の間繰返し処理が行われ、iが10以上になったときに処理を止めてforループから抜けます。継続条件が不適切な場合には、無限ループ(継続条件がつねにtrue)になるおそれがありますので気をつけましょう。

Tips 09-008■15秒ルール スクリプトの処理が無限ループになっても、Flashコンテンツがハングアップする訳ではありません。バスケットボールの審判のようにFlash Playerが時間を計り、デフォルトではスクリプトが 15秒以上処理を持ち続けると、反則を取られエラーで停止します(図09-029)。これは、悪意のあるプログラムを排除するセキュリティ上の考慮です。 図09-029■15秒のスクリプトタイムアウト セキュリティ上の考慮から、15秒以上処理が続くとエラーになる。 無限ループでなくても、大きな処理で15秒以上経過してしまうと、やはりエラーになります。そのような処理は分割したうえで、DisplayObject.enterFrameイベントやTimerクラスを利用して順に実行するなど工夫が必要になります。

第3の更新の処理では、ループ処理をひとつ終えるたびに、変数iの値に1加算します。++は、変数(あるいはプロパティ)に整数1を加算するインクリメント演算子です。加算後代入演算子を使った「変数 += 1」と同じ処理になります。なお、整数1を差引くには、デクリメント演算子--が使えます。

Tips 09-010■forステートメントの初期化と更新で複数の処理を行う forステートメントでは、初期化だけでなく更新についても、カンマ(,)区切りで複数の処理を記述することができます。たとえば、以下のフレームアクションは、0度以上360度未満の角度の値を、30度刻みで度数とラジアンの値の組合わせにして[出力]します(図09-029)。 // フレームアクション for (var nDegree:int = 0, nRadian:Number = 0; nDegree<360; nDegree += 30, nRadian = nDegree/180*Math.PI) {   trace(nDegree, nRadian); } 図09-030■forステートメントの初期化と更新に複数の処理を記述 0度以上360度未満の角度と、対応するラジアン値を、30度刻みで[出力]。

●whileステートメント
whileステートメントは、継続条件の指定のみで繰返し処理を行います。初期化や継続の処理が必要なときは、別途そのステートメントを加えなければなりません。forステートメントの例と同じ、配列に0から9までの整数を格納するには、つぎのようなフレームアクションを記述します。

// フレームアクション
var i:int = 0;
var _array:Array = new Array();
while (i<10) {
  _array.push(i++);
}
trace(_array);   // 出力: 0,1,2,3,4,5,6,7,8,9

まず、ふたつの変数、int型のiとArray型の_arrayは、whileステートメントの前に宣言し、初期値を与えています。つぎに、継続条件の指定は、forステートメントの場合と同じです。そして、更新処理は変数iのインクリメントで、その戻り値をArray.push()メソッドの引数として指定しました。ポストインクリメントですので、メソッドには加算前のiの値が渡されます(Tips 09-008参照)。

一般的には、forステートメントの方が、初期化処理・継続条件・更新処理が明らかに示されるので、スクリプトとして見やすくなります。ですから、とくに初期化や更新の処理が要らないという場合でなければ、forステートメントの利用をお勧めします。

●複数のインスタンスをループ処理で配置する
それでは、EllipticMotionインスタンスを90度間隔で4つ配置するフレームアクション(図09-027)の例に戻ります。forステートメントを使えば、フレームアクションはつぎのように記述することができます。

// フレームアクション
var my_mc:EllipticMotion;
for (var i:int = 0; i<4; i++) {
  my_mc = new EllipticMotion(i*90);
  addChild(my_mc);
}

しかし、インスタンスの数が4個に決まっている訳ではなく、たとえば6個になったりするかもしれないというときは、数を変数に設定し、角度も数に応じて計算する方がよいでしょう。その場合のフレームアクションは、つぎのスクリプト09-006のようになります。

インスタンスの数を納めるint型変数cCountには6を設定しました。したがって、[ムービープレビュー]で確かめると、6個のEllipticMotionインスタンスが60度間隔で回転します(図09-031)。

●機能の拡張に備える
EllipticMotionクラスは、次章でさらに拡張する予定です。それに備えて、インスタンスの配置について、もう少し自由度を高めておくことにします。

まず、インスタンスをつくるときに角度の指定が必要ですと、予め配置する数は決めておかなければなりません。これは、後からインスタンスを加えて、配置し直せるようにしたいです。つぎに、楕円軌道のx軸・y軸方向の半径は、次章ではマウス操作に応じてインタラクティブに変化させるつもりです。中心座標も、変えられるようにしておきましょう。

したがって、第1に、クラスEllipticMotionには、インスタンスを配置するためのメソッドが必要になります。その際、引数として指定するのは、角度に加えて、楕円軌道の半径とその中心座標です。第2に、中心座標をクラス外(フレームアクション)から指定するということは、EllipticMotionクラス内でDisplayObject.stageプロパティにアクセスしなくてよいということです。すると、DisplayObject.addedToStageイベントのリスナーは要らなくなります。

そこで、DisplayObject.addedToStageイベントのリスナー関数だったsetPosition()は、改めてインスタンスを配置するためのメソッドとして定義し直すことにします。引数は、角度と楕円軌道の中心座標、および半径です。このメソッドはタイムラインのフレームアクションから呼出したいので、アクセス制御の属性はprivateからpublicに変更します。修正を加えたメソッドsetPosition()は、つぎのとおりです。

// private function setPosition(eventObject:Event):void {
public function setPosition(nDegree:Number=0, myCenter:Point=null, myRadius:Point=null):void {
  degree = nDegree;
  // removeEventListener(Event.ADDED_TO_STAGE, setPosition);
  // center = new Point(stage.stageWidth/2, stage.stageHeight/2);
  if (myCenter is Point) {
    center = myCenter;
  }
  if (myRadius is Point) {
    radius = myRadius;
  }
  addEventListener(Event.ENTER_FRAME, rotate);
  setRotation();
}

引数のデータ型は、角度nDegreeをNumber型、楕円軌道の中心座標myCenterとその半径myRadiusはPointクラスで指定しました。引数3つともデフォルト値を定めましたので、メソッドsetPosition()には引数なし(0)から3つまでの任意の数の値が渡せます。まず、第1引数の指定がない、つまりメソッドが引数なしで呼ばれると、nDegreeにはデフォルト値0が設定され、setPosition()内ではその値0がsetアクセサメソッドdegreeに渡されます。

つぎに、第2引数myCenterと第3引数myRadiusのデフォルト値はともにnullです。setPosition()メソッドにこれらの引数が渡されなければ、nullがデフォルトとして引数の値となります。しかし、nullは、前述(Word 09-004「nullプライマリ式キーワード」)のとおり、「値が存在しない」ことを示す値ですので、このままプロパティに設定しても意味がありません。そこで、第2、第3引数が指定されないとき、すなわちデフォルト値nullの場合には、すでにプロパティに設定されている値をそのまま変更しないという処理にしています。

第2引数myCenterと第3引数myRadiusの値を判定するifステートメントは、基本的に同じ構造です。条件として、引数値がnullではないという(不等価!=)比較の式にはなっていません。条件に使われているのは、新しいis演算子(Word 09-007)です。この演算子は、つぎのシンタックス(構文)で、式が指定したクラスのインスタンスであるかどうかを、trueまたはfalseのブール(論理)値で返します。

式 is クラス

式には、もちろん変数も含まれます。その値が、指定したクラスまたはそのサブクラスのインスタンスであればtrue、そうでなければfalseを返します。たとえば、MovieClipインスタンスmy_mcをis演算子で調べると、つぎのような結果が返されます。

trace(my_mc is MovieClip);   // 出力: true
trace(my_mc is DisplayObject);   // 出力: true
trace(my_mc is Object);   // 出力: true
trace(my_mc is Array);   // 出力: false

そして、ここで大事なのは、nullは一般にクラスで型指定された変数やプロパティのデフォルト値でありながら、データはNull型で、クラスのインスタンスとはみなされないということです。つまり、初期化されていないか、あるいは値としてnullが代入された変数は、あるクラスで型指定されていても、is演算子でそのクラスのインスタンスかどうかを調べればfalseが返されるのです。

var my_mc:MovieClip;
trace(my_mc);   // 出力: null
trace(my_mc is MovieClip);   // 出力: false

したがって、前記スクリプトのsetPosition()メソッドに渡されたふたつの引数(myCenterとmyRadius)がPointインスタンスでなければ、ifステートメントのプロパティ(centerとradius)を設定する処理が行われず、現在のプロパティ値がそのまま保たれることになるのです。

コンストラクタメソッドでは、角度の指定もDisplayObject.addedToStageイベントのリスナー登録も必要がなくなります。ですから、コンストラクタは空でよいことになります。それから、プロパティcenterのvar宣言には、初期値を与えておくことにしましょう。以上の修正を加えたクラスEllipticMotionの定義は、以下のスクリプト09-007のようになります(図09-032)。

これで、インスタンスの作成とその配置とは、処理を分けることが可能になります。そこで、Flashムービー(FLA)ファイルのフレームアクションも、インスタンスの作成とその配置を分けてみることにします。まず、必要な数のインスタンスを、表示リストには入れずに、一旦配列に格納します。そしてつぎに、配列内のインスタンス数を確かめたうえで、インスタンスを表示リストに加えるとともに等間隔で配置します。そのフレームアクションは、つぎのスクリプト09-008のとおりです(図09-033)。

このフレームアクションはとくに新しい知識は使っていませんので、forループを使った練習として作成していただくとよいでしょう。ひとつだけ補足するとすれば、インスタンスが格納される配列instances_arrayの長さ(Array.lengthプロパティの値)をローカル変数nLengthに設定したことです。

配列の長さは、ふたつ目のforループで継続条件として用いられています。継続条件は、ループ処理がひとつ終わるたびに評価されます。つまり、配列の長さはループ処理の回数分だけアクセスされることになるのです。すでに述べたとおり(04-07「パラメータを加える」)、「2回以上使うプロパティの値は、ローカル変数に入れた方がお得」でした。そこで、その値をローカル変数に入れて、処理スピードの最適化をはかったのです。

フレームアクションの実行結果は、クラスEllipticMotionにsetPosition()メソッドを定義する前と、今のところ変わりはありません。しかし、インスタンスの作成とその配置を処理として分けたことにより、後からインスタンスを追加したり、楕円軌道を動的に変更したりしやすくなりました。

○09-05 重ね順と遠近法
クラスEllipticMotionのアニメーションに、もうふたつ修正を加えます。ひとつは、すでに問題点を指摘してあったインスタンスの重ね順です。インスタンスは、表示リストに加えられた順に前面に重なり(Word 09-003「DisplayObjectContainer.addChild()メソッド」参照)、何もしなければ順番は変わりません。したがって、仮想3Dで奥になる楕円軌道上部に移動しても、下部のインスタンスより手前に表示されるものが出てきてしまいます(図09-034)。この重ね順をコントロールしなければなりません。

もうひとつは、イラストでいわゆる「パース」(パースペクティブ: perspective)と呼ばれる遠近感を、より精密に表現するための修正です。遠近感が平面でどのように表現されるのかを、アニメーションでもう1度確かめてみる必要があります。

●重ね順を変える
まず、重ね順は、表示リスト内のインデックスによって決まります。DisplayObjectContainer.addChild()メソッドは、子リストの最後にインスタンスを加えます。後に追加したインスタンスほどインデックスの整数は大きくなり、インデックスの数値が大きいほど手前に表示されます(Word 09-003「DisplayObjectContainer.addChild()メソッド」参照)。

したがって、インスタンスの重ね順を動かすには、表示リスト内におけるインデックスの値を変えればよいということになります。そのためのメソッドが、DisplayObjectContainer.setChildIndex()です。子のインスタンスと整数インデックスのふたつの引数をメソッドに渡して、表示リスト内のインデックスつまり重ね順を変更します(Word 09-008)。

この段階では、表示リスト内のインスタンスの重ね順を、ひとつひとつ正確に決めることまではしません。楕円軌道の上部(仮想3Dの奥)か下部(仮想3Dの手前)かだけを考え、インスタンスが 上部から下部に移ったとき重ね順を最前面にし、下部から上部に動いたら最背面に送るという処理にします(図09-035)。

インスタンスが楕円軌道の上部と下部の間で移動したときに重ね順を変えるためには、インスタンスがどちらの軌道にあるかを示すフラグが必要です(Tips 08-011「フラグ」参照)。そこで、EllipticMotionクラスには、Boolean型のインスタンスプロパティfrontを宣言します。値は仮想3D手前の軌道下部がtrueで、仮想3D奥になる軌道上部をfalseとします。

インスタンスの位置が楕円軌道の上部か下部かは、sin値がマイナスかプラスかで確かめることができました。sin値を取得するには、メソッドgetIndexZ()を呼出します。引数を渡さなければ、sin値がそのまま返され、楕円軌道上部が0から-1、下部は0から1までの値になります。

なお、表示リスト内の子インスタンスの数は、DisplayObjectContainer.numChildrenプロパティで調べられます(表09-001「DisplayObjectContainerクラスの子リストを操作するおもなプロパティとメソッド」参照)。また、インスタンスが属する表示リストをもつ親のDisplayObjectContainer(MovieClip)インスタンスは、DisplayObject.parentプロパティで参照が得られました。

これくらい前提知識の確認ができれば、クラスEllipticMotionの修正はできるでしょう。重ね順を変更するメソッド名はsetOrder()とします。そうすると、スクリプト09-007につぎのような追加をすれば、よさそうです。

// frontプロパティの宣言を追加
private var front:Boolean = false;

// setRotation()メソッドにsetOrder()メソッドの呼出しを追加
private function setRotation():void {
  moveX();
  moveY();
  scale();
  blur();
  setOrder();   // 追加
}

// setOrder()メソッドを新たに定義
private function setOrder():void {
  if (getIndexZ()>0) {
    if (front == false) {
      front = true;
      parent.setChildIndex(this, parent.numChildren-1);
    }
  } else {
    if (front == true) {
      front = false;
      parent.setChildIndex(this, 0);
    }
  }
}

Flashムービー(FLA)ファイルのフレームアクションは前と同じ(スクリプト09-008)まま、[ムービープレビュー]を確かめると、楕円軌道の上部と下部とで重ね順が変わり、前後の表示も正しい3D風のアニメーションになります。しかし、上記setOrder()メソッドには問題があります。それは、前述スクリプト09-008で、DisplayObjectContainer.addChild()メソッドの呼出しをEllipticMotionクラスのメソッドsetPosition()の後のステートメントに移動してみるとわかります。[ムービープレビュー]で、#1009の「nullのオブジェクト参照」のエラーが発生してしまいます(図09-036)。

原因は、setOrder()メソッドの中で用いられているDisplayObject.parentプロパティです。このプロパティは、インスタンスがいずれかのDisplayObjectContainerインスタンスの表示リストに加えられるまでは、値としてnullを返します。nullに対しては、DisplayObjectContainerクラスのメソッド(DisplayObjectContainer.addChild()やDisplayObjectContainer.addChildAt())は呼出せませんので、#1009のエラーが発生することになるのです。

したがって、エラー#1009を避けるには、setOrder()メソッド本体の処理を行う前に、インスタンスのDisplayObject.parentプロパティがnullでないかどうかを確かめなければなりません。このエラー回避の判定まで含めて修正を加えたクラスEllipticMotionは、つぎのスクリプト09-009のとおりです。

setOrder()メソッドに加えた修正(スクリプト09-009)については、3つ補足があります(図09-037)。第1は、すでに述べたとおり、メソッド内の最初のステートメントでDisplayObject.parentプロパティがnullでないことを確かめていることです。この判定は、もちろんつぎのように不等価比較の式で行っても構いません。

if (parent != null) {

しかし、前記スクリプト09-009では、if条件にDisplayObject.parentプロパティのみを直接指定しました。このプロパティは値がDisplayObjectContainer型で定義されていますので、DisplayObjectContainerインスタンスかnullのいずれかを返します。そして、if条件に指定した式(変数やプロパティも含む)は、クラスのインスタンスであればtrueと評価され、nullはfalseとして扱われるのです(Tips 05-003「if条件の評価」参照)。したがって、このif条件で、プロパティ値がDisplayObjectContainerインスタンスかnullかは正しく判定できます。

[修正前]

↓

[修正後(スクリプト09-009)]

第2に、ふたつ目のif条件で、インスタンスの位置が楕円軌道の上部から下部、あるいは下部から上部に変わったことを判定しています。前述(図09-037)修正前のif条件の式であり、修正後は不等価比較(!=演算子)の左辺になったつぎの論理式は、インスタンスが今現在、楕円軌道の上部にあるときはfalse、下部になるとtrueを返します。

getIndexZ()>0

他方、EllipticMotionクラスのインスタンスプロパティfrontは、直前の処理のとき楕円軌道の上部にあったらfalse、下部ならtrueが設定されています。上の論理式の返す値とこのプロパティ値が一致しないのは、軌道の上部と下部の間をインスタンスが移った瞬間だということになります。したがって、このときインスタンスの重ね順を変えなければなりません。

そこで第3は、この場合にインスタンスの重ね順をどう変えるかです。まず、frontプロパティの値は、インスタンスの楕円軌道上の位置が上部と下部の間を移動しましたので、それに合わせてtrueとfalseとを切替えます。つぎに、重ね順を変えるためには、最前面(parent.numChildren-1)と最背面(0)のどちらの値を、インデックスとしてDisplayObjectContainer.setChildIndex()メソッドに渡すべきか決めなければなりません。前記スクリプト09-009では、条件演算子?:により、つぎのようにインデックス値を定めています(Tips 05-008「条件演算子?:を使う」参照)。

var nIndex:int = (front=!front) ? parent.numChildren-1 : 0;

ローカル変数nIndexへの代入式の右辺に、条件演算式が用いられています。その第1項が条件です。ただし、条件式が、不等価比較(!=)の論理式でなく、論理否定演算子!(Word 08-002「論理否定演算子!」参照)で反転したブール(論理)値の代入式であることにご注意ください。代入式は代入された値を返しますので、trueとfalseを反転して代入した後のfrontプロパティ値が条件として評価されます(Tips 08-010「if条件に指定した代入式」参照)。

つまり、インスタンスが楕円軌道を上部から下部に移れば、frontプロパティはfalseからtrueに反転しますので、条件はtrueと評価されて条件演算式の第2項(parent.numChildren-1)が、その逆の場合つまりfrontプロパティがfalseに変わったときは第3項(0)が、変数nIndexに代入されます。

この変数nIndexの値を、DisplayObjectContainer.setChildIndex()メソッドの第2引数のインデックスに指定して呼出します。すると、インスタンスが楕円軌道上部から下部に移るとき最前面に、逆に下部から上部に移動すれば最背面に、その重ね順が変わります。つまり、現在とその前とで楕円軌道の上下が変わったとき、最前面または最背面にインスタンスの重ね順を変えるという処理が行われる訳です。

さて、新しいEllipticMotionクラス(スクリプト09-009)で、フレームアクションのDisplayObjectContainer.addChild()メソッドをsetPosition()メソッドの後に呼出して、正しく動作するかどうかを確かめてみましょう。[ムービープレビュー]を試すと、#1009のエラーを発生させることなく、インスタンスが楕円軌道を描いてアニメーションします(図09-038)。

●遠近法をより正確に
楕円軌道のアニメーションに3D風の遠近感を与えるため、すでにふたつ手を加えてありました。ひとつは、blur()メソッドで、インスタンスが軌道上部つまり仮想3Dの奥にいくほど、ぼかしを強くかけたことです。ふたつ目は、scale()メソッドにより、インスタンスが軌道上部に移動するに従いサイズを小さくしていることです。しかし、後者のサイズ変更が、アニメーションをよく見ると不自然です(図09-039)。

上図09-039では、インスタンスの数を増やして、楕円軌道の最下部でインスタンス同士がほぼくっつくようにアニメーションさせてみました。ところが、軌道の最上部を見ると、インスタンスの間隔が明らかに開いています。これは、軌道上の位置に合わせて変えているのが、インスタンスのサイズだけだからです。

3D風の表現として奥にいくほどサイズを小さくするのは、同じ大きさが遠くなるほど小さく見えるためです。たとえば、横断歩道のように、同じ幅の水平線が等間隔で前方に並んでいたとしましょう(図09-004)。平面で表現するとき、同じ幅の線つまり2点間の水平距離は、遠くなるほど短くなります。また、線と線との間隔も遠くにいくほど詰まって見えます。したがって、楕円軌道のアニメーションでも、遠近感をより正確に表現するには、インスタンスのサイズだけでなく、座標についても同じように変化させる必要があるのです。

では、具体的に座標は、どのように変えたらよいでしょう。以下の図09-041は、3次元の空間を上から見て、奥行き(z軸)と水平方向の広がり(x軸)の2軸で表したものです。平面として表現する投影面に、奥行きをもって(z位置に)配置されたオブジェクトが表示されるとき、視点から投影面への焦点距離と投影面からオブジェクトまでのz方向距離が投影する大きさを決めます。

相似な三角形と辺の比の関係から、オリジナルの大きさと投影像の大きさとの比はつぎのとおりです。

投影像の大きさ/オリジナルの大きさ = 焦点距離/(焦点距離+z方向距離)

この式から、投影像の大きさが求められます。

投影像の大きさ = オリジナルの大きさ×焦点距離/(焦点距離+z方向距離)

ここまで「大きさ」と書きましたけれど、座標についてももちろん同じように考えられます。投影面のz座標を0として、z座標値がzの点(x, y, z)を投影面に変換したときの点(x', y, 0)のx座標x'も、まったく同じ比例式で求められます(図09-042。y座標は、ここでは問題とならず、任意です)。つまり、焦点距離をFとすれば、座標x'は以下のように導くことができます。

x'/x = F/(F+z)
x' = x×F/(F+z)

上図09-042を3次元の横から見た図と考えれば(この場合x座標が任意です)、z軸y軸平面上の点と投影面への座標変換も同じ比例式になります。したがって、点(x, y, z)を投影面に変換したときの点(x, y', 0)のy座標y'はつぎのとおりです。

y' = y×F/(F+z)

結局、座標もサイズも、「F/(F+z)」あるいは「焦点距離/(焦点距離+z方向距離)」という同じ比率を、元の座標やサイズに掛け合わせれば、遠近法の効果が与えられた値に変換できるということです。そこで、具体的に「焦点距離」と「z方向距離」を決める必要があります。

今、EllipticMotionクラス(スクリプト09-009)のscale()メソッドは、つぎのようにgetIndexZ()メソッドによりインスタンスのサイズ(DisplayObject.scaleXとDisplayObject.scaleYプロパティ)を簡易的に変えています。このときのgetIndexZ()メソッドの戻り値は、楕円軌道最下部の1(実寸)から最上部の0.8までの値です。この比率は、基本的に維持しましょう。

private function scale():void {
  scaleX = scaleY = getIndexZ(0.8, 1);

そうすると、軌道最下部つまりz軸方向で最前面のとき、比率は1にするということです。これは簡単です。最前面のz座標を0と定めればよいでしょう。z座標値が0であれば、z軸方向の距離は0で、焦点距離がいくつであろうと(ただし0は除きます)、分子分母の値が等しくなり、1になるからです。

焦点距離/(焦点距離+z軸方向距離) = F/(F+z)
z = 0を代入する。
F/(F+0) = F/F = 1

それでは、最背面のz座標はいくつにすべきでしょうか。実は、この値はいくつでも構いません。実際に表示するのはxy軸の2次元ですから、zは最前面と最背面の間の位置が相対的にわかりさえすればよいのです。もう少し具体的には、つぎの焦点距離を求めるとき、最背面のz座標を大きくすれば、必要な焦点距離も値が大きくなります。しかし、焦点距離もz座標もF/(F+z)の比率を求めるのに使われるだけですので、具体的な値までは問題とならないのです。だとすれば、最前面のz座標を0としましたので、最背面は値を1とするのが簡単でしょう。

そこで、つぎに焦点距離を求めます。z座標が最背面の値1を取ったとき、比率は0.8になるようにします。ただ、スクリプトでは0.8と値を決め打ちにせず、変数を使いたいと思います。ですから、この比率を「最少比率」として、式を解くことにします。

焦点距離/(焦点距離+z軸方向距離) = F/(F+z)
z = 1のとき最少比率Sとする。
F/(F+1) = S
F = S(F+1)
(1-S)F = S
F = S/(1-S)

これで、スクリプトに修正を加える準備が整いました。修正の要点を述べます。第1に、インスタンスプロパティを、以下のとおり新たに3つ宣言します。最少比率がminScale、焦点距離はfocalLength、そして座標やサイズに掛合わせる比率をcurrentScaleとしましょう。最初のふたつのプロパティは予め値が決まっていますので、宣言時に初期値を代入しておきます。最後のプロパティは、インスタンスの仮想のz座標の変化にともなって、刻々と値が変わります。ですから、宣言のみで初期値は設定しません。

private var minScale:Number = 0.8;
private var focalLength:Number = minScale/(1-minScale);
private var currentScale:Number;

第2に、座標やサイズに掛合わせる比率currentScaleの計算です。角度が変わるたびに値は変わりますので、setアクセサメソッドdegreeに以下のように処理を加えることにします。最前面が0、最背面を1とする仮想のz座標値は、getIndexZ()メソッドで取得します。ここまでの修正は、下図09-043のとおりです。

private function set degree(nDegree:Number):void {
  _degree = (nDegree%360+360)%360;
  var nRadian:Number = _degree*DEGREE_TO_RADIAN;
  cos = Math.cos(nRadian);
  sin = Math.sin(nRadian);
  currentScale = focalLength/(focalLength+getIndexZ(1, 0));
}

最後に修正の第3として、座標(DisplayObject.xとDisplayObject.yプロパティ)とサイズ(DisplayObject.scaleXとDisplayObject.scaleYプロパティ)に投射の比率currentScaleを乗じます。修正対象のメソッドは、以下のとおりmoveX()とmoveY()およびscale()の3つになります(図09-044)。注意すべき点として、moveX()とmoveY()メソッド内で座標を変換するとき、currentScaleは中心座標(center.xおよびcenter.y)には掛合わせません。中心座標は楕円軌道の起点ですので、この位置は動かさないからです。

private function moveX():void {
  // x = center.x+cos*radius.x;
  x = center.x+cos*radius.x*currentScale;
}
private function moveY():void {
  // y = center.y+sin*radius.y;
  y = center.y+sin*radius.y*currentScale;
}
private function scale():void {
  // scaleX = scaleY = getIndexZ(0.8, 1);
  scaleX = scaleY = currentScale;
  scaleX *= getIndexZ();
}

遠近法をより正確に表現するための以上3点の修正が加わったクラスEllipticMotionは、以下のスクリプト09-010のとおりです。前に試したように(図09-039)フレームアクション(スクリプト09-008)でインスタンスの数を調整して、間隔が詰まるようにしたうえで[ムービープレビュー]を確かめると、今度は軌道上部に移っても、インスタンスの間隔が開きません。座標にも遠近法を適用しましたので、仮想z軸の奥つまり座円軌道の上部にインスタンスが移動しても、大きさだけでなく相対的な間隔も一緒に変わるからです。

○Column 09 [ライブラリ]アイテムから動的にインスタンスをつくる
MovieClipシンボルやサウンド、ビットマップなど[ライブラリ]アイテムのインスタンスを、スクリプトで動的に作成する方法について簡単にご紹介します。

●MovieClipシンボル
09章ですでにご説明したとおり、MoiveClipシンボルにクラスを設定すれば、そのコンストラクタの呼出しによりインスタンスが生成できました。では、とくにプロパティやメソッドを加える必要がなく、素のMovieClipシンボルのままインスタンスをつくりたいときはどうしたらよいでしょう。この場合にも、クラスは設定しなければなりません。

そうなると、MovieClipクラスを継承した空のクラスを定義して、それをMovieClipシンボルに設定すればよさそうです。しかし、空のクラスをActionScript(AS)ファイルとしてわざわざ記述する作業は要りません。とくにクラスは定義せずに、[シンボルプロパティ]ダイアログボックスの[クラス]フィールドに存在しないクラス名たとえば"Pen"と入力してみましょう(図09-046)。

[OK]ボタンで[リンケージプロパティ]ダイアログボックスを閉じようとすると、Penというクラスは定義されていないので、警告が表示されます(図09-047)。これは[クラス]フィールドに指定したクラス名で、MovieClipを継承した空のクラスが、Flash CS3によって自動的にSWF内に作成されることを示します。ここで、[OK]ボタンをクリックして、この警告のダイアログボックスを閉じます。

クラスPenはFlashによって自動生成されることになりましたので、クラスは定義されている前提でインスタンスがつくれます。つまり、クラスのコンストラクタを呼出せばよいのです。クラスPenの設定されたMovieClipシンボルを[ライブラリ]に持つFlashムービー(FLA)ファイルのフレームアクションに、たとえばつぎのようなステートメントを記述すれば、クラスPenを設定したMovieClipシンボルのインスタンスがタイムラインに配置されます(図09-048)。

var _mc:MovieClip = new Pen();
addChild(_mc);

●[ライブラリ]に読込んだサウンド
[ライブラリ]に読込んだサウンドも、スクリプトで動的にインスタンスを作成することができます([ライブラリ]へのサウンドの読込みについては、[ヘルプ]の[Flashユーザーガイド] > [サウンドの操作] > [Flashでのサウンドの使用] > [サウンドの読み込み]以下をお読みください)。この場合も、[リンケージプロパティ]ダイアログボックスで[クラス]を指定します(図09-049)。そのクラスが定義されていないと、MovieClipシンボルのときと同じように(図09-047)、自動的に生成されることを示す警告が表示されます。ダイアログボックスの[OK]ボタンをクリックすれば、Soundクラスを継承するクラスがSWFファイルに生成されます。

[ライブラリ]のサウンドに[リンケージプロパティ]ダイアログボックスで[クラス]を設定したら、インスタンスは原則どおりコンストラクタを呼出して生成します。もっとも、Soundクラスは、ステージには表示されません。インスタンスがつくられたかどうかは、trace()関数で[出力]してみるなど、別途確かめた方がよいでしょう。生成されたインスタンスは、たとえばクラスMySoundが設定されていれば、[object MySound]と[出力]されます(図09-050)。

Sound(を継承したクラスの)インスタンスは、ステージに表示するといった処理は要りませんので、インスタンスが生成されればただちに利用できます。サウンドを再生するには、つぎのフレームアクションのようにSound.play()メソッドを呼出します。

var my_sound:Sound = new MySound();
var myChannel:SoundChannel = my_sound.play();

Tips 09-019■Sound.play()メソッドはSoundChannelインスタンスを返す Sound.play()メソッドを呼出すと、戻り値としてそのサウンドを制御するSoundChannelインスタンスが返されます(図09-051)。再生しているサウンドをコントロールするには、このSoundChannelインスタンスが必要となりますので、上記フレームアクションのように、これを変数(またはプロパティ)に取得しておくようにしましょう。 図09-051■Sound.play()メソッドの返すSoundChannelインスタンスは変数に取得しておく 戻り値の格納された変数を[出力]すると、SoundChannelインスタンスが確認できる。 たとえば、再生しているサウンドを停止するには、Soundクラスのメソッドではなく、SoundChannel.stop()メソッドを呼出します。

●[ライブラリ]に読込んだビットマップ
[ライプラリ]に読込まれたビットマップも、MovieClipシンボルやサウンドと基本的に同じ考え方でインスタンスがつくれます。つまりまずは、[リンケージプロパティ]ダイアログボックスで[クラス]を指定することです(図09-052)。指定したのが未定義のクラスであれば、警告が表示されて、そのクラスはSWFファイルに自動的に生成されます。

クラスが設定できたら、以下のフレームアクションでコンストラクタを呼出して、ビットマップのインスタンスをつくってみましょう。インスタンスはtrace()関数に引数として渡し、その生成を確かめます。ところが、[ムービープレビュー]を試すと、[コンパイルエラー]が表示されてしまいます(図09-053)。

var myData:BitmapData = new MyBitmapData();
trace(myData);

[コンパイルエラー]は、「引数の数」が正しくないと告げます。そして、コンストラクタメソッドMyBitmapData()には、ふたつの引数が必要だと指摘しています。クラスMyBitmapDataは定義していませんので空のクラスが自動生成され、その実質は[リンケージプロパティ]ダイアログボックスの[基本クラス]に指定されていたスーパークラスBitmapDataです。したがって、BitmapDataクラスを確かめてみなければなりません。

BitmapDataクラスのコンストラクタを[ヘルプ]で調べてみると、シンタックスが以下のように記載されています。引数は4つあり、後のふたつにはデフォルト値が指定されているものの、初めのふたつの引数にはデフォルト値がありません(図09-054)。つまり、第1引数の幅(width)と第2引数の高さ(height)は、省略できないということになります。

public function BitmapData(width:int, height:int, transparent:Boolean = true, fillColor:uint = 0xFFFFFFFF)

ビットマップの[リンケージプロパティ]ダイアログボックスで[クラス]に指定し、自動生成されるクラスMyBitmapDataのコンストラクタも、継承するBitmapDataクラスのコンストラクタに渡すふたつの引数を受取る必要があるのです。では、[ライブラリ]に読込まれたビットマップの幅と高さは、どのように取得すればよいでしょう。[ライブラリ]のビットマップを、予め調べておかなければならないのでしょうか。

結論から言えば、幅と高さのふたつの引数は、ともに0で構いません。インスタンスを生成すれば、ビットマップの実際の幅と高さが、改めてBitmapData.widthとBitmapData.heightプロパティに設定されます。したがって、[リンケージプロパティ]ダイアログボックスで[クラス]を指定したビットマップのインスタンスは、つぎのフレームアクションのように生成します(図09-055)。

var myData:BitmapData = new MyBitmapData(0, 0);
trace(myData, myData.width, myData.height);   // 出力: [object MyBitmapData] 幅 高さ

Maniac! 09-008■BitmapData()コンストラクタと引数の0 BitmapDataクラスのコンストラクタに、第1引数の幅と第2引数の高さとして0を指定して呼出すとランタイムルエラーになります(図09-056)。コンストラクタに渡す引数の幅や高さは、正の整数でなければなりらないからです。 図09-056■BitmapDataクラスのコンストラクタに幅と高さの引数として0を渡すとランタイムエラー コンストラクタメソッドBitmapData()の第1および第2引数に引数は幅と高さなので、正の整数でなければならない。 しかし、ビットマップの[リンケージプロパティ]ダイアログボックスで[クラス]に指定したクラスがBitmapDataクラスを継承し、そのコンストラクタからスーパークラスであるBitmapDataのコンストラクタを呼出す場合には、ふたつの引数として0を渡してもランタイムエラーにはなりません。

それでは[ライブラリ]のビットマップからインスタンスが作成できたので、つぎにそれをステージに表示します。しかし、DisplayObjectContainer.addChild()メソッドに、MyBitmapDataインスタンスを引数として渡すと、今度は[コンパイルエラー]が示されます(図09-057)。エラーの[説明]は、つぎのとおりです。

1067: 型 flash.display:BitmapDataの値が、関連しない型flash.display:DisplayObjectに暗黙で型変換されています。

DisplayObjectは、DisplayObjectContainer.addChild()メソッドの引数に指定されている型です(Word 09-003「DisplayObjectContainer.addChild()メソッド」)。その引数としてBitmapDataクラスのサブクラスMyBitmapDataのインスタンスを渡しましたので、これをDisplayObjectのデータ型に変換するのはとくに不思議はありません。

[ヘルプ]の[コンパイルエラー]の項([ActionScript 3.0コンポーネントリファレンスガイド] > [付録])で、エラーコード1067の説明を見てみましょう。すると、「変換できない型にオブジェクトをキャストしようとしてい」る場合のエラーとあります。「キャスト」というのは、データ型を変換することです(後述Tips 10-012「キャスト」参照)。つまり、DisplayObjectContainer.addChild()メソッドの引数として指定されているデータ型のDisplayObjectに、BitmapData(またはそのサブクラスの)インスタンスは変換できないという意味なのです。

実際、[ヘルプ]で[BitmapData]クラスの説明冒頭に示されている「継承」を確かめると、Objectクラスを直接継承していて、DisplayObjectはスーパークラスに含まれていません。したがって、DisplayObjectクラスのプロパティやメソッドを備えていないので、インスタンスをDisplayObjectにデータ型変換することもできないのです。

BitmapData(またはそのサブクラスの)インスタンスをDisplayObjectとして扱えるようにするには、Bitmapクラスを用います。BitmapクラスのコンストラクタにBitmapDataインスタンスを引数として渡すと、BitmapDataのイメージを含んだBitmapインスタンスが生成できます。そして、BitmapクラスはDisplayObjectクラスを継承します(図09-060)。

以上をまとめると、[ライブラリ]のビットマップに[リンケージプロパティ]ダイアログボックスで[クラス]を指定して、そのインスタンスをタイムラインに配置するには、つぎの3つの処理が必要になります。

第1は、指定した[クラス]のコンストラクタを呼出して、ビットマップのインスタンスを生成することです。このとき、幅と高さのふたつの引数を渡さなければならないことに注意しましょう。第2に、生成されたビットマップのインスタンスを引数にして、Bitmapインスタンスをつくります。そして最後に、Bitmapインスタンスを、DisplayObjectContainer.addChild()メソッドに渡して、タイムラインに配置します。この処理は、つぎのフレームアクションのようになります。

var myData:BitmapData = new MyBitmapData(0, 0);
var myBitmap:Bitmap = new Bitmap(myData);
addChild(myBitmap);

[ムービープレビュー]で確かめると、[ライブラリ]で[クラス]を設定したビットマップがタイムラインに配置されて表示されます(図09-061。図のフレームアクションでは、Bitmapインスタンスの座標も調整しています)。

[Prev/Next]

作成者: 野中文雄
更新: 2008年7月16日 Column 09「[ライブラリ]アイテムから動的にインスタンスをつくる」のスクリプトを1箇所修正。
作成日: 2008年5月9日