ブログTOP > Adobe Flash/action script > ケータイFlashコンテンツの容量を激減させるチェックリスト

2008年05月06日

ケータイFlashコンテンツの容量を激減させるチェックリスト

本エントリを加筆・訂正した記事が、Adobe デベロッパーコネクションで公開されています。
よりわかりやすく正確な内容になっていますので、是非ご覧下さい。

デベロッパーセンター|Flash Lite 作業効率化&ファイル容量軽量化テクニック
http://www.adobe.com/jp/devnet/flash/articles/flashlite_koekatamarin_tips.html
(2010年5月7日公開)


自慢じゃないが、ケータイ向けFlashコンテンツにだいぶ自信がついてきたぞ。

swfの容量を100KBにおさえる工夫がかなり板についてきて、
「よくこれが100KBにおさまったなぁ!」と我ながら感心してしまう。

いくつかTipsを。

パブリッシュ時にサイズレポートを吐き出しておいて、それをブラウザで読み込んでおいてF5でリロードすると便利です。

イラレのデータは一度Fireworksで読み込んでからFlashに貼付けると
Flash liteでサポートされていない線の拡張機能をすべて解除してくれます。

Fireworksからのデータはぜんぶ「そざい.fla」とかに読み込んでおくと
ウィンドウの切り替えがラク。


以下、思い出しながら、容量を軽くするためのポイントを書いておきます。


■ ライブラリにあってステージに配置していないインスタンスはパブリッシュ時に使用されない

常識ですが、ステージにおいてない限り
ライブラリのインスタンスはパブリッシュ後の容量に影響しません。
これがすべての基本、と言える、かな?


■ オブジェクトをインスタンス化してひたすら再利用

できるだけオブジェクトを共通化していくことで劇的に容量は減っていきます。
特に、どんな細かな共通部分も見逃さず、どんどんシンボルをネストしていくことを恐れないのがポイント。
ただし単純な円や長方形などのシェイプ一個とかの場合はインスタンス化することでかえって重くなるので、あまりにもミニマルな単位のオブジェクトは再利用しない。

ネストが多くなってくるとインスタンスの命名規則も大切。


■ 同じ形で色違いのオブジェクトは、インスタンスを再利用して「着色」

「着色」では容量はほとんど増えません。
色が違うだけで形状がおなじオブジェクト同士は、ひとつのインスタンスにするべきです。


■「描画オブジェクト」よりも「グループ」の方が軽い

比較的小さな差なのですが、文字などを「描画オブジェクト」としておくよりも「グループ」にしたほうが軽くなります。
ちりも積もれば何とやら。
一つのコンテンツ中で、数KBは変わってきます。


■なるべく「グループ」よりも「インスタンス」

インスタンスにすることで、サイズレポートでシンボル別に容量を確認することが出来ます。

逆に、サイズレポートの必要もなく、再利もしないオブジェクトは「インスタンス」よりも「グループ」のほうが好ましいです。

わずかながら、「インスタンス」は「グループ」の状態よりも容量を食います。


■「線を塗りに変換」を行うと重くなる

イラレでアウトラインとった文字の、フチ線の部分はFlashでも「線」になります。
一見、文字の本体とまとめて一個のシェイプにした方がパスの情報が減って軽くなりそうな気がしますが、実際にはイラレそのまんまの状態の方が軽い。

こちらも、前述の通り「描画オブジェクト」ではなく「Ctrl+B」してから、文章単位で「Ctrl+G」グループ化しておきましょう。


■ タイムラインのキーフレームの量とかはほとんど関係ない

タイムラインが空のキーフレームだらけであろうとレイヤーが多かろうと、ほとんど差はないみたいです。

ちなみに、サイズレポートではなんの処理もないフレームでも2バイト使用しているようです。
タイムラインがきれいで無駄のない状態であるのにこしたことはありませんが、大してナーバスになる必要はありません。


■ 微妙にヨレた感じのラフな曲線などは「最適化」してやる

フォントなどによっては、周囲の線がラフな感じのものがあったりしますが、見た目が大きく変わらない範囲内で線を最適化しておくべきです。

パスのアンカーポイントが減って、軽くなります。


■ 微妙な曲線は「まっすぐに」

ほんとにわずかな差ですが、見た目直線系のフォントのアウトラインなんかでも、「まっすぐに」を処理してやると軽くなったりするものがあります。
ほんとにちょっとだけの差なので、最後の手段といったところか。


■ デバッグ用、作業用のオブジェクトは既存のインスタンスを再利用
■ デバッグ用、作業用のオブジェクトは「線をまっすぐに」


見えないところもきちんと無駄を省いていきましょう。
デバッグ用の数字オブジェクトなんかも、極限までアンカーポイントを減らしてしまいましょう。


■ 変数名は短く
■ flaファイルに日本語は書かない


このことはよく言われる、基本中の基本です。
「変数名」はプログラム内部で繰り返し展開されることになる文字列ですから、短くするべきです。

インスタンス名も短くしておきましょう。

「game_mc」「title_txt」とするよりも、
「gameMc」「titleTxt」とする方がアンダーバーの分短く済みます。

ネストするオブジェクトと命名規則が衝突しないのであれば、さらに
「game」「title」としたほうがいいです。

さらに、煩雑にならない限りにおいて「g」とか「t」とかしてしまうのも手です。

これらの小さな努力で、数KBは軽くなっているんでしょう、おそらく。


■ 最終パブリッシュ前にtrace文は手で取る

これ、数字で確かめた訳ではないけど、「traceを省略」よりも手で取った方が軽くなると思います。




いま思い出せる限りでは、以上です。

インスタンスの再利用をどれだけ徹底できるか、っていうのが
一番大きいと思います。

たまに、容量削減のためにGIFなんかの画像ファイルをつかっちゃってるソースを見たりしますが、
ナンセンスだと思います。
きっちりやればちゃんと軽くなる。

これ以上無理!と壁にぶつかっても、
多少形状の違うものや線の太さの異なるものを思い切って共通化してしまうとか、
ンカーポイントを減らすとか、細かい修正の余地はまだあるはずです。

共通部分があまりに少ないデザインは、デザイナーにお願いして修正してもらいましょう。
自分がデザインもする立場の場合は、いかに再利用できるかを考えながらイラストなどを構成するべきです。


(・ω・)


■ この他のFlash関連TIPS

このエントリーをはてなブックマークに追加
posted by taichistereo at 03:02 | Comment(0) | Adobe Flash/action script
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

※ブログオーナーが承認したコメントのみ表示されます。
カテゴリクラウド
トップページへ戻る
Blog Widget by LinkWithin