Starlingフレームワークは、Flash Player 11の新しい描画機能Stage3Dにもとづきます。したがって、Flash Player 11の書出しができなければなりません。Flash Player 11は、次期バージョンのFlash CS6から正規サポートされる予定です。それまでの暫定処置として、AdobeからFlash CS5/CS5.5でFlash Player 11のSWFを書出す機能拡張(MXP)が提供されました(図001)。そして、Starlingはオープンソースのフレームワークです。

これらをダウンロードしてインストールする手順は、つぎのノートで説明しています。

• Flash CS5/CS5.5でFlash Player 11のSWFを書出す
• Starlingフレームワークをインストールする

図001■MXPをインストールすると[パブリッシュ設定]に[Flash Player 11]が加わる

02 とにかくStarlingフレームワークを使ってみる

Stage3Dは文法こそActionScript 3.0にしたがうものの、プログラミングの考え方はアセンブラとほぼ変わらない、新しい言語といってもよいです。表示リストの階層もなければ、フレームベースのアニメーションも備わっていません。Starlingには、SpriteやMovieClipといったクラスがあり、addChild()メソッドも使えます。また、addEventListner()メソッドでENTER_FRAMEイベントのリスナーを加えることもできます。これまでのActionScript 3.0と似た感覚でStage3Dによる2次元の描画を扱えるのがStarlingフレームワークなのです。

手始めとして、Starlingフレームワークで描いた矩形に、回転のアニメーションを加えてみます(図002)。

• Starlingフレームワークを使う

図002■正方形のインスタンスをステージの中央で回す

さらに、Quadインスタンスの頂点ごとに異なるカラーやアルファを定めて、グラデーションで塗ります(図003)。

• StarlingフレームワークのQuadインスタンスをグラデーションで塗る

図003■Quadインスタンスの4頂点に異なるカラーとアルファを定める

03 Starlingフレームワークで物理演算エンジンを試す

CPUの負荷が上がりやすい物理演算は、Stage3Dを試したい処理のひとつです。そこで、ふたつの物理演算エンジンを試します。

まず、使いやすさで注目されている「Nape」です。ビットマップのボールをStarlingフレームワークに置くことから始めます。つぎに、そのボールをNapeの物理演算で自然落下させます。そして、100個のボールを落として、床および互いの間でバウンドさせるムービーをつくります(図004)。

• Starlingフレームワークで物理演算エンジンNapeを使う

図004■ランダムに落とした100個のボールを互いにバウンドさせる

*クリックでサンプルSWFのページが開きます。

つぎに、C++から移植された物理エンジンBox2DFlashです。まずは、矩形のQuadインスタンスを落下させます。それを画面の下に置いた床に弾ませることができたら、矩形のインスタンスを50個まとめて落としてみます(図005)。

• StarlingStarlingフレームワークで物理演算エンジンBox2Dを使う

図005■50個の矩形をランダムに床に落とす

さらに、落下させる剛体を[ライブラリ]のビットマップからつくったImageインスタンスに置換えてみます。

• StarlingフレームワークでつくったテクスチャのボールをBox2Dで弾ませる

図006■ 100個のテクスチャのボールをランダムに床に落とす

04 Starlingフレームワークでトゥイーンアニメーション

Starlingフレームワークにはstarling.animation.Tweenクラスが備わっています。ただし、Flashにもともとあるfl.transitions.Tweenクラスとは少し使い勝手が違います。StarlingフレームワークのTweenクラスを用いたアニメーションについてご説明します。

• StarlingフレームワークのTweenクラスを使ったアニメーション

05 Starlingフレームワークでイベントを扱う

Starlingフレームワークでは、マウスの操作はDisplayObject.touchイベント(定数TouchEvent.TOUCH)として受取ります。このイベントを用いたマウス操作の扱い方を学びます。まず、Touch.phaseプロパティの値がTouchPhase.MOVEDのとき、インスタンス上でボタンを押したままマウスを動かしています。

• Starlingフレームワークでインスタンスをドラッグ&ドロップする

図007■Quadインスタンスをドラッグする
 

つぎに、インスタンスのクリックは、Touch.phaseプロパティの値がTouchPhase.ENDEDの場合です。ただし、マウスボタンを放すのは、インスタンスの上か外かを問いません。そのため、ボタンを放した座標が、インスタンス上かどうかを調べなければならないのです。

• Starlingフレームワークでインスタンスをクリックする

06 Starlingフレームワークのリファレンス

Starlingフレームワークのリファレンスは、英文の情報もあまり詳しくありません。解説記事で触れたプロパティやメソッドを少しずつ加えていくつもりです。

• starling.core.Starlingクラス
• starling.textures.Textureクラス
• starling.display.Quadクラス
• Starlingフレームワークで表示オブジェクトのイベントリスナーをすべて削除するメソッド
• starling.events.Touchクラスと座標の変換
• Starlingフレームワークで表示オブジェクトと座標の重なりを調べる

図008■Stage3D(Starling)とFlashのステージの関係

[追記2012/02/08]「starling.display.Quadクラス」と「StarlingフレームワークのQuadインスタンスをグラデーションで塗る」を、それぞれ本文04と02に加えました。

[追記2012/02/15]「StarlingフレームワークのTweenクラスを使ったアニメーション」を本文04に加え、「Starlingフレームワークのリファレンス」の項目番号を05としました。

[追記2012/03/19]「StarlingフレームワークでつくったテクスチャのボールをBox2Dで弾ませる」を本文03に加えました。

[追記2012/03/26]「Starlingフレームワークで表示オブジェクトのイベントリスナーをすべて削除するメソッド」を本文05に加えました。

[追記2012/04/02]「Starlingフレームワークでインスタンスをドラッグ&ドロップする」を新たな項目05「Starlingフレームワークでイベントを扱う」に加え、「Starlingフレームワークのリファレンス」の項目番号は06としました。また、項目06には「starling.events.Touchクラスと座標の変換」を追加しました。

[追記2012/04/06] 項目05に「Starlingフレームワークでインスタンスをクリックする」、06に「Starlingフレームワークで表示オブジェクトと座標の重なりを調べる」を加えました。

図001■テキストが含まれたIllustratorのアートワーク

AIファイルは、[ファイル]メニューの[読み込み]で、簡単に[ステージに読み込み]できます(図002)。

図002■[ファイル]メニューの[読み込み]から[ステージに読み込み]

[テキスト読み込みのオプション]は、もちろん[編集可能なテキスト]にしておく方が、後で修正もできて便利です(図003)。

図003■[テキスト読み込みのオプション]を[編集可能なテキスト]にする

読込まれたテキストを[プロパティ]インスペクタで確かめると、[TLFテキスト]になっています。

図004■読込まれたテキストは[TLFテキスト]になる

02 [TLFテキスト]はパンドラの箱

実は、AIファイルと一緒にパンドラの箱を開いてしまったかもしれません。[TLFテキスト]が含まれているタイムラインは、一瞬親を失ってStageから切離されたりします。また、他のSWFから読込んだとき、メインタイムラインにアクセスできないこともあります。身に降りかかるおそれのあるさまざまな現象については「Text Layout Framework(TLF)で悩みがちなこと」をお読みください。

03 SWF書出ししてから読込むと希望が

なお、IllustratorからSWFファイルを書出してそれを読込んだ場合は、デフォルトでは(書出す[バージョン]が[Flash Player 9]のため)テキストは[クラシックテキスト]の[静止テキスト]として読込まれました。SWFの方がアートワークの再現性は高いという声も聞きます。ワークフローを考え合わせたうえ、SWF書出しも検討に値するでしょう。

01 TLFテキストのある外部SWFを読込むとその中のオブジェクトにアクセスできない

おそらく、もっとも引っかかりやすいのは、TLFテキストが含まれた外部SWFを読込んだ場合です。お決まりどおりLoaderInfo.completeイベント(定数Event.COMPLETE)で外部SWFの読込みを終えたうえで、Loader.contentプロパティから読込んだムービーの参照を得て操作しようとすると、プロパティが見つからず、デフォルト値もないという、意味の分からないエラーが示されたりします。

図001■プロパティが見つからずデフォルト値もないというエラー

Text Layout Frameworkのコンポーネントライブラリは、デフォルトではFlash Playerに動的に読込まれます。そのため、メインタイムラインは一旦ステージから切離され、ロードが済んでから定位置に戻るのです。TLFが含まれた外部SWFのメインタイムラインにアクセスするやり方を3つご紹介します。→「TLFテキストのある外部SWFを読込むとその中のオブジェクトにアクセスできない」

02 SafeLoaderクラスを使う

Adobeのサイトに「Loading child SWFs with TLF content generates reference errors」(TLFコンテンツのある子のSWFをロードすると参照エラーが起こる)というトラブルシューティングの記事が掲載されました。エラーを生じる具体的な状況は説明されていないものの、前項01の問題が想定されているようです。その対処法のひとつとして、AdobeからSafeLoaderというクラスが無償で公開されました(図002)。

図002■AdobeサイトからダウンロードしたSafeLoaderクラス

SafeLoaderクラスを使えば、外部SWFにTLFコンテンツが含まれていても、ロードしたムービーのメインタイムラインにアクセスできます。このSafeLoaderクラスのインストール方法と使い方を簡単にご説明します。→「SafeLoaderクラスを使う」

03 TLFテキストが配置されたメインタイムラインの初期化

Text Layout Frameworkのコンポーネントライブラリは、デフォルトではランタイム共有ライブラリとして読込まれます。すると、メインタイムラインは初めはStageオブジェクトの表示リストから外され、ライブラリがロードされた後本来の場所に置かれます。ただ細かく調べると、メインタイムラインが定位置に戻るまでの過程は、Flash Player 10または10.1(Flash Professional CS5)と10.2(CS5.5)では違っています。

結果として、イベントの起こり方もバージョンによって変わりますので、注意しなければなりません。デフォルトのランタイム共有ライブラリの設定は変えることもできます。→「TLFテキストが配置されたメインタイムラインの初期化」

04 flashx.textLayoutパッケージのクラスを使うとコンストラクタからStageにアクセスできない

ドキュメントクラスでも、Text Layout Frameworkを使うと、やはり一旦Stageオブジェクトの表示リストから外されます。そのため、コンストラクタメソッドからは、DisplayObject.stageプロパティでStageオブジェクトにアクセスできません。→「flashx.textLayoutパッケージのクラスを使うとコンストラクタからStageにアクセスできない」

05 TLFTextFieldのテキストの一部を指定したTextFormatが設定できない

TLFTextField.setTextFormat()メソッドは、第2および第3引数のインデックスでテキストの一部を定めて、TLFTextFieldインスタンスにTextFormatオブジェクトの書式が設定できます。しかし、Flash Professional CS5.5では、すべてのテキストに書式が適用されてしまうようです。→「 TLFTextFieldのテキストの一部を指定したTextFormatが設定できない 」

06 Text Layout Framework(TLF)でハマらないために

Text Layout Frameworkに関わる問題について議論されたフォーラムやblog記事を以前ご紹介しました。一部上記の項目と重複しますが、改めてご案内しておきます。→「Text Layout Framework(TLF)でハマらないために」

[追記2012/03/13]「TLFTextFieldのテキストの一部を指定したTextFormatが設定できない」を本文05に加えました。

まず、Loader.unload()メソッドは、SWFのタイムラインの再生やその中のサウンド、ビデオを止める訳でも、メモリから直ちに消し去る訳でもありません。ただ、Laoderオブジェクトから子SWFのデータを除くだけです。[ヘルプ]の「Loader.unload()メソッド」の項には、つぎのような注意が記されています。

子SWFファイルを解放する前に、LocalConnection、NetConnection、NetStream、Soundオブジェクトなど、子SWFファイルのオブジェクト内のストリームをすべて明示的に閉じておくことをお勧めします。そうしなかった場合は、子SWFファイルが解放された後も、子SWFファイルのオーディオの再生が続く場合があります。

問題はサウンドにかぎりません。サウンド以外も、SWFの再生はメモリの中で続きます。ただ、サウンドは聴いてわかるのに対して、その他は見えないので気づかないだけです。AdobeのTechNote「ActionScript 3のLoader.unloadAndStopについて（Flash Player 10）」には、つぎのように説明されています(Loader.unloadAndStop()メソッドについては後述)。なお、ガベージコレクションについては、Adobeデベロッパーセンター「FlashでのActionScript 3デバッグの理解」をご参照ください。

Loader.unloadはLoaderオブジェクトの子を削除しますが、unloadされたオブジェクトは、ガベージコレクタによって廃棄されるまで、バックグラウンドで実行されます。

したがって、CPUやメモリが無駄に費やされるのを防ぎ、予期しない問題を避けるためには、アンロードする前にSWF内のオブジェクトはすべて止めるのが基本です。具体的にはつぎのような項目が挙げられます(moockblog「Things You Must Do Before Unloading a SWF File」参照)。

