BitmapData を使った場面転換方法

昨日のエントリ:
BitmapData を使って Flash Player の再生パフォーマンスを改善する方法
本家記事からダウンロードできるサンプルファイル一式読んで気づいたことをメモしておきます。

場面転換時の工夫

ステージ上にビデオ映像やベジェアニメ等が配置されていて、それが賑やかに動いているようなシーンをマスクアニメーション等で格好良く場面転換させたい時は、ステージ全体を BitmapData として一枚絵として取得し、そのビットマップを同位置に配置する。それでもその下では元の素材となったムービークリップが動いているので、このムービークリップに対し、gotoAndPlay(“EMPTY”) で、空っぽのフレームに移動させることで、動きをストップ&非表示状態にする。この一連のテクニックで場面転換(トランジション時)の FlashPlayer の描画の負荷が劇的に軽くなり、スムーズになります。そのパフォーマンスの差は、本家サンプルをいじれば一目で確認できますね。
マスクアニメーションだけでなく、ステージごとスライド移動する時にも使えるテクニックです。トランジション時に、ステージ上のエレメント(部品・素材)が動いていなくてはいけない余程の理由がないなら、この手法を使えばよさそう。

逆マスク効果

サンプルで円がステージを覆って、コンテンツムービーを消していく表現は、実はブレンドモード「消去」で再現しているのです。通常のマスク方法では、重なった部分だけを表示するのに対し、このサンプルのマスクは、重なった部分だけを非表示にするので、仮設的に「逆マスク」と呼ぶことにします。でも、マスク用 MC を「消去モード」するだけでは、その MC 自体が消えてしまうだけなので不十分です。マスク&コンテンツの2つの MC を包んで1つの MC にし、その MC のブレンドモードをプロパティパネルで「レイヤー」にすることで、今回のような逆マスクを実現しているのです。ちなみにブレンドモードは Flash 8 からの機能です。

なにげにシングルトン

このサンプルでは、外に置かれた Main クラスに、example.fla のルートに配置された content_mc をパラメーターとして渡し、初期化しています。なので普通に考えると、

import com.bigspaceship.labs.screenshot.Main;
var instance = new Main(content_mc);

みたいになるはずですが、この Main.as はシングルトンパターンを使っています。

/*Main.as ファイル内*/
// シングルトンパターン。FLAファイルからは、Main() ではなく Main.getInstance() で呼び出します。
public function Main() {}; //コンストラクタ文。←private にしなくてもいいの?
// getInstance メソッド。コンストラクタの代わりになる。唯一の Main インスタンス __instance を生成する。
public static function getInstance():Main { return __instance || (__instance = new Main); };

上記コメントにも書きましたが、FLA側からは以下のように getInstance メソッドを呼び出します。どうせ1回しか呼び出さないので、import 文は使わず、パスを通しつつ呼び出していますね。

/*example.fla ファイル 12フレームのフレームスクリプト*/
com.bigspaceship.labs.screenshot.Main.getInstance().initialize(content_mc);

僕はまた勉強不足なので「シングルトンの使いどころ」みたいなものが、よく分からないのだけれど、とにかく唯一のインスタンスになりそうな時に意識的に使ってみようと思います。

コーディングルール

可読性を上げるために、Main クラスインスタンスには先頭に “__”、private プロパティには “_” を付けていますね。僕も真似しようかな。

dispose を忘れないように

ScreenShot クラス内の kill メソッド内に記述されています。書籍「Flash 8 Essentials」にも書かれていますが、使わなくなったビットマップデータは dispose() して、メモリを開放してやることを忘れないように。

その他

スイッチ部分の切替・フラグの反転作業を簡単なコードで実現してる点も参考になりました。BIG SPACESHIP さんのブログには、実際の現場で重宝できるテクニックが他にも多く紹介されているので参考になります。

このエントリーをはてなブックマークに追加
はてなブックマーク - BitmapData を使った場面転換方法

Comments:0

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://www.trick7.com/blog/2007/04/05-143153.php/trackback
Listed below are links to weblogs that reference
BitmapData を使った場面転換方法 from trick7

Return to page top