「Flash Performance Tips Part 1」の日本語訳

前回、エントリした「trick7.com blog: Flashの再生パフォーマンスを向上させる方法」ですが、エントリ以降も参照元サイト「BIG SPACESHIP LABS / » Flash Performance Tips Part I」のコメント欄にも有益な情報が飛び交っているので、全文の日本語訳に挑戦してみました。

筆者BIG SPACESHIPのJamieさんの快諾もいただけたので公開します。

The article below is a translation of the article:”BIG SPACESHIP LABS / » Flash Performance Tips Part I“. I appreciate the author Jamie and members of Big Spaceship.

---

Flashサイトを最適化し、スムーズに再生させるには、93%の努力と、6%の知識と、4%の汗と、2%ほどのバタースコッチが必要です。（映画「Charlie & the Chocolate Factory」の台詞からの引用だそうです。）
冗談はさておき、多くのコーダーがFlash Playerのパフォーマンスにイライラさせられていますが、サイトをスムーズに再生させるために、あなたができることがいくつかあるのです。

スムーズな再生のために、我々（BIG SPACESHIPスタッフ）が日々使っている手法をいくつか紹介いたします。なので、単なる思いつきではないし、複雑な手順が必要なわけでもありません。成功を保証します。

マスクは駄目だね
全部が駄目というわけではないのです。マスクがとても役に立つのは既にご存知でしょう。でも、マスクは、再生パフォーマンスを落とす原因のナンバーワンなのです。何か対象をマスクした時、Flash player は、毎フレームごとに何を描画して何を隠すのかを計算しているのです。じゃあ、マスクと上手に付き合っていくにはどうすれば良いのでしょうか？それには、少しの忍耐と、トリッキーなレイヤー構造（例えば、表示させたい領域サイズ大の穴を空けた、上位レイヤーを用意し、それを下のレイヤーにかぶせるとか）を使えば、パフォーマンス低下を防ぎつつ、同様の表示結果を得ることができるでしょう。

アルファチャンネル付きPNGとビデオについて
マスクと同様に、これも使わざるをえない時もありますが、この時もplayerはアルファの下の部分の描画の計算処理を強いられているのです。場合によって我々は半分のサイズのアルファ付きビデオをFlash上で拡大して使うこともあります。

あと、アルファ付きの動画についてですが：アルファ付きビデオの代わりに連番のPNGを使う方法も試す価値はあるかと思います。たいていの場合はビデオ形式の方が少しだけパフォーマンスが良いようですが、都度、調べてみる価値はあります。

フレームレート
いろんな議論がありますが、世に言う「マジック・フレームレート」みたいなものはありません。我々は25か30fpsで作っています。（私の知る限りでは）それがベストだと考えています。我々は都度、どちらがより良いかをテストし、決めるようにしています。でも一般的に言うと、フレームレートがサイトの再生スピードが低下する主たる原因にはならないでしょう。まぁでも通常の使用では30fps以上はあまりお奨めしません。そんなものすごいスピードでレンダリングさせてもねぇ、、。

cacheAsBitmap と BitmapData について
cacheAsBitmapを利用してのベクターのアイテムのラスタライズ化は、状況を選んで使うようにしてください。たしかにFlashがシンボルをdrawするのは１度きりで済みます。ですが、シンボルを拡大縮小や回転させるときは、決してcacheAsBitmapしないでください。この時、Flashは毎フレームごとにレンダリングとキャプチャを繰り返すので、処理が速くなるどこか遅くなってしまいます。

Da Vinci Code や Nike Air のサイトでは、我々はある部分のスクリーンショットを撮り、それを空のムービークリップにdrawさせ、その後スクリーンショットをアニメーションさせる処理をしています。これは多くのエレメントを個別に動かしたりするよりも、はるかに、相当速いです。この手法はかなりお奨めです。

_alphaよりも_visibleの方がいいよ
_alpha = 0 と _visible = false は実は全然別物です。_alphaは対象となるクリップの透明度を決定するものです。_visibleはplayer上で実際にそのクリップを描画するかしないかを決定するものです。もし、何かを非表示に設定したいのであれば、_visibleプロパティを使うようにしましょう。

onEnterFrame と setInterval について
これらの処理を使ったときは、それぞれ、onEnterFrame = null; や clearInterval(myInterval); して、メモリからクリアしておくようにしましょう。それをしないまま放っておくのは、電話の通話後に受話器を上げたまま立ち去るようなものです。