• サウンドの再生を止める。
• メインタイムラインやMovieClipインスタンスの再生を止める^[*1]。
• ネットワークの接続を閉じる。
• LoaderやURLLoader、Socket、XMLSocket、LocalConnection、NetConnections、NetStreamなど。
• カメラ(Camera)やマイク(Microphone)など、周辺機器のオブジェクトを開放する。
• SWFのイベントリスナーを削除する。
• TimerオブジェクトやsetInterval()関数などのタイマーを止める。

02 Flash Player 10から備わったLoader.unloadAndStop()メソッド

• サウンドの再生を止める。
• すべてのMovieClipインスタンスの再生を止める。
• カメラ(Camera)やマイク(Microphone)のオブジェクトを開放する。
• SWFのイベントリスナーを削除する。
• StageオブジェクトやSWFのメインタイムラインに登録されたイベントリスナー。
• DisplayObject.enterFrameやDisplayObject.frameConstructed、DisplayObject.exitFrame、EventDispatcher.activate、EventDispatcher.deactivateのイベントリスナー。
• Timerオブジェクトのタイマーを止める。

具体的には、Loader.unloadAndStop()メソッドの呼出しによりLoaderInfo.unloadイベントが起きたとき、SWF内のオブジェクトを片っ端から探して、上記の停止と消去の処理を行います^[*2]。その結果、無駄にCPUを費やすことが避けられます。とくに、ソースのFLAファイルが開けない外部SWFファイルを読込んだときには役立つでしょう。

しかし、外部SWFファイルが自らつくったものであれば、再生されているMovieClipやサウンド、ビデオが何かは把握しておくべきです。また、イベントリスナーについても、予め削除の処理を備え、いつ実行するか決めておくのが確実です。

また、Loader.unloadAndStop()メソッドも万能ではありません^[*3]。このメソッドに頼りきらず、オブジェクトの停止と消去を自ら行えるようにすることが望ましいでしょう。

[*1] Flash Player 11には、再生中かどうかを調べる「MovieClip.isPlayingプロパティ」が備わりました。

[*2] 「ActionScript 3 の Loader.unloadAndStop について（Flash Player 10）」は、つぎのように説明します。

「unload」イベントがLoaderInfoクラスに送信されると、Flash Playerは可能な限り多くのオブジェクト（Sound、NetStream、EventListenerなど）の停止と消去を再帰的に試みます。

[*3] gskinner.com「Additional Information on Loader.unloadAndStop」参照。なお、クラウド番外地「制作記録 2010/08/18」は、Loader.unloadAndStop()で完全に削除されないSWFの事例を紹介しています。

ステージから消えた、あるいは消したインスタンスは、ただちにメモリからは除かれません(「DisplayObjectインスタンスの削除とガベージコレクション」参照)。そのまま再生を続けていると、予期しないエラーが起こることもあります。また、見えなくても再生を続けていれば、CPUを無駄に費やします。したがって、ステージから消したMovieClipインスタンスのタイムラインは止めることが望ましいのです。詳しくは「MovieClip.isPlayingプロパティ」をお読みください。

AIR 1.5およびFlashPlayer 10では、BitmapDataオブジェクトの最大サイズは幅または高さで8,191ピクセルです。総ピクセル数が16,777,215ピクセルを超えることはできません。（したがって、BitmapDataオブジェクトの幅が8,191ピクセルであった場合、高さは2,048ピクセルまでしか指定できません）。FlashPlayer 9以前およびAIR 1.1以前では、制限は高さ2,880ピクセル、幅2,880ピクセルです。

しかし、Flash Player 11からは「BitmapDataオブジェクトは最高解像度16メガピクセル（16,777,215ピクセル）に制限されなくなり、ビットマップの最大幅／高さは8,191ピクセルに制限されなくなりました」。英文ドキュメントのBitmapDataクラスには、つぎのように説明されています(野中訳)。

• SWF 13以降(Flash Player 11とAIR 3)では、使えるメモリが実際上の制限になる。(理論上、幅と高さの上限は正の整数の最大値で、twipとするため20で割る。しかし、メモリの上限の方が、その数値に達するよりはるか前だろう。)
• SWF 10(Flash Player 10とAIR 1.5)では、BitmapDataオブジェクトの最大サイズは幅と高さが各8,191ピクセルで、総数は16,777,215ピクセルを超えられない。(したがって、BitmapDataオブジェクトの幅が8,191ピクセルであれば、高さは2,048ピクセルにしかできない。)
• SWF 9(Flash Player 9とAIR 1.1)の制約は、幅と高さがそれぞれ2,880ピクセルになる。幅または高さに2,880を超える数値を定めると、新たなインスタンスがつくれない。

Manipulating pixels with BitmapData.setPixel() and BitmapData.setVector() methods - wonderfl build flash online

実際のコードそのものはwonderflでご覧いただけますので、ここではフレームアクションに直して簡単にご説明します。なお、ビットマップのインスタンスを動的につくって配置する方法については、gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」第34回「3次元空間における回転」2ページ「ビットマップのインスタンスを動的に配置する」をお読みください。

ひとつ目は、BitmapData.setPixel()メソッドで、ピクセルごとに単純に塗った場合です。メソッドには初めのふたつの引数でxy座標、そして3つ目にRGBカラーを渡します。

BitmapDataオブジェクト.setPixel(x座標:int, y座標:int, RGBカラー:uint):void

以下のスクリプト001は、ステージ一杯の大きさのBitmapDataオブジェクトをBitmapインスタンスに入れて配置し、青(0x0000FF)から赤(0xFF0000)のグラデーションで塗ります(図001)。初めのforループは垂直方向に赤成分を0から255まで増やし、入れ子のforループで水平方向に青成分を0から255に高めます。なお、カラー値に0.5を加えているのは、最大値の端数が切捨てられて255に達しないことを避ける四捨五入の処理です。

図001■ グラデーションは右方向に青・下方向に赤を高める

スクリプト001■ BitmapData.setPixel()メソッドでグラデーションの塗りを設定する

var nWidth:int = stage.stageWidth;

var nHeight:int = stage.stageHeight;

var myBitmapData:BitmapData = new BitmapData(nWidth, nHeight, false);

var myBitmap:Bitmap = new Bitmap(myBitmapData);

addChild(myBitmap);

// myBitmapData.lock();

for (var i:uint  = 0; i < nHeight; i++) {

	var pixelY:uint = i / nHeight * 256 + 0.5;

	for (var j:uint = 0; j < nWidth; j++) {

		var pixelX:uint = j / nWidth * 256 + 0.5;

		var color:uint = pixelY << 16 | pixelX

		myBitmapData.setPixel(j, i, color);

	}

}

// myBitmapData.unlock();

BitmapDataオブジェクトのピクセルを塗ると、それを参照するBitmapインスタンスのデータが更新されます。しかし、フレームアクションが済むまでインスタンスのイメージはステージに描画されません。いちいちデータを反映するのは無駄です。

そこで、forループに入る前にBitmapData.lock()メソッドを呼出すと、BitmapDataオブジェクトの書替えは、Bitmapインスタンスに反映されません。そして、ピクセルごとの塗りを終えてforループから抜けたとき、BitmapData.unlock()メソッドでデータを更新すればよいのです。前掲スクリプト001でコメントアウトされている2行のステートメントを有効にすると、その結果が確かめられます。これが、ふたつ目のやり方です。

3つ目は、BitmapData.setVector()メソッドでピクセルを塗ります。このメソッドはピクセルごとのカラーをuintベース型のVectorオブジェクトに納めて、引数に渡します。

BitmapDataオブジェクト.setVector(矩形領域Rectangleオブジェクト:Rectangle, (A)RGBカラーVectorオブジェクト:Vector.):void

つまり、BitmapDataオブジェクトを塗るのはBitmapData.setVector()メソッド1回の呼出しで一気に行います。そのため、Bitmapインスタンスのデータの更新を止めるという必要がありません。このBitmapData.setVector()メソッドを用いたのが、つぎのスクリプト002です。

スクリプト002■ BitmapData.setVector()メソッドでグラデーションの塗りを設定する

var nWidth:int = stage.stageWidth;

var nHeight:int = stage.stageHeight;

var myBitmapData:BitmapData = new BitmapData(nWidth, nHeight, false);

var myBitmap:Bitmap = new Bitmap(myBitmapData);

var size:uint = nWidth * nHeight;

var pixels:Vector.<uint> = new Vector.<uint>(size);

addChild(myBitmap);

for (var i:uint  = 0; i < size; i++) {

	var pixelX:uint = (i / nWidth * 256 + 0.5) % 256;

	var pixelY:uint = int(i / nWidth) / nHeight * 256 + 0.5;

	pixels[i] = pixelY << 16 | pixelX;

}

myBitmapData.setVector(myBitmapData.rect, pixels);

なお、BitmapDataオブジェクトをコンストラクタメソッドの呼出しでつくるとき、第3引数に不透明となるfalseを渡しています。この場合、BitmapData.setVector()メソッドの第2引数とするVectorオブジェクトには、RGBカラーを整数エレメントに納めればよいです。

もし、BitmapDataオブジェクトを透明に(第3引数をtrueもしくは省略)したときは、ARGBカラーをVectorオブジェクトのエレメントとして加えなければなりません。

【角度からxy座標を定める】

1. 原点からの距離がrで正のx軸となす角度がθの座標

x座標: r cosθ
y座標: r sinθ

2. 座標(x, y)を原点でθ回転した座標

x座標: x cosθ - y sinθ
y座標: x sinθ + y cosθ

01 原点からの距離と角度で位置を定める

三角関数は、原点(0, 0)からの距離が1で正のx軸となす角度がθのxy座標を(cosθ, sinθ)と定めました(gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」第16回「三角関数を使った楕円軌道のアニメーション」参照)。したがって、原点からの距離がrで正のx軸となす角度がθのxy座標は(r cosθ, r sinθ)になります(図001)。

x = r cosθ
y = r sinθ

図001■原点からの距離がrで正のx軸となす角度がθの座標をsinとcosで表す

原点を中心とした座標の回転は、上式で角度θを増減させればよいことになります。MovieClipインスタンスをタイムラインに動的に置いて、ステージの真ん中を軸に回してみましょう。まずは、[ライブラリ]でMovieClipシンボルを選び、[シンボルプロパティ]ダイアログボックスで[ActionScript用に書き出し]にチェックして、[クラス]にはMyClassと入力します(図002)。

図002■ MovieClipシンボルにクラスを設定する

以下のスクリプト001をメインタイムラインのフレームに書くと、動的につくられたMovieClipインスタンス(my_mc)がステージ中央を原点として回ります(図003)。予め親Spriteインスタンス(mySprite)を置いて、原点となる基準点をステージの真ん中にしました。

MovieClipインスタンス(my_mc)は、角度0となる時計の3時の位置からアニメーションを始め、DisplayObject.enterFrameイベント(定数Event.ENTER_FRAME)のリスナー関数(xRotate())が三角関数sinとcosによりインスタンスの座標を回しています(スクリプト001)。

スクリプト001■ インスタンスの原点からの距離と角度を定めて回す

var radius:Number = 50;

var radians:Number = 0;

var theta:Number = 0.05;

var mySprite:Sprite = new Sprite();

var my_mc:MovieClip = new MyClass();

addChild(mySprite);

mySprite.x = stage.stageWidth / 2;

mySprite.y = stage.stageHeight / 2;

mySprite.addChild(my_mc);

my_mc.x = radius;

addEventListener(Event.ENTER_FRAME, xRotate);

function xRotate(eventObject:Event):void {

	radians +=  theta;

	my_mc.x = radius * Math.cos(radians);

	my_mc.y = radius * Math.sin(radians);

}

02 座標を原点から一定の角度回す

2次元平面の座標(x, y)を原点で角度θ回転した点(x', y')は、つぎの式で表されます。原点からの距離や正のx軸となす角度を調べることなく、平面上のどこにある座標でも決まった角度回した位置が求められます。

x' = x cosθ - y sinθ
y' = x sinθ + y cosθ

前掲スクリプト001のインスタンスを回転するアニメーションは、この式で定めるならつぎのスクリプト002のようになります。インスタンスの原点からの距離や正のx軸となす角度は、予め知る必要がありません。

スクリプト002■インスタンスのxy座標を直接変換して回す

var radius:Number = 50;

var theta:Number = 0.05;

var nSin:Number = Math.sin(theta);

var nCos:Number = Math.cos(theta);

var mySprite:Sprite = new Sprite();

var my_mc:MovieClip = new MyClass();

addChild(mySprite);

mySprite.x = stage.stageWidth / 2;

