Flash Liteのまとめと今後

2008年10月29日(水)
古本 光司

容量制限と再生処理について

 通常のFlashであれば、swfファイルに書き出される際にムービーの圧縮を行って容量を軽減してくれますが、Flash Lite 1.1の場合、このムービーの圧縮は対応されていません。そのため、容量を極限まで抑えるためのノウハウも知っておく必要があります。

 容量削減のポイントとしては7つ挙げられます。

 1つ目は、「複雑なベクターは避ける」です。複雑な図形などは画像にした方が良い場合があります。また、パス数が多いベクターはFlashの「修正→シェイプ→最適化」でもパスの数を調整することもできます。

 2つ目は、「変数名・フレーム名を短いものにする」です。1~3文字程度の文字数の少ない変数名にするのも効果的です。例えばボタンなどであれば「b1」「b2」、値の場合は「v1」「v2」など、接頭辞+IDで管理すると良いでしょう。

 3つ目は、「簡単な図形はシンボル化したパーツで使いまわす」です。例えば、円形や四角形などの図形は「カラー」で着色や明度を変えれば色を変えることができます。

 4つ目は、「読み込む前に画像ファイルの容量を落としておく」です。画像を使用する際、GIF画像にして問題ないものはGIF画像で読み込ませ、色数はあらかじめ減色などを行います。また、読み込んだ画像は必ずプロパティで個別に圧縮率を調整していきます。

 5つ目は、「画像のアルファチャンネルは避ける」です。アルファチャンネルで透明化したい場合などはGIFやPNG画像のアルファチャンネルを使用せず、Flashでマスク化した方が容量を削減できることもあります。

 6つ目は、「無駄なフレームやキーフレームを削除する」です。使用していないフレームなどは削除します。わずかですが容量を削減できます。

 7つ目は、「スクリプトの記述量」です。スクリプトも共通する処理などはcall()関数で呼び出すなど記述量を減らします。わずかですが容量を削減できます。

 また、容量削減時に役に立つ機能としては、「パブリッシュ設定」のオプションにある「サイズレポートの作成」です。swfファイルを書き出す際、同階層にテキストファイルが書き出され、どの個所がどれだけの容量を使用しているか細かくレポートにまとめてくれます。

・各フレームのデータ容量
・各シーンのデータ容量
・各シンボルのデータ容量
・各フォントのデータ容量と埋め込み文字
・各ビットマップ画像のデータ容量と圧縮形式

 図3のようにテキストファイルでレポート出力されます。このレポートでデータ容量が多く使用されている個所や無駄なデータ容量がないかなどの確認ができます。

 これらの作業はFlash Lite 1.1だけではなく、PCコンテンツでも共通する場面があります。例えば、Flash広告バナーなどの出稿時などでは容量制限があったりしますが、そのような時にも使えるテクニックです。

 また、携帯端末のスペックはPCに比べると処理能力が低い環境となります。そのため複雑なアニメーションなどを多用すると再生処理が重くなってしまいます。

 動作を軽くするポイントとしては5つ挙げられます。

 1つ目は、「アニメーション面積を減らす」です。マスクやステージ外などの実際には表示されない部分も同様の負荷がかかってきますので、アニメーション面積を減らすと効果的です。

 2つ目は、「単純な図形はベクターに、複雑な図形はビットマップ画像にする」です。複雑な図形などはビットマップ画像の方が処理を軽くできます。

 3つ目は、「アルファの使用を避ける」です。アルファなどの透過処理も負荷が大きくなってしまいます。

 4つ目は、「画質を下げる」です。fscommand2("SetQuality", "low");でレンダリング品質を下げると、アンチエイリアス処理の部分を軽減することができますが、見栄えは悪くなってしまいます。

 5つ目は、「フレームレート(fps)を下げる」です。フレームレートを下げると負荷を軽減できますが、アニメーションの動きがスムーズではなくなってしまいます。

ワークメモリについて

 Flash Liteで制作をしていると、時々、画像が赤く表示される現象が発生することがあります。これにはきちんと理由があり、ワークメモリの上限をオーバーした場合に、このような現象が発生します。ワークメモリは機種によって変動しますが約1~3MB程度となります。

 メモリがどれだけ使用されているかは、スクリプトからでも確認することができます。

fscommand2("GetTotalPlayerMemory"); //総メモリ
fscommand2("GetFreePlayerMemory"); //現在使用できるメモリ(空きメモリ)

 上記を差し引くことで、現在の使用メモリを確認することができます。また、Adobe Device Central(http://www.adobe.com/jp/products/creativesuite/devicecentral/)でもメモリ状況を確認可能です。

 メモリの使用を抑えるためのポイントとしては下記になります。

・ビットマップ画像の使用を抑える
・trace()を削除する
・線の表示を避ける
・変数が不要になった場合はnullなどを代入する
・Math関数と浮動小数点の数を最小限に抑える

 「trace()を削除する」では、デバッグが一通り済んだらtrace()は削除するようにしましょう。何度もデバッグを行うようであれば、パブリッシュ設定の「Traceアクションを省略」にチェックを付けて書き出しても問題ありません。

株式会社24-7

Webディレクター/Flashクリエイター。1995年に初めてインターネットの世界に触れ、1999年に独学で個人サイトの運営を始める。その後、本格的にWeb業界へと転身し、クリエイター、ディレクター、プランナー、講師業務、セミナーなど幅広く従事。また、個人的にもパブリッシャーとして活動中。より効果の高いWebの活用術を日々勉強中。『いざ高みへ!』1ka2ka.com:http://1ka2ka.com/ 株式会社24-7:http://www.24-7.co.jp/

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています