BitmapData を使って Flash Player の再生パフォーマンスを改善する方法

以前日本語に翻訳した、「Performance Tips Part I」の中で書かれていた「BitmapData を使った、FlashPlayer に負担の少ないトランジション方法」に関する詳細記事を BIG SPACESHIP さんがエントリしてくださっているので日本語訳しました。

今回はサンプルのソースファイル付きなので、各自ダウンロードしていただいて、swf 画面上部のスイッチを切り替えつつ、そのパフォーマンスの違いを体験してみてください。

添付されている fla ファイルやクラスファイルを見て、自分なりに納得してから、筋が通るように翻訳したつもりですが、翻訳に自信のない箇所はグレーにしておきますので、原文をあたってください。配布ソースファイルは今回のテーマのためのファイルではあるけれども、コードが格好良くて参考になるので、別途解説エントリを書きたいと思います。
とりあえず今日は訳文のみどうぞ～。

The article below is a translation of the article:”BIG SPACESHIP LABS / » Improving Performance with BitmapData“. I respect the author Jamie and members of Big Spaceship.
related article:
trick7.com blog: 「Flash Performance Tips Part 1」の日本語訳 (Japanese)

（以下翻訳記事）

Performance Tips Part I に話を戻しますが、BitmapData クラスを利用して、ムービークリップの「スクリーンショット」を動的にキャプチャして、別の画面にトランジション（場面転換）させる手法をお話しましたね。ステージ上にいろいろと配置された PNG 画像やビデオ、ベクターグラフィック等の代わりに、1枚のビットマップ（基本は JPG 画像）としてキャプチャし、その画像を利用するというアイデアです。

私は、この難問をキャシーという我が社の優秀なデザイナーにお願いしました。to come up with something so fantastically slow that there was no way even BitmapData could save it. 彼女はやり遂げてくれました。彼女は、Visualizer からビーチボールの素材や、我々のテーブルサッカーチームのインタビュー映像、アルファ付き PNG の雲の画像等を素材にして作ってくれました。

こちらで結果をご覧いただけます。ダウンロードできるデモ用データもご用意しました。

“Josh” と “Caleb” と書かれている部分をクリックして、何度か映像を切替えてみてください。ステージ上部の “Capture Screenshot” ボタンで、トランジション時にキャプチャ画面のビットマップデータを生成するか、あるいは映像を再生したままトランジションさせるかを選べるようになっています。オンの時は、映像のトランジション時のもたつきがほとんどないかと思います。

キャシーは各トランジション時に使用している方法を次のように説明してくれました：

「簡単な円のアニメーションを水平垂直方向に並べて作ったマスク用アニメーションを用意します。そして、それをさらにネスト化したムービークリップをマスク用ムービークリップとし、ブレンドモード「消去」に設定して、マスク対象となるコンテンツを含むムービークリップの上位レイヤーになるように配置します。「消去」モードを使えば、通常のマスク効果とは逆の効果が得られます。重なったエリアだけを非表示にすることができるのです。（従来の重ねレイヤーでのマスク設定 ＆ setMask() は、重なった部分だけを表示する仕様でしたね。）そのマスク用 MC とコンテンツク MC をさらに1つのムービークリップ包んで、そのクリップのブレンドモードを「レイヤー」に設定します。この「レイヤー」にするということが重要です。そうしないとこのマスキングのトリック成立しません。

こんな感じで、ブレンドモード、ベクター、PNG画像、ビデオ等々、これらの素材を使ってしまうと、滅茶苦茶スローな（描画負荷の高い）サイトになりそうですよね？この問題を解決するために、彼女にいい方法を教えてあげました。この私の記事は Flash 8 Player をターゲットにしています。もちろん FP9 にも対応しております。

このスクリーンショットのテクニックはとてもシンプルです。BitmapData についての知識は特に必要ありません。大体このような感じになります：

_bmp = new BitmapData($draw_mc.getBounds().xMax, $draw_mc.getBounds().yMax, true, 0);
_bmp.draw($draw_mc);
$destination_mc.createEmptyMovieClip(_SCREENSHOT_NAME, $destination_mc.getNextHighestDepth()).attachBitmap(_bmp, 2);
}

あとは、draw したいムービークリップと、結果できたビットマップを attach したい場所を指定するだけでよいのです。それから、実体部分（このサンプルでは “Josh” と “Caleb” のインタビュー）のクリップのタイムラインを、何も素材を配置していないキーフレームに移動させます。複雑な描画を削除してやることで、Flash Player がマスクトランジションだけに専念できるようにしてやるのです。

遅いマシンで試してみることをおすすめします。パフォーマンスにおいて大きな違いがあるのが確認できるでしょう。