mySprite.y = stage.stageHeight / 2;

mySprite.addChild(my_mc);

my_mc.x = radius;

addEventListener(Event.ENTER_FRAME, xRotate);

function xRotate(eventObject:Event):void {

	var nX:Number = my_mc.x;

	var nY:Number = my_mc.y;

	my_mc.x = nCos * nX - nSin * nY;

	my_mc.y = nSin * nX + nCos * nY;

}

03 ふたつの計算の使い方

前掲スクリプト001と002はひとつのインスタンスを回すだけですので、それのみではどちらがよいとはいいきれません。原点からの距離および正のx軸となす角度が定まっていれば、前述01「原点からの距離と角度で位置を定める」の式によるのが定石でしょう。

けれど、距離や角度は調べなければわからないとき、あるいは多くの座標を同じ角度回すときには前項02「座標を原点から一定の角度回す」の式がスマートです。xy座標だけがわかればよく、しかも回す角度が決まっていれば三角関数の値も定数扱いできるからです。

つぎのスクリプト003は、100個のMovieClipインスタンスんをVectorオブジェクト(MovieClipベース型)に納めて、02の式ですべて同じ角度ずつ回します(図003)。

図003■100個のインスタンスを同じ角度ずつ回す

スクリプト003■数多くのインスタンスのxy座標を直接変換して回す

var count:uint = 100;

var maxRadius:Number = 70;

var theta:Number = 0.05;

var nSin:Number = Math.sin(theta);

var nCos:Number = Math.cos(theta);

var mySprite:Sprite = new Sprite();

var instances:Vector.<MovieClip> = new Vector.<MovieClip>(count);

addChild(mySprite);

mySprite.x = stage.stageWidth / 2;

mySprite.y = stage.stageHeight / 2;

for (var i:uint = 0; i < count; i++) {

	var radius:Number = maxRadius * Math.random();

	var radians:Number = 2 * Math.PI * Math.random();

	var my_mc:MovieClip = new MyClass();

	mySprite.addChild(my_mc);

	my_mc.x = radius * Math.cos(radians);

	my_mc.y = radius * Math.sin(radians);

	instances[i] = my_mc;

}

addEventListener(Event.ENTER_FRAME, xRotate);

function xRotate(eventObject:Event):void {

	for (var i:uint = 0; i < count; i++) {

		var my_mc:MovieClip = instances[i];

		var nX:Number = my_mc.x;

		var nY:Number = my_mc.y;

		my_mc.x = nCos * nX - nSin * nY;

		my_mc.y = nSin * nX + nCos * nY;

	}

}

リスナー関数(xRotate())がすべてのインスタンスを回す計算に用いるsinとcosの値は予め変数(nSinおよびnCos)に入れられていて、メソッドMath.sin()もMath.cos()も呼出されていないことにご注目ください。メソッドの呼出しがなければ、その分演算は速くなります。

なお、初めにforループで各インスタンスの位置をランダムに決めるときには、01の式を使いました。

もちろん、インスタンスの原点からの距離および正のx軸となす角度は計算で導けます。前者は三平方の定理、後者にはMath.atan2()メソッドを使います。たとえば、インスタンス(my_mc)の距離(radius)と角度(radians)はつぎのスクリプトで求められます。

var nX:Number = my_mc.x;
var nY:Number = my_mc.y;
var radius:Number = Math.sqrt(nX * nX + nY * nY);
var radians:Number = Math.atan2(nY, nX);

しかしこのやり方では、リスナー関数(xRotate())が呼出されるたびに、すべてのインスタンスについていちいち計算しなければなりません^[*1]。それに、01の式で座標を定めるときも、三角関数sinとcosの値がインスタンスごとに毎回変わります。スクリプト003の方が優れているといえるでしょう。

ふたつのやり方で計算したそれぞれの速さを、wonderflのコードで比べてみました。polarが式01、transformが式02になります。

Calculating coordinates to rotate - wonderfl build flash online

[*1] Vectorオブジェクトにインスタンスごとの距離と角度を納めておけば、いちいち計算する手間はなくなります。けれど、スクリプト003であればそれらの値そのものが必要ありません。

DictionaryクラスはもちろんObjectクラスを継承します。そして、前出「Dictionaryクラスを使ってみる」に述べたとおり、「Objectインスタンスは文字列の識別子を用い」て値が加えられます。Dictionaryオブジェクトにプリミティブ値のキーを定めるとObjectインスタンスとしてふるまい、キーは文字列に変換して値を納めるようです(表001)。

表001■Dictionaryオブジェクトのふたとおりのふるまい

Objectインスタンスとしてのふるまい		プリミティブ値のキーは文字列に変換する
キー	データ型	値の例
文字列	String (未定義値はNull)[*1]	"a"、""(空文字列)、"\n"(改行)、"[object Object]"({}.toString())
数値	Number、int、uint	1、int(1)、0.5、NaN、Infinity
ブール(論理)値	Boolean	true
未定義値	Null、void	null、undefined
Dictionaryインスタンスとしてのふるまい		リファレンス型データは参照をキーにする
キー	データ型	値の例
オブジェクトや配列など	Object、Array、Vectorなど	{}、[]、new <int>[]
XMLデータ	XML	<xml />
関数	Function	function ():void {}、trace

先に、Objectインスタンスとしてのふるまいを確かめましょう。文字列のキーには、改行コード("\n")や空文字列("")も使えるようです。数値のキーも文字列に変換されます。したがって、数値と文字列の数字は区別されません。NaNやInfinityなどの特別な値も、そのまま文字列としてキーになります。ブール値や未定義値も同じです。

つぎに、Dictionaryオブジェクトにリファレンス型データ(オブジェクト)をキーに定めると、その参照に対して値が設定されます。オブジェクトや配列などをキーにすると、たとえ中身(プロパティやエレメント)の値は同じでも参照が異なれば別に扱われます。XMLデータもオブジェクトですので、ノードデータは空であってもその参照がキーになります。関数もキーにすることができます。

Dictionaryオブジェクトを使いながら、あえてプリミティブ値をキーにすることは少ないと思われます。けれど、一般にオブジェクトで型指定した場合の未定義値はnullです。初期値を必ず与えるといった注意はした方がよいでしょう。

[*1]「変数には初期値を与える」参照。

図001■MovieClipインスタンスを矢印キーで上下左右に動かす

01 ふたつの課題と繰返されるキー入力の扱い

まず、キー入力の基本的な扱いについては、gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」第13回「キーボードによる操作」をお読みください。InteractiveObject.keyDownイベント(定数KeyboardEvent.KEY_DOWN)のリスナー関数が受取るKeyboardEventオブジェクトのKeyboardEvent.keyCodeプロパティで押されたキーのコードがわかります。そこでキーの振分けをどうするかが第1の課題です。

第2の課題は、矢印キーを押し続けたときの扱いです。InteractiveObject.keyDownイベントは、押している間繰返し生じます。しかし、初めに押したときフレームレートのアニメーションを開始し、キーを放したら止めるようにします。そのためには、繰返されるイベントは除けなければなりません(前掲FLASH-japanの回答ではこの処理を省いています)。

ふたつ目の課題から先にかたづけましょう。以下のスクリプトのように、初めのInteractiveObject.keyDownイベントで押したキーのコードを変数(nPressedKey)にとります。続くイベントではそのコードが変わらないかぎり、中身の処理は端折ります。InteractiveObject.keyUpイベント(定数KeyboardEvent.KEY_UP)が起きたら、変数は初期化します。

var nPressedKey:uint = 0;
stage.addEventListener(KeyboardEvent.KEY_DOWN, xKeyDown);
stage.addEventListener(KeyboardEvent.KEY_UP, xKeyUp);
function xKeyDown(eventObject:KeyboardEvent):void {
	var nKeyCode:uint = eventObject.keyCode;
	if (nKeyCode != nPressedKey) {
		nPressedKey = nKeyCode;
		// 中身の処理
		trace(nKeyCode);  // 確認用
	}
}
function xKeyUp(eventObject:KeyboardEvent):void {
	nPressedKey = 0;
}

02 switch-caseステートメントでキー入力を切り分ける

初めの課題の押されたキーによる振分けは、条件判定によるのが定石でしょう。ここではswitch-caseステートメントを使うと、スクリプトが見やすくなります。もちろん、ifステートメントでも差支えありません。switch-caseステートメントにより矢印キーの操作を切り分けるスクリプトについては、前出「ActionScript 3.0で始めるオブジェクト指向スクリプティング」第14回「キー操作とif以外の条件判定」で詳しく解説しています。このやり方にしたがって整えたのが、つぎのスクリプト001です。矢印キーで動かすMovieClipシンボルのフレームアクションとして加えます。

スクリプト001■矢印キーの操作をswitch-caseステートメントで切り分ける

// MovieClip: 矢印キーで動かすMovieClipシンボル

var nMove:Number = 0;

var nPressedKey:uint = 0;

stage.addEventListener(KeyboardEvent.KEY_DOWN, xKeyDown);

stage.addEventListener(KeyboardEvent.KEY_UP, xKeyUp);

function xKeyDown(eventObject:KeyboardEvent):void {

	var nKeyCode:uint = eventObject.keyCode;

	if (nKeyCode != nPressedKey) {

		xRemoveAllEventListeners();

		switch (nKeyCode) {

			case Keyboard.LEFT :

				nPressedKey = nKeyCode;

				nMove = -1;

				addEventListener(Event.ENTER_FRAME, xMoveX);

				break;

			case Keyboard.RIGHT :

				nPressedKey = nKeyCode;

				nMove = 1;

				addEventListener(Event.ENTER_FRAME, xMoveX);

				break;

			case Keyboard.UP :

				nPressedKey = nKeyCode;

				nMove = -1;

				addEventListener(Event.ENTER_FRAME, xMoveY);

				break;

			case Keyboard.DOWN :

				nPressedKey = nKeyCode;

				nMove = 1;

				addEventListener(Event.ENTER_FRAME, xMoveY);

				break;

		}

	}

}

function xKeyUp(eventObject:KeyboardEvent):void {

	nPressedKey = 0;

	xRemoveAllEventListeners();

}

function xMoveX(eventObject:Event):void {

	x += nMove;

}

function xMoveY(eventObject:Event):void {

	y += nMove;

}

function xRemoveAllEventListeners():void {

	removeEventListener(Event.ENTER_FRAME, xMoveX);

	removeEventListener(Event.ENTER_FRAME, xMoveY);

}

[ムービープレビュー]を確かめると、上下左右の矢印キーをおしたとき、その方向にインスタンスがフレームレートで移動します。なお、EventDispatcher.removeEventListener()メソッドを呼出したとき(関数xRemoveAllEventListeners())、第2引数に渡したリスナーがイベントに登録されていなくてもとくに問題は生じません。

03 配列によりキーコードを切り分ける

キーコードは正の整数で一意に定められています。重複しない整数はインデックスとして使うことができ、配列ととても相性がよいです。配列の基本的な扱い方とキーコードへの適用について、前出「ActionScript 3.0で始めるオブジェクト指向スクリプティング」第15回「配列を使ったキーコードとプロパティの扱い」で詳しく解説しました。このやり方で整えたのがつぎのスクリプト002です。

スクリプト002■矢印キーのコードを配列により切り分ける

// MovieClip: 矢印キーで動かすMovieClipシンボル

var nMove:Number = 0;

var nPressedKey:uint = 0;

var moveFunction:Function;

var movements:Array = [];

movements[Keyboard.LEFT] = [-1, xMoveX];

movements[Keyboard.RIGHT] = [1, xMoveX];

movements[Keyboard.UP] = [-1, xMoveY];

movements[Keyboard.DOWN] = [1, xMoveY];

stage.addEventListener(KeyboardEvent.KEY_DOWN, xKeyDown);

stage.addEventListener(KeyboardEvent.KEY_UP, xKeyUp);

function xKeyDown(eventObject:KeyboardEvent):void {

	var nKeyCode:uint = eventObject.keyCode;

	if (nKeyCode != nPressedKey) {

		xRemoveAllEventListeners();

		var movement:Array = movements[eventObject.keyCode];

		if (movement) {

			nPressedKey = nKeyCode;

			nMove = movement[0];

			moveFunction = movement[1];

			addEventListener(Event.ENTER_FRAME, moveFunction);

		}

	}

}

function xKeyUp(eventObject:KeyboardEvent):void {

	nPressedKey = 0;

	xRemoveAllEventListeners();

}

function xMoveX(eventObject:Event):void {

	x +=  nMove;

}

function xMoveY(eventObject:Event):void {

	y +=  nMove;

}

function xRemoveAllEventListeners():void {

	removeEventListener(Event.ENTER_FRAME, xMoveX);

	removeEventListener(Event.ENTER_FRAME, xMoveY);

}