事前に数学演算は済ませておきましょう
描画直前の段階でサインウェーブ（※ -1〜1をとる波形）を演算していませんか？それは毎回同じサインカーブではないですか？そんな時は、数値を配列の中にハードコードしておきましょう。事前に数学演算をしておくことで、直前に複雑な処理をしないですみます。私は以前、トゥイーンさせたい時に、事前に配列に全てのトゥイーン値を配列に格納し、nextFrame()で毎フレーム移動させたこともあります。

無音サウンド
我々も最後の手段として使っているのですが、覚えておく価値のある手法だと思います。タイムライン上の独立したレイヤーに、無音のサウンドファイルを「ストリーミング再生・ループ」に設定して置いておくことで、playerはサウンドに同期させようとして、自動的にフレームを間引いて調整してくれるのです。

他にいい方法ありますか？これで全部だとは思ってないので（教えてね）。

——記事はここまで、以下コメントより抜粋——

3.(visitor) これとかも重要な手法ですよね。
Object型を使わない
できる限り、Object型を使わずに、それぞれデータタイプを指定すべきです。さらに（動的にせずに）オブジェクトが定義済みであるようにしましょう。あるオブジェクトのプロパティを（enter frameやintervalの使用時など）頻繁に呼び出すような状況では、Flashに予めプロパティがそのオブジェクトの中に存在することを通知しておいた方が、（ループなどの度に）毎度毎度、動的に生成したオブジェクトをチェックするよりも高速です。（※ちょっと翻訳の自信ないです。）

4.(visitor) あともう一つ：
_visible は良いのだけれど、、
_visible = false を使う時によく誤解されることなのですが、確かにオブジェクトのレンダリングはストップします（これはOK）、がしかし、そのオブジェクトの中に含まれるもの（コードやモーショントゥイーンなど）は実行され続けているのです。例を挙げると、いくつかの子要素MC（内包物）を持ったムービークリップがあるとして、その子要素がonMouseMoveイベントに関連づけられているとすると、それらのイベントはあなたがマウスを動かす度に反応し続けるのです。
ヒットエリアを定義してクリップを隠す場合などに ‘_visible’ を使うことがありまが、用法にはくれぐれもご注意下さい。子要素のコードやトゥイーンが実行されないようにしてから、全てを非表示にするとか、クリップを全部まとめてステージから削除して、再度必要になったら、リロードするようにしましょう。

5.(visitor) 私は処理終了後、ハンドラがいらなくなったらいつも、”delete this,onEnterFrame”か”delete .onEnterFrame”を使うのですが、あなたは”onEnterFrame = null”を進めていますね。なぜでしょう？

10.(Jamieさん) >>5
私は onEnterFrame = null をお奨めします。これは delete（onEnterFrameをガベージコレクションに渡し、処理を実行する）と同じことですが、AS3では”delete onEnterFrame”は推奨でなくなるようです。
なので私はdeleteを使うのをやめ、null指定を使うようにしました。

13.(visitor) 記事中のcacheAsBitmapのくだりがよく分からなかったので、詳しくお聞きしたいのですが。

14.(Jamieさん) >>13
このテクニックは別途エントリすべきかもしれませんが、ここで詳しく説明してみます。
“section”（mySectionClip）の上 (0,0) の場所に、空のムービークリップを作っておきます。ユーザーが何か操作したタイミングで、new BitmapData を生成、mySectionClipを空MCにdrawします。スクリーンショットのキャプチャができたので、mySectionClipは削除／アンロードできます。これを次のシーンへのトランジション時などに使えば、効果的にプロセスを軽減することができるのです。
サイトを訪れたユーザーは、mySectionClipがその場にずっと表示されているように見えるし、制作者である我々は、ユーザーが画面移動する直前に多くの負荷をかけるのではなく、（ユーザーが見ていたmySectionClipから密かに）プロセッサーを解放できるのです。

15.(visitor) クロスプラットフォームのことを考えると、フレームレートは31fpsとか21fpsが良いと聞いたのですが。

18.(Jamieさん) >>15
31fpsの件はMacのFlashPlayer6での問題の対応のために話題になっていた手法だったと思います。この問題はこれまでのFlashPlayerのアップデートにより、既に解決され、もはや必要ないと思います。

19.(visitor) ‘dynamic screen shot’の箇所がめちゃくちゃ便利そうなので、実際にサンプルを交えて解説いただけると嬉しいのですが、、。

20.(Jamieさん) >>19
できるだけ早いうちにサンプルとソースを交えた解説記事を書きますので、ちょっと待っててね。