この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。
Flash lite 1.1 の開発を行う際に誰もが悩むのが、100KBのファイルサイズ制限の中で
いかにリッチなコンテンツを制作するかという部分ではないでしょうか。
今回は、表示側(グラフィック等)と制御側(スクリプト)に分けて、
ファイルサイズを節約するポイントをまとめてみました。
■グラフィック
(1)グラフィックはベクターで描く?画像を読み込む?
グラフィックをベクターにするか画像にするかは、そのグラフィックによって
ケースバイケースです。
実際には、画像とベクターの容量を見比べながら四苦八苦してみることに
なりますが、基本的な切り分けとしては、単純なパスの図形等は画像よりも
ベクターのほうが容量を節約できるので、ベクターで描くようにします。
逆に複雑なパスのベクターはアンカーポイントが沢山存在するため、画像よりも
容量を食う場合が多々あります。
ただし、シェイプの最適化を行って、見た目に影響が出ない程度にパスを単純化
することで、ガクっと容量が減ることもしばしばあります。
複雑なグラフィックの場合は、時間はかかりますが画像と見比べながら
調節していくと良いかと思います。
(2)読み込む画像の画質を調整
読み込む画像に関しては、読み込む前に画質や色数をある程度落としておく
ことも重要です。
PhotoShopやIllustrator等で保存する際に、画質のスライドバーを調節するか
カラーパネルで余分な色を削っていきましょう。
画質落とし過ぎかな・・・と感じるくらいでも、実機で表示してみると
意外と綺麗に表示されたりします。
画像形式はGIFかPNGがおすすめです。
(3)インスタンスを有効に使いまわす。
各所で使用するグラフィックはできるだけインスタンス化して使い回すことで、
ファイルサイズを削減できます。
また、同じ形状のグラフィックで色だけが違うもの等は色だけ変えて
使いまわすこともできます。
この辺りの節約術は、デザインの段階でも気にしながら作業を行う必要がありそうです。
■その他、表示側
(4)フォントはデバイスフォントを使用
フォントはデバイスフォントを使用することでファイルサイズを節約できます。
フォントサイズはキャリアや機種によってまちまちですが、12pxか24pxに
設定することで、キャリアや機種ごとの表示の差異は非常に少なくなります。
(5)無駄なフレームは使わない
空のフレームでも削除してみるとファイルサイズがを若干削減できる場合があります。
削ることができるキーフレームやトゥイーンで使用しているフレームを何フレームか
削ると更に効果があります。
■スクリプト
スクリプトの記述量が多ければ多い程ファイルサイズに影響します。
(6)共通化できるスクリプトはフレームアクションに。
同じような処理をしているスクリプトはフレームアクションにしてしまい、
callで呼び出して実行することで、記述量を減らすことができます。
※Flash Lite 1.1 では、functionが使用できないため、この call を度々
利用しますが、引数や戻り値は使えません。
引数や戻り値となる値はグローバル変数として保持しておくのが良いかと思います。
(7)変数名、フレームラベル名等
様々な箇所で記述される変数名、フレーム名だからこそ短くすればするほど、
ファイルサイズを節約できます。
理想としては、1〜3文字程度が理想と各所で言われていますが、
かえって難解なソースになることもあるかと思いますので、
切り詰めすぎずにほどほどに。
(8)URL等の長い文字列は変数に。
基本中の基本かとは思いますが、URL等、ソースの各所で使用する長めの
文字列は変数にいれて使い回すことで記述量を削減できます。
(9)for文等で動的に生成できる変数が沢山ある場合はベタ書きしない
for文等で動的に生成できる変数名、値が沢山ある場合は動的に作ってしまいましょう。
こうすることで生成された変数はメモリに持たせることができますので、
ファイルサイズを圧迫しなくて済みます。
以上、ファイルサイズに困ったら、一度上記の内容で実践できることがないか
見直してみるのはいかがでしょう。
本当は、最近流行っているタイトルっぽく 「Flash lite 1.1 のファイルサイズを節約する10の方法」とかにしたかったのですが・・・いまいち流行りに乗り切れずに9個止まりでした。。。