前出「配列を使ったキーコードとプロパティの扱い」で示したスクリプトと大きく異なるのは、配列にプロパティの文字列ではなく、関数(xMoveX()またはxMoveY())の参照を納めたことです。プロパティを直接いじるより、関数で扱う方が安全で応用範囲も広がります^[*1]。さらに、配列をVectorオブジェクトに置換えると、扱いがより速くなります。詳しくは「キーボードのキー操作をVectorオブジェクトで扱う」をお読みください。

[*1] さらに汎用性を高めた考え方としては、FumioNonaka.com「条件分岐をポリモーフィズムに置換える」をご参照ください。

スクリプト001■ガベージコレクションを働かせる

var nCount:uint = 0;

var mySprite:Sprite = new Sprite();

var myTimer:Timer = new Timer(500, 1)

stage.addEventListener(MouseEvent.CLICK, xStop);

mySprite.addEventListener(Event.ENTER_FRAME, test);

mySprite = null;

myTimer.addEventListener(TimerEvent.TIMER, xGetMemory);

function test(eventObject:Event):void {

	trace(nCount++, System.totalMemory);

}

function xStop(eventObject:MouseEvent):void {

	gcHack();

	myTimer.start();

}

function gcHack():void {

	// [ムービープレビュー]なら以下でも動作する

	// System.gc();

	try {	// ガベージコレクションの裏技

		new LocalConnection().connect("test");

		new LocalConnection().connect("test");

	} catch (errorObject:Error) {}

}

function xGetMemory(eventObject:TimerEvent):void {

	trace(eventObject.type, System.totalMemory);

}

ステージをクリックすると、StageオブジェクトのInteractiveObject.clickイベントに加えたリスナー関数(xStop())が裏技の処理(gcHack())を呼出してガベージコレクトします。その結果、Spriteインスタンス(mySprite)のDisplayObject.enterFrameイベントリスナー(test())がメモリから消えて[出力]は止まります。併せて、TimerオブジェクトのTimer.timerイベントリスナーが0.5秒後のメモリ使用量を確かめています(図001)。

図001■クリックでガベージコレクションが働いてメモリ使用は減る

なお、一般のネット環境でも動くことを確かめるため、wonderflにサンプルをアップロードしました。初めに述べたように正規サポートの機能ではありませんので、テストや実験などの範囲で使うのがよいでしょう。

Garbage Collection Hack - wonderfl build flash online

[*1] nick bilyk「flash garbage collection」の「Forcing the garbage collector to run」参照。

var test:World = new World();

普通はそのクラスの「型が見つからない」とか「未定義である」といったエラーが起こるはずです。ところが実際には、コンパイルエラー#1136が示されます。

引数の数が正しくありません。正しくは 2 です。

var test:World = new World(this,this);
function createWorld() {}
function getStepSize(temp) {}
function setStepSize(temp, temp2) {}
trace(test);  // 出力: [object World]  

[ムービープレビュー]を試すと、Worldインスタンスができ上がったことを[出力]で確かめられます。

しかし、Worldクラスが文書化されていないことに加えて、Flash CS4 ProfessionalやFlash Professional CS5.5ではクラスが存在せず、したがってインスタンスもつくれません。CS5で要らないクラスを消し忘れたものと推測されます。

たまたまWorldという名前のクラスを定めたときに重複する可能性があるので、注意しましょう。

* The English version of this article is "Mysterious class World in Flash CS5" in JActionScripters.com.

図001■ MovieClipシンボルの中に[TLFテキスト]を置く

すると、メインタイムラインをLoaderオブジェクトの表示リストから除くときに、DisplayObject.removedFromStageイベントが送られるのです。つまり、インスタンスをステージから消すときに行うつもりの処理を、TLFテキストの初期化が終わってこれからまさにステージで表示されるべきときに実行してしまうことになります。

さらにたちの悪いことに、最新のCS5.5では動作が変わります。メインタイムラインは初めからStageオフジェクトの子インスタンスとして加えられたまま、もうひとつTLFテキストを初期化するインスタンスがStageオブジェクトの表示リストに加わるのです。つまり、初期化のときインスタンスにDisplayObject.removedFromStageイベントは起こりません。ですから、このイベントは初めの期待どおり、インスタンスがStageオブジェクトを頂点とする表示リストから外れるとき発生します。

問題はFlash Player 10.1でどうやってTLFテキスト初期化時のDisplayObject.removedFromStageイベントを振分けるかです。もちろん、Flash Playerのバージョンを調べるやり方も考えられます。しかし、メインタイムラインつまりインスタンスのDisplayObject.rootプロパティの参照が、Stageオブジェクトの表示リストの子インスタンス(インデックス0)と同じかどうかを確かめればよいでしょう。

以下のスクリプト001は、TLFテキストが含まれたMovieClipシンボルのフレームアクションです。MovieClipインスタンスがDisplayObject.removedFromStageイベントを受取ったとき、リスナー関数(xRemovedFromStage())はStageオブジェクトの子(インデックス0)がメインタイムラインに等しいとき処理を行います。

スクリプト001■DisplayObject.removedFromStageイベントでメインタイムラインがStageオブジェクトの子かどうかを確かめる

var my_txt:TLFTextField;

addEventListener(Event.REMOVED_FROM_STAGE, xRemovedFromStage);

function xRemovedFromStage(eventObject:Event):void {

	var childAt0:DisplayObject = stage.getChildAt(0);

	if (childAt0 == root) {  // メインタイムラインがStageオブジェクトの子かどうか

		removeEventListener(Event.REMOVED_FROM_STAGE, xRemovedFromStage);

		// 処理内容を書く

		removeChild(my_txt);  // TLFインスタンスを表示リストから除く

		my_txt = null;  // TLFインスタンスの参照を消す

	}

	trace(childAt0);

}

なお、「予め配置したインスタンスの存在しないフレームに移動しても参照が消えない」と同じ問題を避けるため、TLFテキストのインスタンス(my_txt)はMovieClipインスタンスの表示リストから除き、参照を(nullの代入によって)消しています。

表001■ふたつの数値のうちの最大値・最小値を求める

Mathクラスのメソッド	条件演算子?:による書替え
Math.max(a, b)	(a > b) ? a: b
Math.min(a, b)	(a < b) ? a: b

条件演算子に書替えた方が速いのは、大きくふたつ理由があると考えられます。第1は、Math.max()やMath.min()メソッドには、いくつでも引数が渡せることです。つまり、引数の数を確かめ、すべての大小を調べることが求められます。そのため、数値はふたつと決めて、それらの大小を比べる?:演算子の処理の方が速くなるのです。

任意の数の引数から最大値を返す関数は、たとえばつぎのスクリプト001のように定められます(不定数の引数定義については、「...(rest)パラメータ定義キーワード」参照)。しかし、この関数の処理は、引数を不定にしてしまったため、Math.max()メソッドと比べて決して速くありません(後掲テスト001参照)。

スクリプト001■任意の数の引数から最大値を取出す関数

function xMax(...values):Number {

	var nLength:uint = values.length;

	var nMax:Number = values[0];

	for (var i:uint = 1; i < nLength; i++) {

		var myValue:Number = values[i];

		if (myValue > nMax) {

			nMax = myValue;

		}

	}

	return nMax;

}

条件演算子を使った方が速い理由の第2は、ステートメントに直接書かれており、関数として定められていないことです。このような書き方を「インライン」といいます。Adobeの「Flash Platformのパフォーマンスの最適化」には、「その他の最適化」の項でつぎのように説明しています。

関数呼び出しは負荷を増加させる可能があります。コードをインライン化して、関数呼び出しの回数を削減するようにします。コードのインライン化は、純粋なパフォーマンスの最適化に適した方法です。ただし、インラインコードではコードの再利用が困難で、SWFファイルのサイズが大きくなる可能性があるので注意してください。

たとえ引数をふたつに決めて演算子?:で比べたとしても、つぎのスクリプト002のように関数として定めればインラインよりは遅くなります(後掲テスト001参照)。

スクリプト002■ふたつのの引数から最大値を取出す関数

function xMax(n0:Number, n1:Number):Number {

	var nMax:Number = (n0 > n1) ? n0 : n1;

	return nMax;

}

ご参考のために以下のテスト001で、Math.max()メソッドと条件演算子を使った最大値の取出しについて、引数不定とふたつにかぎった場合やインラインとの速さを比べてみました。なお、引数不定のときは、4つの数で試しています。

テスト001■Math.max()メソッドと条件演算子?:で最大値の取出しを比べる

Getting the max value with Math.abs() vs custom methods - wonderfl build flash online

Point.distance(Pointインスタンス0, Pointインスタンス1)
Vector3D.distance(Vector3Dインスタンス0, Vector3Dインスタンス1)

決して、これらのメソッドを使っていけないという訳ではありません。ただ、座標は大量に扱うことがめずらしくなく、計算の速さを求めざるを得ない場合があります。そのようなとき、2点間の距離を求めるのに、Math.sqrt()メソッドで三平方の定理により導くのが有効だということです。

ふたつの座標の間の距離を、Math.sqrt()メソッドと三平方の定理で求めてみましょう。クラスの静的メソッドと同じ仕様で関数を定めます。以下のスクリプト001はPoint.distance()メソッドと同じく引数にふたつのPointインスタンスを、スクリプト002はVector3D.distance()と同じふたつのVector3Dインスタンスを受取って、ふたつの間の距離をNumber型の数値で返します。なお、座標値の2乗はMath.pow()メソッドでなく、速さを稼ぐため変数に入れた数値を単純に2回掛合わせています。

スクリプト001■ふたつのPointオブジェクトの間の距離をMath.sqrt()メソッドで求める

function distance2D(beginPoint:Point, endPoint:Point):Number {

	var nX:Number = endPoint.x - beginPoint.x;

	var nY:Number = endPoint.y - beginPoint.y;

	var distance:Number = Math.sqrt(nX * nX + nY * nY);

	return distance;

}

スクリプト002■ふたつのVector3Dオブジェクトの間の距離をMath.sqrt()メソッドで求める

function distance3D(beginVector3D:Vector3D, endVector3D:Vector3D):Number {

	var nX:Number = endVector3D.x - beginVector3D.x;

	var nY:Number = endVector3D.y - beginVector3D.y;

	var nZ:Number = endVector3D.z - beginVector3D.z;

	var distance:Number = Math.sqrt(nX * nX + nY * nY + nZ * nZ);

	return distance;

}

ご参考のために、PointやVector3Dクラスの静的メソッドとMath.sqrt()で三平方の定理により求める距離計算の速さを比べてみました。テスト001はPoint.distance()とMath.sqrt()(三平方の定理)、テスト002がVector3D.distance()とMath.sqrt()(三平方の定理)の比較です。

テスト001■Point.distance()とMath.sqrt()(三平方の定理)で2点間の距離を求める比較

Getting distance with Point.distance() and Math.sqrt() methods - wonderfl build flash online

テスト002■Vector3D.distance()とMath.sqrt()(三平方の定理)で2点間の距離を求める比較

Getting distance with Vector3D.distance() and Math.sqrt() methods - wonderfl build flash online

• 第39回「TLFTextFieldクラスを使う」
• 第40回「Text Layout Frameworkでテキストコンテンツを表示する」
• 第41回「Text Layout Frameworkへの外部XMLデータの読込みとユーザーインタラクション」

[1]FLASH-japan:
「nullのオブジェクト参照のプロパティまたはメソッドにアクセスすることはできません」
「TLFテキストボックスを配置すると、クラスからstage変数が取得できない」
クラス定義でflashx.textLayoutパッケージのクラスを使ったとき、コンストラクタメソッドからDisplayObject.stageプロパティでStageオブジェクトにアクセスできません。→「flashx.textLayoutパッケージのクラスを使うとコンストラクタからStageにアクセスできない」

[2]FLASH-japan:「TLFテキストのフォーマット変更について」
予めタイムラインに置いたTLFテキスト(TLFTextField)インスタンスに、TextLayoutFormatオブジェクトでフォーマットを適用しようとしても、[プロパティ]インスペクタの設定が勝ります→「予め配置したTLFテキストのインスタンスにTextLayoutFormatが適用できない」

[3]FLASH-japan:「読み込んだ外部SWFファイルの操作のことで質問があります」
Loaderクラスで[TLFテキスト]が含まれた外部SWFファイルを読込むと、SWFファイルのメインタイムラインがLoader.contentプロパティで参照できません。→「TLFテキストのある外部SWFを読込むとその中のオブジェクトにアクセスできない」

[4]「予め配置したインスタンスの存在しないフレームに移動しても参照が消えない」
MovieClipシンボルの中に[TLFテキスト]があると、MovieClipインスタンスのないフレームに移っても、インスタンスはメモリから消えません。

[5]RIAxDNP「【TLF】ハマったポイントと回避方法」
TLF(Text Layout Framework)について、ハマったポイントと解決方法を紹介したblog記事です。

[5]「TLFテキストを含むインスタンスがステージの表示リストから除かれるとき」(2011/07/15追加)
ステージに置いたインスタンスがタイムラインから除かれるときには、DisplayObject.removedFromStageイベント(定数Event.REMOVED_FROM_STAGE)が起こります。ところが、そのインスタンスがTLFテキストを含むと、内部的に初期化が行われるため、一筋縄ではイベントが意図どおりに扱えません。

[6]「TLFテキストが配置されたメインタイムラインの初期化」(2011/08/07追加)
[TLFテキスト]で使われるActionScriptライブラリは、デフォルトではランタイム共有ライブラリとして読込まれます。そのため、[TLFテキスト]を用いたSWFファイル本体は容量が小さく抑えられるものの、ライブラリのロードに少し時間がかかったり、初期化される間にメインタイムラインが密かに表示リスト間をさまよったりします。しかも、そのふるまいが、Flash Player 10や10.1(Flash Professional CS5)と10.2(同CS5.5)とでは異なることに、注意しなければなりません。

図001■ifステートメント内の静的メソッド呼出しにコメントを加える

図002■ifステートメントステートメントブロックの閉じ括弧}が余分に加わる

もちろん、括弧の対応が合わなくなります。もう一度[自動フォーマット]を行えば、シンタックスエラーを告げる警告が表れます(図003)。このパターンは、以前にもありました。ほとんど因縁をつけられているようなものです。

図003■警告のダイアログボックスがシンタックスエラーを告げる

var my_array:Array = [0, 1, 2];
var i:uint = 0;
var element:int = my_array[i + 1];  // 配列アクセス演算子に式を直接記述

[2] uint()関数は、引数の数値をuint型に変換(キャスト)します。式をuint()関数の引数に渡したうえで、その値を配列アクセス演算子[]に指定すればデータ型が定まります。

var element:int = my_array[uint(i + 1)];  // 式はuint()関数でキャストする

[3] uint型の変数を宣言して、式の値はその変数に入れたうえで、配列アクセス演算子[]にはその変数を渡すことも考えられます。

var n:uint = i + 1;  // 式の値をuint型の変数に入れる
var element:int = my_array[n];

3つのやり方を、配列とVectorインスタンスについて、それぞれ比べてみました。式が極めて単純ですし、環境によっては差が出ないこともあるでしょう。

Setting a computed number to an element of Array - wonderfl build flash online

なお、式の値をas演算子で評価した場合は、かえって処理が遅くなりました。

図001■ タイムラインに配置したMovieClipインスタンスを矢印キーで上下左右に動かす(再掲)

矢印キーのキーコードは37〜40です(gihyo.jp「ActionScript 3.0で始めるオブジェクト指向スクリプティング」第13回「キーボードによる操作」p.2の表2「Keyboardクラスの矢印キーの定数」参照)。しかし、Vectorインスタンスのエレメントは、0から始まる連番の整数でなければなりません。つまり、新たなデフォルトのVectorインスタンスには、配列と違って、いきなりインデックス37にエレメントが加えられないのです。

けれど、長さを定めたVectorインスタンスはつくれます。そして、キーボードのキーにはかぎりがあります。したがって、十分な長さのVectorインスタンスをつくれば、矢印キーのキーコード番号にエレメントが納められます。以下のスクリプト001は、前出「キーボードのキー操作を扱うふたつの手法」のスクリプト002の配列をVectorインスタンスに置換えました。実質的に書替えたのは1行目のみで、あとは変数名を形式的に変えただけです。

スクリプト001■Vectorオブジェクトのキーコードに設定した操作情報でインスタンスを動かす

var operations:Vector.<Array> = new Vector.<Array>(300, true);

operations[Keyboard.LEFT] = ["x", -1];

operations[Keyboard.RIGHT] = ["x", 1];

operations[Keyboard.UP] = ["y", -1];

operations[Keyboard.DOWN] = ["y", 1];

stage.addEventListener(KeyboardEvent.KEY_DOWN, useVector);

function useVector(eventObject:KeyboardEvent):void {

	var operation_array:Array = operations[eventObject.keyCode];

	if (operation_array) {

		var property_str:String = operation_array[0];

		var pixels:Number = operation_array[1];

		my_mc[property_str] += pixels;

	}

}

このように配列をVectorインスタンスに変えただけで、処理は速くなります。前出「キーボードのキー操作を扱うふたつの手法」でご紹介した条件判定を使うスクリプト001と比べても、速さは見劣りしません。

02 クラスに定めたメソッドの参照によりインスタンスを操作する

前掲スクリプト001からさらに速さを求めるなら、動かすインスタンスのプロパティを配列アクセス[]で参照していることが見直されるべきでしょう。プロパティ名の文字列に配列アクセス演算子[]を用いたのでは、強い参照にならないからです(Adobeデベロッパーセンター「ActionScript 3.0におけるパフォーマンス向上のヒント」01「データ型を指定する」参照)。

そこで、インスタンスを動かすためのクラス(Operation)を定義します(スクリプト002)。コンストラクタメソッドには動かすインスタンスの参照を引数に与え、ふたつのメソッド(Operation.moveX()またはOperation.moveY())で水平もしくは垂直に動かします。

スクリプト002■インスタンスを動かすクラスの定義

package {

	import flash.display.MovieClip;

	public class Operation {

		private var target:MovieClip;

		public function Operation(myTarget:MovieClip) {

			target = myTarget;

		}

		public function moveX(nPixels:Number):void {

			target.x += nPixels;

		}

		public function moveY(nPixels:Number):void {

			target.y += nPixels;

		}

	}

}

フレームアクションは、以下のようにカスタムクラス(Operation)のインスタンスをつくり、そのメソッドの参照と引数に渡す値を入れ子の配列にしてVectorオブジェクト(operations)のエレメントに加えます(スクリプト003)。キーイベントのリスナー関数(useVector())は、Vectorオブジェクトからエレメントの入れ子配列を取出し、そのインデックス0のメソッドにインデックス1の引数を渡して呼出します。

スクリプト003■Vectorオブジェクトのキーコードに設定したクラスのメソッドでインスタンスを動かす

var operations:Vector.<Array> = new Vector.<Array>(300, true);

var myOperation:Operation = new Operation(my_mc);

operations[Keyboard.LEFT] = [myOperation.moveX, -1];

operations[Keyboard.RIGHT] = [myOperation.moveX, 1];

operations[Keyboard.UP] = [myOperation.moveY, -1];

operations[Keyboard.DOWN] = [myOperation.moveY, 1];

stage.addEventListener(KeyboardEvent.KEY_DOWN, useVector);

function useVector(eventObject:KeyboardEvent):void {

	var operation_array:Array = operations[eventObject.keyCode];

	if (operation_array) {

		var xMove:Function = operation_array[0];

		var pixels:Number = operation_array[1];

		xMove(pixels);

	}

}

前掲スクリプト001が配列アクセス[]で文字列のプロパティを操作するのに比べて、このスクリプト003はメソッドの参照(Function型)に引数を渡して呼出すため、扱いは速くなります。また、メソッドであれば、より込入った処理を定義することもできるでしょう。

ご参考までに、Vectorオブジェクトのエレメントにメソッドの参照を納めた場合と、前出「キーボードのキー操作を扱うふたつの手法」のスクリプト001のように条件判定で切り分ける場合とを比べてみました。

Evaluating key codes with switch statement vs a Vector 2 - wonderfl build flash online

Vectorのサイズが時間よりも先に指定されない場合、Vectorの容量が不足すると、サイズが増えます。Vectorのサイズが増えるたびに、メモリの新しいブロックが割り当てられます。Vectorの最新の内容がメモリの新しいブロックにコピーされます。データを余分に割り当てて複製することにより、パフォーマンスに影響があります。

If the size of the vector is not specified ahead of time, the size increases when the vector runs out of space. Each time the size of the vector increases, a new block of memory is allocated. The current content of the vector is copied into the new block of memory. This extra allocation and copying of data hurts performance.

筆者は以下のように邦訳しました。比べてみると、日本語ドキュメントも必ずしも間違った訳し方をしている訳ではありません。しかし、訳者が説明の中身をおそらく十分に理解してはいないのではないかと感じられます。

Vectorの長さが前もって定められていないと、長さが足りなくなったときに増やされます。Vectorの長さが増えるたびに、新たなメモリ領域が割当てられます。そのときのVectorの中身は、その新たなメモリ領域にコピーされます。追加の割当てとデータのコピーは、パフォーマンスを損なうことになります。

ドキュメントの日本語訳だけではつまりません。実際に、Vectorインスタンスの長さを定めた場合と定めない場合で、速さを比べてみます。

Comparing speed of Vector with/out parameters - wonderfl build flash online

コンストラクタの第2引数またはVector.fixedプロパティで指定する長さの固定については、明らかな速さの違いが認められないようです。しかし、データに強い制限が加わるほど、一般的には内部的な最適化の余地は増えます。将来の改善を期待したいところです。なお、「Vectorクラス対Arrayクラスの処理速度比較」を併せてご参照ください。

*なお、この記事の英語版はJActionScriptersに載せています。
The English version of this article is posted to JActionScripters.

[条件演算子の例]

myVariable = (condition) ? valueA : valueB;

[ifステートメントの例]

if (condition) {  

    myVariable = valueA;  

} else {  

    myVariable = valueB;  

}

以下にwonderflのテスト用スクリプトを掲げました。実際の処理の速さは、オペーレーティングシステム(OS)やブラウザなどの環境によって差が出るようです。

Comparing if statement with ?: operator - wonderfl build flash online

ところが、条件演算子?:から返された値を、加算後代入演算子+=で代入しようとすると、明らかに処理が遅くなります^[*2]。

myVariable += (condition) ? valueA : valueB;

このようなとき、加算する式をオペランドに加え、代入演算子=に置換えることで速められます。

myVariable = (condition) ? myVariable + valueA : myVariable + valueB;

しかし、ifステートメントを用いた方が、勝るようです。この場合は、加算後代入演算子+=を使っても問題ありません。

if (condition) {  
    myVariable += valueA;  
} else {  
    myVariable += valueB;  
}

Comparing if statement with ?: operator on addition - wonderfl build flash online

[*1] JavaScriptについて考察したblog記事Pa works very hard「if文と三項演算子」が参考になるでしょう。

[*2] blog記事ゆの from scratch「三項演算子が遅い？」は、バイトコードの違いを分析しています。

[改訂2011/02/11] 若干の加筆補正と参考ドキュメントのリンクを加えました。

var constructed_array:Array = new Array();
var literal_array:Array = [];

どちらにしたところで、大きな違いはありません。けれど、気分によって変えるのはやめましょう。統一はしないと、見にくいです。だとすると、やはりどちらがお得なのかは気にかかります。

ActionScript 3.0では、new演算子に続けて呼出すクラスと同名のメソッドでインスタンスをつくるのがお決まりです。このメソッドを「コンストラクタ」と呼びます。他方で、数値や文字列は値を直接書いてしまうのが普通でしょう^[*1]。プログラムに直接書かれた値は、「リテラル」と呼ばれます。

Arrayインスタンスを配列アクセス演算子[]で書くのは、リテラルによるインスタンスのつくり方です。つまり、Arrayクラスのインスタンスは、コンストラクタメソッドとリテラルのどちらでも生成できます。できあがるインスタンスに、違いはありません。

Flex SDKコード記述に関する規則とベストプラクティス

Adobeは「Flex SDKコード記述に関する規則とベストプラクティス」という文書を公開しています^[*2]。題名には「Flex」と書かれているものの、ActionScript 3.0のスクリプティングについての基本原則と捉えてよいでしょう。その「Arrayリテラル」の項は、インスタンスをリテラルでつくることとしています。

new Array()ではなく、配列リテラルを使用するようにします。

正しい記述例:

[]

誤った記述例^[*3]:

new Array()

ただし、長さを定めた空の配列は、Array()コンストラクタでつくってよいとされます。確かに、長さ100の配列をリテラルで書くのは無茶でしょう。

Arrayコンストラクタは、new Array(3)といったように、要素数を規定して配列を生成する時にだけ使用するようにします。この配列は[ undefined, undefined, undefined ]を意味するものであり、[ 3 ]ではありません。

どちらが速いか

配列のインスタンスをつくる速さで比べると、Array()コンストラクタの呼出しよりリテラルで書く方が勝るようです^[*4]。その理由としては、Arrayクラスが内部的にふたつのコンストラクタをもつためではないかと考えられます。

