知らないと損する
ケータイFlash軽量化テク30連発！

まだまだ使われているFlash Liteをストレスフリーに

　スマホへの移行が増加しているという話題が多い中、まだまだ使われているFlash Liteコンテンツ。さまざまな機種でストレスフリーなアプリを制作するために最も気になる点はSWFファイルの軽量化と、実機での動作の軽さではないでしょうか。

　本稿では、デザイン制作、Flashオーサリング、「Transform」を使ったSWF合成の3軸で、サクサクと動くFlash Liteコンテンツの作り方を説明します。

• デザインから始める軽量化
  1. スムースポイントを減らす
  2. 違いがほとんど分からないときは、コーナーポイントでも減らす
  3. グラデーションの代わりにブレンド
  4. 繰り返し使う形はインスタンス化
  5. 極力、アルファを使わない
  6. アウトラインに当たる部分のオブジェクト以外は、マスクの対象から外す
• Flashオーサリングの設定でできる軽量化
  1. ［XMPメタデータを含む］のチェックを外す
  2. 画質はできる限り圧縮
• モーショントゥイーンに関する軽量化
  1. シェイプトゥイーンは使わない
  2. タイムラインを短く
  3. コマアニメで表現
  4. インスタンス化する際はグラフィックに
  5. 短いモーションにはイージングを掛ける
• オブジェクトの構成に関する軽量化
  1. アウトラインを“塗り”に変換
  2. 塗りのアルファ値を設定
  3. グループ化の解除と分解
• 実行メモリ300Kbytes以内を目指す軽量化
  1. 複数のモーションを、極力まとめる
  2. スクリプトを減らす
  3. タイムライン関数の引数は数値指定で
  4. 数値計算は、かけ算で
  5. 数値の比較演算子
  6. 演算は、文字列を変数化
  7. random()関数は、なるべく使わない
  8. thisも、なるべく使わない
  9. Flash Lite 2.0以降は、変数に型を付ける
• Transformを使ったSWF合成により可能になる軽量化
  1. MovieClipの中のパターンを減らせる
  2. MovieClipをステージに配置する必要がなくなる
  3. MovieClipをステージから消して消費メモリを減らせる
  4. スクリプトを減らせる
  5. 外部ファイルをロードする必要がなくなる

デザインから始める軽量化

　デザイン面におけるFlash Liteの軽量化では、アンカーポイントを減らすことが最初の一歩です。イラストを作成する段階で余分なアンカーポイントは極力減らしていきます。

■ アンカーポイントとは

　アンカーポイントには、2種類あります。ハンドルを持たない「コーナーポイント」と、ハンドルを持ち曲線を描く「スムースポイント」があります。スムースポイントとコーナーポイントでは、かなり容量差があるため、なるべくスムースポイントを減らすことを心掛けます。

　8点で描いた円と正8角形のグラフィックを配置してパブリッシュしたSWFファイルでは、サイズに17bytesの差が出ます。これをさらに12フレームで100px動くモーションにした場合、24bytesの差になります。数バイトでも軽くしたいケータイコンテンツでは、かなり大きな数字になります。

■ 【1】スムースポイントを減らす

　なるべくスムースポイントを減らすために、円を描く場合は円ツールで描かずにベジェで描きポイントを4点から2点に減らします。

図1　円ツールで描いた4点のスムースポイントの円（左）とベジェで描いた2点のスムースポイントの円（右）

　また、細かい曲線も何点かのコーナーポイントで描画しても分からない部分はスムースポイントを使わないようにします。

図2　スムースポイントで描いた図形（左）とコーナーポイントで描いた図形（右）

■ 【2】違いがほとんど分からないときは、コーナーポイントでも減らす

　もちろん、コーナーポイントでも少ないに越したことはありません。携帯画面の描画では、1px以下の間隔でアンカーポイントを打っても違いがほとんど分からないので、細かいポイントは極力省いていきます。

図3　多数のコーナーポイントで描いた図形（左）とコーナーポイントを減らして描いた図形（右）

■ 【3】グラデーションの代わりにブレンド

　次に、色の使い方です。グラデーションは色数が多いため描画が重く、端末によっては表示されないので代わりにブレンドで表現します。

図4　グラデーションで描いた図形（左）とブレンドで描いた図形（右）

■ 【4】繰り返し使う形はインスタンス化

　繰り返し使う形はイラストの段階でインスタンス化（グラフィック）しておくことでSWFに変換した際にファイルサイズが軽くなります。

　ただし、繰り返し要素でも、雲やレースのように大量の円が周りを囲むような形など、ベジェで直接描画した方が軽くなる場合もあります。

図5　インスタンス化した雲（左）とベジェで直接描画した雲（右）

■ 【5】極力、アルファを使わない

　イラストを動かす際に背景と重なる部分には極力アルファを使わないようにします。

■ 【6】アウトラインに当たる部分のオブジェクト以外は、マスクの対象から外す

　マスクを掛ける場合も、アウトラインに当たる部分のオブジェクト以外は、マスクの対象から外しておきます。

1/3

INDEX
まだまだ健在のガラケーのSWFを1バイトでも軽くするには　 知らないと損するケータイFlash軽量化テク30連発！
	Page1 まだまだ使われているFlash Liteをストレスフリーに デザインから始める軽量化
	Page2 Flashオーサリングの設定でできる軽量化 モーショントゥイーンに関する軽量化 オブジェクトの構成に関する軽量化
	Page3 実行メモリ300Kbytes以内を目指す軽量化 Transformを使ったSWF合成により可能になる軽量化 チームワークと小さな積み重ねで大幅な軽量化へ

Smart＆Social フォーラム トップページへ