原則として、Array()コンストラクタの引数は、エレメントとしてインスタンスに納められます。ところが、前項でも触れたように整数をひとつだけ渡すと、その長さでエレメントがundefinedのインスタンスがつくられます(表001)。このように引数の数やデータ型によって処理の異なる同じ名前のメソッドを定義することは「オーバーロード(多重定義)」と呼ばれます。

表001■コンストラクタの引数によってつくられる配列の違い

コンストラクタ呼出し	引数の意味	つくられる配列
new Array()	エレメント	[]
new Array(3)	長さ	[undefined, undefined, undefined]
new Array(0, 1, 2)	エレメント	[0, 1, 2]
new Array("a")	エレメント	["a"]

それに対して、リテラルで書く場合、配列アクセス演算子[]の中にはエレメントしか入れられません。コンストラクタと違って、エレメントか長さかという判定が要らない分、速く扱えそうです。Adobe推奨で扱いが速く、記述も簡単ですので、配列のつくり方はリテラルに軍配が上がるのではないでしょうか。

エレメントを納めたArrayリテラルの書き方

エレメントを納めたArrayインスタンスも、配列アクセス演算子[]つまりリテラルでつくれます。前掲「Flex SDKコード記述に関する規則とベストプラクティス」は、その書き方まで細かく指示しています^[*5]。括弧の内側、つまり配列アクセス演算子[]とエレメントとの間に半角スペースを置くようにというのです。

正しい記述例:

[ 1, 2, 3 ]

誤った記述例:

[1, 2, 3]

大事なのは、統一することです。それさえできれば、あとは趣味の問題といって構わないでしょう。ただ、括弧の内側に半角スペースを入れるのなら、配列にインデックスを指定してアクセスするときや、さらに関数の定義・呼出しなどで使う丸括弧()についても、同じスタイルにすべきです。ところが、文書の推奨は次表002のように、エレメントを納めたArrayリテラルだけスタイルが異なっています。

表002■宣言・アクセスについてAdobeが推奨する記述

宣言・アクセス	よい	悪い
Arrayリテラル	[ 1, 2, 3 ]	[1, 2, 3]
	[]	[ ]
配列アクセス	a[0]	a[ 0 ]
関数定義・呼出し	f(a, b)	f( a, b )
ifステートメント	if (a < b)	if ( a < b )
switchステートメント	switch (n)	switch ( n )
forステートメント	for (var i:int = 0; i < n; i++)	for ( var i:int = 0; i < n; i++ )

[*1] 数値や文字列も、コンストラクタでつくることはできます。たとえば、文字列はその値を引数にして、「new String("文字列")」という呼出しで生成されます。けれど、あえてコンストラクタを使う意味は乏しく、リテラルの方が端的です。[ヘルプ]のString()コンストラクタの項にも、つぎのような注意が添えられています。

ストリングリテラルの方がStringオブジェクトよりもオーバーヘッドが少なく、一般的により簡単に使用できます。Stringオブジェクトを使用する特別な理由がある場合以外は、Stringクラスよりもストリングリテラルを使用することをお勧めします。

[*2] 日本語版の文書は、内容が完結していません。詳しくは、英語版の「Flex SDK coding conventions and best practices」を参照されるとよいでしょう。

[*3] 誤っている訳ではありません。原文の「Array literals」もつぎのように書いているだけですので、「好ましくない」というくらいの解釈が適切でしょう。

Do this:

[]

Not this:

new Array()

[*4] wonderflのサンプルで速さを比べてみました(なお、「length」というのは、長さを0にしてインスタンスを再利用する手法)。

Initializing Arrays - wonderfl build flash online

[*5] 少し古い記事ではありますが、InfoQ「物議をかもしたAdobe Flexのコーディング規約文書」が参考になります。

図001■四方に置いた面を上下左右に回す

手直しするのは、マウスポインタの位置に応じてMatrix3Dオブジェクトに回転を加え、インスタンスのプロパティDisplayObject.transformにTransform.matrix3Dとして設定しているつぎのリスナー関数(スクリプト001)です。なお、このリスナー関数を含めたフレームアクション全体については、前掲解説をお読みください。

スクリプト001■マウスポインタの位置に応じて回転を加えるリスナー関数

function xRotate(eventObject:Event):void {

	var nRotationY:Number = (mouseX - nX) * nDeceleration;

	var nRotationX:Number = (mouseY - nY) * nDeceleration;

	myMatrix3D.appendTranslation(-nX, -nY, 0);

	myMatrix3D.appendRotation(nRotationY, Vector3D.Y_AXIS);  // x座標に応じてy軸(zx平面に垂直な軸)で回す

	myMatrix3D.appendRotation(nRotationX, Vector3D.X_AXIS);  // y座標に応じてx軸(yz平面に垂直な軸)で回す

	myMatrix3D.appendTranslation(nX, nY, 0);

	xSetOrder();

}

Matrix3D.appendRotation()メソッドで回転を加えているのは2行のステートメントです。まず、マウスポインタのx座標の位置に応じてy軸で回します。つぎに、マウスポインタのy座標の位置に応じてx軸で回しています。いい換えると、前者はzx平面に垂直な軸で回し、後者はyz平面に垂直な軸で回すということです。

さらに、マウスポインタの座標を、原点とその座標を結ぶベクトルつまり「位置ベクトル」と捉えてみましょう。すると、どちらも位置ベクトルとz軸から成る平面に垂直な軸で回しているといえます。そうであれば、水平と垂直を分けなくても、マウスポインタの(x, y)座標の位置ベクトルとz軸から成る平面に垂直な軸で回せば同じ結果になるのではないかと予想できます。

z軸もベクトルです。そして、ふたつのベクトルから成る平面に垂直なベクトルは、ふたつのベクトルの外積として導かれます。よって、z軸とマウスポインタの(x, y)座標のふたつのベクトルから外積を求め、それをMatrix3D.appendRotation()メソッドの回転軸(第2引数)として渡すことにします。この考え方で書替えたのがつぎのスクリプト002です(図002)。

スクリプト002■マウスポインタの位置から軸を求めて回転するリスナー関数

function xRotate(eventObject:Event):void {

	var nMouseX:Number = mouseX - nX;

	var nMouseY:Number = mouseY - nY;

	var mouseVector3D:Vector3D = new Vector3D(nMouseX, -nMouseY, 0);

	// z軸とマウス座標の位置ベクトルとの外積を求める

	var axisVector3D:Vector3D = Vector3D.Z_AXIS.crossProduct(mouseVector3D);

	axisVector3D.normalize();

	myMatrix3D.appendTranslation(-nX, -nY, 0);

	// z軸とマウス座標の位置ベクトルが成す平面に垂直な軸で回す

	myMatrix3D.appendRotation(mouseVector3D.length * nDeceleration, axisVector3D);

	myMatrix3D.appendTranslation(nX, nY, 0);

	xSetOrder();

}

図002■ベクトルの外積から求めた軸で回転するように書替えたリスナー関数

ベクトルの外積は、 Vector3D.crossProduct()メソッドで求められます。ふたつのVector3Dオブジェクトのひとつを参照し、もうひとつは引数に渡します。その順序によって、外積として得られるVector3Dオブジェクトの向きが逆になりますので、ご注意ください。

また、Matrix3D.appendRotation()メソッドの第2引数に渡す回転軸のVector3Dオブジェクトは、長さが1の「単位ベクトル」にします。単位ベクトルに変換するメソッドは、Vector3D.normalize()です。なお、回転する角度は、マウス座標の位置ベクトルの長さ(Vector3D.lengthプロパティ)に比例させました。

これで、Matrix3D.appendRotation()メソッドの呼出しは1度で済みます(前掲スクリプト002)。[ムービープレビュー]を確かめると、もとのスクリプト001と基本的に同じ動きになっているでしょう(前掲図001)。

図001■閉じた図形を描く

線の始まりはGraphics.moveTo()、終わりはGraphics.lineTo()メソッドで定めます。線の引き終わりは、つぎの引き始めの位置になりますので、連続した線を描くときはGraphics.moveTo()メソッドは、初めに1度呼出せば足ります。線の太さやカラーなどのスタイルは、Graphics.lineStyle()メソッドで設定します。

閉じた図形を描く関数drawLines()は、つぎのような仕様にしましょう。図形の頂点座標はPointインスタンスとし、配列に納めて第1引数に渡します。第2引数は、描画対象のSpriteインスタンスです。

function drawLines(_points:Array, targetSprite:Sprite):void

配列の最初の座標から線を引き始め、最後の座標まで線描したうえで、初めの座標に戻って図形を閉じます。この手順をそのままスクリプトにしようとすると、ついつぎのフレームアクションのような関数になりがちです。

スクリプト001■線描の手順をそのままスクリプトにした例

// フレームアクション

var canvas:Sprite = new Sprite();

var points:Array = [];

points.push(new Point(0, 0));

points.push(new Point(100, 0));

points.push(new Point(100, 100));

points.push(new Point(0, 100));

addChild(canvas);

canvas.x = 10;

canvas.y = 10;

drawLines(points, canvas);

// 閉じた多角形を描く関数定義

function drawLines(_points:Array, targetSprite:Sprite):void {

	var nLength:uint = _points.length;

	var myGraphics:Graphics = targetSprite.graphics;

	myGraphics.lineStyle(2, 0x0000FF);

	for (var i:uint = 0; i <= nLength; i++) {

		var _point:Point = _points[i % nLength];  // i = nLengthのとき0に戻す

		if (i == 0) {  // 開始座標のとき

			myGraphics.moveTo(_point.x, _point.y);

		} else {

			myGraphics.lineTo(_point.x, _point.y);

		}

	}

}

[ムービープレビュー]を確かめると、前掲図001のような正方形が描かれます。とくに不具合はありません。しかし、関数(drawLines())の処理に無駄が多いといえます。閉じた図形なのですから、第1引数の配列(_point)の最初の座標から描き始める必要はないのです。そこに気づくと、関数はもっとすっきり定義できます。

スクリプト002■描線を最後の座標から始めるように修正した関数

// 閉じた多角形を描く関数定義

function drawLines(_points:Array, targetSprite:Sprite):void {

	var nLength:uint = _points.length;

	var _point:Point = _points[nLength - 1];  // 配列の最後の座標

	var myGraphics:Graphics = targetSprite.graphics;

	myGraphics.lineStyle(2, 0x0000FF);

	myGraphics.moveTo(_point.x, _point.y);  // 最後の座標から描画開始

	for (var i:uint = 0; i < nLength; i++) {

		_point = _points[i];

		myGraphics.lineTo(_point.x, _point.y);

	}

}

第1引数の配列の最後の座標を、描画の開始位置に変えました。すると、forループ内は配列の初めの座標から終わりまで、ただ順に線描するだけです。初めの座標に戻らなくて済み、if条件もなくなりました。

arr1.push.apply(arr1, arr2);

Skinner氏はこの手法の利点を、Array.concat()メソッドと異なり、新たな配列がつくられないことだと述べています。つまり、Array.concat()メソッドは連結された新たな配列を戻すのに対して、Array.push()メソッドなら参照した配列に直接エレメントを加えるので、その負荷が避けられるということです。

早速、ふたつのやり方で処理の速さがどう変わるか試してみました。まず、エレメント数300の配列ふたつの連結を10,000回繰返してみました(スクリプト001)。すると、結果にばらつきがあり、明らかな違いを認めることはできませんでした。

スクリプト001■300エレメントの配列ふたつを連結

Comparison Array.concat() with the trick using Function.apply() and Array.push() - wonderfl build flash online

そこで、ふたつの配列のエレメント数を大きく違えてみることにしました(繰返し回数は1,000回に調整)。まず、連結される配列のエレメント数を10,000にし、それにエレメント数100の配列を連結します(スクリプト002)。すると、Function.apply()でArray.push()メソッドを適用する方が明らかに速くなりました。ところが、このエレメント数を逆転すると、Array.concat()メソッドの方が速くなります(スクリプト003)。

スクリプト002■10,000エレメントの配列に100エレメントの配列を連結

forked from: Comparison Array.concat() with the trick using Function.apply() and Array.push() - wonderfl build flash online

スクリプト002■100エレメントの配列に10,000エレメントの配列を連結

forked from: Comparison Array.concat() with the trick using Function.apply() and Array.push() - wonderfl build flash online

この結果から推測されるのは、Function.apply()メソッドによるArrayインスタンスの参照は速いものの、メソッドArray.push()がエレメントを追加するのはArray.concat()の連結の処理より遅いということでしょう。

[追記2011/01/13] 同じ内容を英文記事にしたJActionScripters「Merging two arrays」に、Skinner氏からのコメントが寄せられました。Array.push()メソッドでエレメントを加える処理量と、配列が新規につくられる負荷のどちらが大きいかによって違いが生じるということでした。

定石といえるのは、キーコードの整数値を条件判断で切り分けることです。もっとも、キーコードはすべて値がユニークですので、配列との相性がよいです。処理したいキーコードのインデックスに、必要な情報を納めると、条件判定が要らなくなります。

このたびのお題として、タイムラインに配置したMovieClipインスタンス(my_mc)を、キーボードの矢印キーで上下左右に動かしてみます(図001)。まず定石は、リスナー関数の引数からキーコードを調べて、switchステートメントでキーコードに応じた処理を書くことでしょう。

図001■ タイムラインに配置したMovieClipインスタンスを矢印キーで上下左右に動かす

以下のフレームアクション(スクリプト001)は、タイムラインに置いたインスタンス(my_mc)をキーボードの矢印キーで上下左右に1ピクセルずつ動かします(スクリプトの処理について詳しくは、gihyo.jp「ActionScript 3.0で始めるオブジェクト指向スクリプティング」第14回「キー操作とif以外の条件判定」をお読みください)。

スクリプト001■キーコードを条件判定して処理する

stage.addEventListener(KeyboardEvent.KEY_DOWN, use_switch);

function use_switch(eventObject:KeyboardEvent):void {

	switch (eventObject.keyCode) {

		case (Keyboard.LEFT) :

			my_mc.x -=  1;

			break;

		case (Keyboard.RIGHT) :

			my_mc.x +=  1;

			break;

		case (Keyboard.UP) :

			my_mc.y -=  1;

			break;

		case (Keyboard.DOWN) :

			my_mc.y +=  1;

			break;

	}

}

02 キーコードをインデックスとして配列に処理を与える

キーコードはすべて値がユニークですので、配列との相性がよいです。処理したいキーコードのインデックスに、必要な情報を納めると、条件判定が要らなくなります。今回のお題で必要な情報は、操作するプロパティと設定する値です。そこで、このふたつを子の配列に入れて、親配列のキーコードのイ ンデックスに納めます。

この考え方で矢印キーによる処理を行うのが、以下のフレームアクション(スクリプト002)です。配列の上下左右の矢印キーのキーコードとなるインデックスに、操作したいプロパティ(DisplayObject.xとDisplayObject.y)の文字列と設定値を入れ子の配列にして、親配列(operations_array)のエレメントに納めています。後は、リスナー関数でキーコードを調べて、親配列(operations_array)から操作情報のエレメントを取出し、配列アクセスでインスタンス(my_mc)のプロパティに値を設定します。

スクリプト002■キーコードをインデックスにした配列エレメントで操作する

var operations_array:Array = [];

operations_array[Keyboard.LEFT] = ["x",-1];

operations_array[Keyboard.RIGHT] = ["x",1];

operations_array[Keyboard.UP] = ["y",-1];

operations_array[Keyboard.DOWN] = ["y",1];

stage.addEventListener(KeyboardEvent.KEY_DOWN, useArray);

function useArray(eventObject:KeyboardEvent):void {

	var operation_array:Array = operations_array[eventObject.keyCode];

	if (operation_array) {

		var property_str:String = operation_array[0];

		var pixels:Number = operation_array[1];

		my_mc[property_str] +=  pixels;

	}

}

キーコードが上下左右の矢印キーでなければ、親配列にエレメントがありません。前掲スクリプト002のif条件で、その判定を行っています(スクリプトの処理について詳しくは、gihyo.jp「ActionScript 3.0で始めるオブジェクト指向スクリプティング」第15回「配列を使ったキーコードとプロパティの扱い」をお読みください)。

スクリプト002は、操作の情報を配列にまとめていますので扱いやすく、仕組みさえ変わらなければ操作対象のキーとプロパティを増やすのも簡単です。定石どおりキーコードをswitchステーメントで振分ける前掲スクリプト001は、スクリプト002と比べて処理が最適化されます。

wonderflに上げたサンプルでは、ふたつのスクリプトで速度は2倍近くの開きがあるようです。もっとも、キー操作を1秒間に何百回も処理することは、あまり考えられません。すると、最適化で劣ることはわかったうえで、扱いやすさから配列による処理を選ぶこともあり得るでしょう。

Evaluating key codes with switch statement vs an array - wonderfl build flash online

[追記2011/02/14] 続編として「キーボードのキー操作をVectorオブジェクトで扱う」を書きました。併せてご参照ください。

まず、escapeMultiByte()関数でエスケープした文字列を調べることが考えられます。全角は9バイトでアルファベットは1バイトです。ただし、半角でも3バイトの記号などがあることに注意しなければなりません(下表001)。

trace(getBytesTotal_escapeMultiByte("くぁwせdrftgyふじこlp"));   // 出力: 21

スクリプト001■escapeMultiByte()関数でバイト数を調べる

function getBytesTotal_escapeMultiByte(_str:String):uint {

	var nCount:uint = 0;

	var nLength:int = _str.length;

	for (var i:uint = 0; i < nLength; i++) {

		nCount += (escapeMultiByte(_str.charAt(i)).length > 3) ? 2 : 1;

	}

	return nCount;

}

さらに、半角カナはエスケープしても全角と区別は困難です(表001)。予め半角カナが含まれないことさえ確かなら、この方法でも差し支えないでしょう。

表001■文字列のエスケープ例とバイト数

文字列例	エスケープ	バイト数
あ	%E3%81%82	9
a	a	1
%	%25	3
ｱ	%EF%BD%B1	9

02 ByteArrayクラスを使う

Colin Moock氏は「GET NUMBER OF BYTES IN A UTF-8 STRING」と題するblog記事で、ByteArrayオブジェクトにより文字列のバイト数が得られることを紹介されました。さらに、永井勝則氏がFLASH-japanへの投稿で、そのスクリプトに手を加えられています。ByteArray.lengthプロパティでバイト数を求めるやり方です(スクリプト002)。半角カナは1バイトと数えられます。

trace(getBytesTotal_ByteArray("くぁwせdrftgyふじこlp"));   // 出力: 21

スクリプト002■ByteArrayクラスでバイト数を調べる

function getBytesTotal_ByteArray(_str:String):uint {

	var byteArray:ByteArray = new ByteArray();

	byteArray.writeMultiByte(_str, "shift-jis");

	return byteArray.length;

}

03 文字コードにより仕分けて数え上げる

実は、ステートメント数は増えるものの、ひと文字ずつコードを調べて数え上げる方が、処理としては速くなります(スクリプト003)。必要なら、文字コードをさらに細かく仕分けることもできます^[*1]。

trace(getBytesTotal_code("くぁwせdrftgyふじこlp"));   // 出力: 21

スクリプト003■文字コードを調べて数える

function getBytesTotal_code(_str:String):uint {

	var nCount:uint = 0;

	var nLength:int = _str.length;

	for (var i:uint = 0; i < nLength; i++) {

		var char_str:String = _str.charAt(i);

		var nCode:Number = char_str.charCodeAt(0);

		var bSingle:Boolean = (nCode < 0x7F) || (0xFF61 < nCode && nCode < 0xFF9F);

		nCount +=  bSingle ? 1 : 2;

	}

	return nCount;

}

参考までに、wonderflのテスト用スクリプトで、3つの手法を比べてみました。

Counting total bytes of characters to be distinguished between single and multi bytes - wonderfl build flash online

[*1] yoshiweb.NET「ActionScriptで文字判定」参照。

xGetNthDay(年:uint, 月:uint, 序数:int = 0, 曜日:int = 0):Date

スクリプトの考え方は、つぎのとおりです。月内に該当する日付がないとき(たとえば第6月曜日)は、nullを返すことにします。

1. 月初の曜日を調べる
2. その月の求めたい曜日の最初(第1)の日付を知る
3. 除数にしたがって7の倍数を加える
4. その日が月の中にあるかどうかを確かめたうえで返す

関数xGetNthDay()は、以下のスクリプト001のように定義しました。上記の1〜3は、剰余演算子%を使って1行で導いています。ちょっとしたパズルの感覚で、確かめていただくとよいでしょう^[*1]。なお、Dateクラスのコンストラクタメソッドに日として0を渡すと、前月末の日付が得られます。

スクリプト001■年月と除数および曜日を渡して日付が返される関数

function xGetNthDay(nYear:uint, nMonth:uint, nOrdinal:int = 0, nDay:int = 0):Date {

	var _date:Date;

	var nThisMonth:uint;

	if (nOrdinal > -1) {  // 月初から数えるとき

		_date = new Date(nYear, nMonth - 1, 1);

		nThisMonth = _date.month;

		nDay = (nDay - _date.day + 7) % 7 + nOrdinal * 7;

	} else {  // 月末から遡るとき

		_date = new Date(nYear, nMonth, 0);

		nThisMonth = _date.month;

		nDay = (nDay - _date.day - 7) % 7 + (nOrdinal + 1) * 7;

	}

	_date.date +=  nDay;

	if (_date.month != nThisMonth) {

		_date = null;

	}

	return _date;

}

2011年1月の第1月曜日と2010年12月の最後の日曜日は、つぎのように求められます。

trace(xGetNthDay(2011, 1, 0, 1));
// 出力: Mon Jan 3 00:00:00 GMT+0900 2011
trace(xGetNthDay(2010, 12, -1));
// Sun Dec 26 00:00:00 GMT+0900 2010

ついでに、2011年のハッピーマンデーも掲げておきましょう。

// [1]成人の日: 1月の第2月曜日 2011年1月10日
trace(xGetNthDay(2011, 1, 1, 1));
// 出力: Mon Jan 10 00:00:00 GMT+0900 2011
// [2]海の日: 7月の第3月曜日 2011年7月18日
trace(xGetNthDay(2011, 7, 2, 1));
// 出力: Mon Jul 18 00:00:00 GMT+0900 2011
// [3]敬老の日: 9月の第3月曜日 2011年9月19日
trace(xGetNthDay(2011, 9, 2, 1));
// 出力: Mon Sep 19 00:00:00 GMT+0900 2011
// [4]体育の日: 10月の第2月曜日 2011年10月10日
trace(xGetNthDay(2011, 10, 1, 1));
// 出力: Mon Oct 10 00:00:00 GMT+0900 2011

[2010年12月15日追記] bkzenさんがwonderflに、この関数を用いた「何年何月何週目の何曜日が何日かを求める」というカレンダーつきのサンプルをつくられました。参考に掲載させていただきます。

何年何月何週目の何曜日が何日かを求める - wonderfl build flash online

[*1] 上記の「スクリプトの考え方」にしたがうと、式はつぎのように組立てられています。ただし、求めているのは厳密には「日付」でなく、月初から数えた「日数」になります(つまり、1日が0)。

1. 月初の曜日: _date.day
2. その月の求めたい曜日の最初(第1)の日付: (nDay - _date.day + 7) % 7
3. 除数にしたがって7の倍数を加える: (nDay - _date.day + 7) % 7 + nOrdinal * 7

スクリプト001■String.replace()メソッドと正規表現で文字列を検索・置換

var test_str:String = "すもももももももももももいろいろ";

var result_str:String = test_str.replace(/もも/g, "みみ");

trace(result_str);  // 出力: すみみみみみみみみみみもいろいろ

もっとも、処理の速さは、Stringクラスのメソッドを組合わせて書いたスクリプトの方が勝るようです。

1. 最初の検索文字列の位置を求める
2. その位置までの文字列を結果に加え、置換文字列を連結する
3. 検索開始位置を残った文字列の先頭に移す

var test_str:String = "すもももももももももももいろいろ";
trace(xReplace(test_str, "もも", "みみ"));

スクリプト002■メソッドString.indexOf()とString.substring()で文字列を検索・置換

function xReplace(source_str:String, find_str:String, replace_str:String):String {

	var numChar:uint = find_str.length;

	var end:int;

	var result_str:String = "";

	for (var i:uint = 0; -1 < (end = source_str.indexOf(find_str, i)); i = end + numChar) {

		result_str +=  source_str.substring(i, end) + replace_str;

	}

	result_str +=  source_str.substring(i);

	return result_str;

}

スクリプト001と002の速さの違いをwonderflのテスト用スクリプトで比べてみました。スクリプト002の方が行数も繰返しも多いのに、正規表現を使うよりかなり速いようです。

Replacing string by using RegExp or String class only - wonderfl build flash online

var _mc:MovieClip = MovieClip(eventObject.target);

データ型の変換は、as演算子を使ってもできます。そして、処理はこちらのほうが速いようです(wonderfl「Type casting comparison」参照)。

var _mc:MovieClip = eventObject.target as MovieClip;

Type casting comparison - wonderfl build flash online

なお、このwonderflのテストでは、参考のため一旦型指定のない(*)変数を介して代入する方法も試しています。

キャストとas演算子の処理の違いについては、「演算子asとis」をお読みください。また、Array型にデータを変換するときの注意について、「配列(Array)にキャストする」をご参照ください。

var a:int = 12345;

var b:int = 67890;

trace(a, b);  // 出力: 12345 67890

a = a ^ b;

b = a ^ b;

a = a ^ b;

trace(a, b);  // 出力: 67890 12345

演算子^はふたつの計算対象(オペランド)の整数を2進数で扱い、各桁のどちらか一方のみが1のとき1、そうでないときは0にします。「ビットごと」というのは、繰り上がりや繰り下がりがなく、それぞれの桁だけで演算するということです。すると、ひと桁(1ビット)の数aとbの値は0か1で、総当たりの組合わせは4とおり、a^bの計算結果は次表001のようになります。

表001■ビットごとの排他的論理和演算子^の計算結果

a\b	0	1
0	0	1
1	1	0

では、改めて前掲のスクリプト001について、ビットひとつの計算結果を4とおり確かめてみましょう。次表002に掲げたように、変数aとbの値がいずれも入替わります。2進数に換えた整数のすべての桁(ビット)でこの計算が行われますので、結果としてふたつの変数の整数が入替わることになるのです。

表002■ビットごとの4通りの計算結果

var a:int =	0	0	1	1
var b:int =	0	1	0	1
a = a ^ b =	0	1	1	0
b = a ^ b =	0	0	1	1
a = a ^ b =	0	1	0	1

]]> tag:f-site.org,2010://1.1740 2010-12-05T10:03:05Z 2010-12-05T11:42:48Z

01 配信側クラスの仕様 ー インターフェイスINumberGenerator

配信側のインターフェイスには、少なくとも3つのメソッドを備える必要があります(スクリプト001)。

1. オブザーバーの登録: addObserver()
2. オブザーバーの削除: deleteObserver()
3. オブザーバーに配信: notifyObservers()

スクリプト001■インターフェイスINumberGenerator

package {

	public interface INumberGenerator {

		// 配信クラスに必要なメソッド

		function addObserver(observer:IObserver):void;

		function deleteObserver(observer:IObserver):void;

		function notifyObservers():void;

		// サンプルとして加えたメソッド

		function getNumber():int;

		function execute():void;

	}

}

Javaと異なりActionScript 3.0のインターフェイスでは宣言できませんが、受信するオブザーバーのインスタンス(後述インターフェイスIObserverを実装)を納めるプロパティも用意します。また、オブザーバーへの配信は、そのインスタンスのメソッド(後述update())を呼出して行います。

02 受信側クラスの仕様 ー インターフェイスIObserver

受信側のインターフェイスは、配信側クラスのメソッドnotifyObservers()から呼出されるupdate()を宣言します(スクリプト002)。

スクリプト002■インターフェイスIObserver

package {

	public interface IObserver {

		function update(generator:INumberGenerator):void;

	}

}

メソッドupdate()は、引数に配信するクラス(インターフェイスINumberGeneratorを実装)のインスタンスを受取ることにしました。したがって、必要な情報はこのインスタンスから(getNumber()メソッドにより)取出します。

03 配信側クラスの実装 ー クラスRandomNumberGenerator

配信側のクラスRandomNumberGeneratorは、つぎのようにインターフェイスINumberGeneratorを実装します(スクリプト003)。

スクリプト003■クラスRandomNumberGenerator

package {

	import flash.utils.setInterval;

	import flash.utils.clearInterval;

	public class RandomNumberGenerator implements INumberGenerator {

		private var observers:Vector.<IObserver>  = new Vector.<IObserver>();

		private var number:int;

		private var id:uint;

		private var interval:uint = 1000;

		public function RandomNumberGenerator() {}

		public function addObserver(observer:IObserver):void {

			observers.push(observer);

		}

		public function deleteObserver(observer:IObserver):void {

			var nLength:uint = observers.length;

			for (var i:uint = 0; i < nLength; i++) {

				var element:IObserver = observers[i];

				if (element == observer) {

					observers.splice(i, 1);

					break;

				}

			}

		}

		public function notifyObservers():void {

			var nLength:uint = observers.length;

			number = Math.floor(Math.random() * 50);

			for (var i:uint = 0; i < nLength; i++) {

				var observer:IObserver = observers[i];

				observer.update(this);

			}

		}

		public function getNumber():int {

			return number;

		}

		public function execute():void {

			clearInterval(id);

			id = setInterval(notifyObservers, interval);

		}

	}

}

受信するオブザーバーのインスタンスは、Vectorインスタンスのプロパティ(observers)に納めることにしました。オブザーバーの登録と削除のメソッドaddObserver()およびdeleteObserver()は、それに即した処理にしています。また、配信のメソッドnotifyObservers()は、オブザーバーのインスタンスすべてを取出して、自身を引数にそのupdate()メソッドを呼出します。そのとき、ランダムな整数(0〜49)がプロパティ(number)に設定されます。

メソッドexecute()は、配信を開始します。一定の時間間隔(1000ミリ秒)でメソッドnotifyObservers()を呼出します^[*2]。受信側のオブザーバーインスタンスは、getNumber()メソッドでランダムな整数が取出せます。

04 受信側クラスの実装 ー クラスDigitObserver

受信するオブザーバーのクラスDigitObserverは、以下のようにインターフェイスIObserverを実装します(スクリプト004)。定義するのはメソッドupdate()のみです。

スクリプト004■クラスDigitObserver

package {

	public class DigitObserver implements IObserver {

		public function DigitObserver() {}

		public function update(generator:INumberGenerator):void {

			trace("DigitObserver: " + generator.getNumber());

		}

	}

}

メソッドupdate()は、引数に受取った配信側インスタンスのgetNumber()メソッドによりランダムな整数を取出し、trace()関数でその値を[出力]します。

これで必要なインターフェイスおよびクラスは揃いました。確認用のドキュメントクラスMainを以下のように定義して[ムービープレビュー]で試しましょう(スクリプト005)。ランダムな整数が1秒ごとに[出力]されます(図001)。

スクリプト005■ドキュメントクラスMain

package {

	import flash.display.Sprite;

	public class Main extends Sprite {

		public function Main() {

			var generator:INumberGenerator = new RandomNumberGenerator();

			var observer0:IObserver = new DigitObserver();

			generator.addObserver(observer0);

			generator.execute();

		}

	}


}

図001■ランダムな整数が1秒ごとに[出力]される

04 もうひとつの受信側クラスを実装 ー クラスGraphObserver

デザインパターンのつねとして、同じインターフェイスさえ実装すれば、具体的な処理内容は変えられます。受信するオブザーバーのクラスをもうひとつGraphObserverとして定義しました(スクリプト006)。

スクリプト006■クラスGraphObserver

package {

	public class GraphObserver implements IObserver {

		public function GraphObserver() {}

		public function update(generator:INumberGenerator):void {

			var result_str:String = "GraphObserver: ";

			var count:int = generator.getNumber();

			for (var i:uint = 0; i < count; i++) {

				result_str += "*";

			}

			trace(result_str);

		}

	}

}

テスト用のサンプルですので、前掲クラスDigitObserverと変えた点はごくわずかです。取出したランダムな整数を数値でなく、"*"の数でグラフのように[出力]します(図002)。ドキュメントクラスMainには、つぎのスクリプト006のようにステートメントを加えます。

スクリプト007■修正したドキュメントクラスMain

package {

	import flash.display.Sprite;

	public class Main extends Sprite {

		public function Main() {

			var generator:INumberGenerator = new RandomNumberGenerator();

			var observer0:IObserver = new DigitObserver();

			var observer1:IObserver = new GraphObserver();

			generator.addObserver(observer0);

			generator.addObserver(observer1);

			generator.execute();

		}

	}

}

図002■ランダムな整数とそのグラフが1秒ごとに[出力]される

なお、「Observer(オブザーバー)パターン」はイベントリスナーを例に説明しています。

[*1] ActionScript 3.0への書替えは、筆者の解釈にもとづきます。

[*2] イベントリスナーはObserverパターンなので使わずに、あえてsetInterval()メソッドを用いました。

ここでは、エレメントを最後に加える操作と先頭からエレメントを除く操作について、連結リストとVectorクラスを比べてみます。Vectorクラスのメソッドでは、push()とshift()です。テスト用のスクリプトをwonderflに掲げました。エレメントはuint型にしています。

push() and shift() operation of Vector and Linked List - wonderfl build flash online

エレメントを最後に加えていく処理は、連結リストの有利さが感じられず、Vector.push()メソッドより遅い結果になりました。けれど、先頭からエレメントを取出す場合には、インデックスの連番を振り直す必要がありません。単に先頭エレメントの参照を切るだけですから、連結リストの速さが際立ちます。

先頭エレメントの追加や削除、あるいは(インデックスでなく)エレメントの参照から途中に操作を加えるような処理には、連結リストが適しているでしょう。

値がundefinedになる場合としては、存在しない配列エレメントやvoidの戻り値もあります。

var _array:Array = [];
trace(_array[0]);  // 出力: undefined
trace(test());  // 出力: undefined
function test ():void {
}

プリミティブ型

プリミティブでは、String型のデフォルト値がnullであることに注意が必要です。String以外のたとえばint型であれば、デフォルトでもintクラスのメソッドが使えます。

var i:int;
trace(i.toPrecision(2));  // 出力: 0.00

ところが、String型のデフォルト値nullに対しては、プロパティやメソッドにアクセスできず、ランタイムエラーになります。

var _str:String;
trace(_str.toLowerCase());
// 出力:
TypeError: Error #1009: null のオブジェクト参照のプロパティまたはメソッドにアクセスすることはできません。

また、nullはString型のプロパティに設定することもできません。

キャスト

数値の型の間では、自動的に変換が行われます。たとえば、Number型の値をint型の変数に入れれば、整数に変換されます(とはいえ、きちんと型変換することが安心です)。

var f:Number = 5.5;
var i:int = f as int;
trace(i);  // 出力: 0
i = f;
trace(i);  // 出力: 5

また、Arrayクラスについては、Array()関数でキャストすることはできません。このときは、as演算子を使いましょう。

instanceof

instanceof演算子は、ActionScript 3.0でも一応は使えます。ただし、is演算子を用いるよう警告されます。また、instanceof演算子では、インターフェイスの実装は調べられません。

var _mc:MovieClip = new MovieClip();
trace(_mc is IBitmapDrawable);  // 出力: true
trace(_mc instanceof IBitmapDrawable);  // false

ジェネリクスとコレクション

Flash Professional CS5からは、エレメントを納めたVectorインスタンスが生成できるようになりました。

インスタンスをドラッグして回したり、マウスボタンを放して滑らせるアニメーション表現をクラス定義しました。[ライブラリ]のMovieClipシンボルに[クラス]として設定すれば、インスタンスのドラッグ&ドロップでそのようなインタラクティブな動きをします。

図001■[シンボルプロパティ]ダイアログボックスで[クラス]を入力

これで作業は終わりです。[ムービープレビュー]を確かめると、クラスDragRotaterを設定したインスタンスがドラッグで回転し、マウスボタンを放すと減速しながら滑っていきます。

クラスに定義したつぎのふたつのプロパティを設定することができます(図002)。

1. deceleration: 減速率を示し、0から1の間の値を指定します(値が小さいほど早く減速)。デフォルト値は0.8です。
2. ratio: 回る勢いのつきやすさを示します(値が大きいほど回りやすい)。デフォルト値は0.02です。

図002■ふたつのプロパティで動きが変えられる

スクリプトの中身は、「インスタンスをドラッグで回して動かす」に解説しました。要点がわかりやすいように、クラスでなくフレームアクションを基本にしています。つぎのふたつがおもな課題です。

1. マウスクリックした点が中心になるようにインスタンスを回す
2. マウスポインタの動きをどのように回転の速さに反映させるか

ActionScript 3.0を使った3次元表現についてのビデオ解説が折に触れて公開され、ある程度数もまとまってきました。視聴しやすいように整理しておきます。

Flash Player 10から備わった3次元表現の基礎を解説します。

3次元空間における消失点のコントロールの仕方や注意点を紹介します。

Matrix3Dクラスを使った回転について紹介します。

Matrix3Dクラスを使ってxyの2軸で回転する処理について紹介します。

3次元空間の座標処理などに用いられ、いわば最適化された配列ともいえるVectorクラスについて紹介します。

面を三角形に分けて変形するGraphics.drawTriangles()メソッドを紹介します(前編)。

面を三角形に分けて変形するGraphics.drawTriangles()メソッドを紹介します(後編)。

Graphics.drawTriangles()メソッドの応用と注意点を紹介します(前編)。

Graphics.drawTriangles()メソッドの応用と注意点を紹介します(後編)。

Vector3Dクラスを使用する際のポイントと注意点を紹介します(前編)。

Vector3Dクラスを使用する際のポイントと注意点を紹介します(後編)。