2011年01月10日

Appendix A. 画像のファイルサイズと減色について

Appendix A. 画像のファイルサイズと減色について
----2010.01.10 ver0.5.10を対象

まとめ:ファイルサイズ制限が厳しいと感じたら・なんだか画像が荒いと感じたら『使用する画像の色数を256色以下にして、タブ3枚目の"embed image as lossless"のチェックを入れてから変換しよう』

まめフラスコを使って100KBの容量制限が問題となる場合、ほとんどが使用する画像ファイルのサイズの問題でしょう。この問題の解決には大きく分けて2つの方法があります。
1) (擬似)エレメントを使って、必要最小限の差分画像のみで構成するようにする
2) 画質を下げる

1)については別稿(予定)

2)について、
"画質を下げる"についても、2つに分けられます。
a. 構成する画像をswf変換時にJPG形式にするよう指定し、更にJPGのqualityを下げる
b. 減色ツールを使って色数を減らす


■予備知識
現在まめフラスコで出力されるswfファイルを構成する画像形式は以下の3つあります。
i. 元のファイルを指定されたqualityのJPG形式に変換したものに、アルファチャンネル情報を加えたもの
ii. 元のファイルに変換を施さず、各座標の点をパレット番号で表したものにパレットの色情報を加えたもの(元のファイルが256色以下の場合のみ)
iii. 元のファイルに変換を施さず、各座標の色情報をそのまま持ったもの

まめフラスコ3枚目のタブ"Script and etc."にある、"embed image as lossless"にチェックを入れない場合はi.の形式でswfの中に埋め込まれます。チェックした場合には、変換時に画像の色数をチェックして、256色以下の場合にはii.それよりも多い色数の場合にはiii.が自動で選択されます。ii.およびiii.は元のファイルに対し変換をしないためlosslessの名前どおり画像の劣化はありません。

また、1枚目および2枚目のタブにある"ImageQuality"はi.の場合(すなわち"embed image as lossless"にチェックが入っていない)のみ有効で、チェックが入っている場合はこの値を0にしても100にしても全く影響しません。


a.について
"embed image as lossless"のチェックを外して、さらにImageQualityの値を小さくすることにより、画像を劣化させ、swfに埋め込まれる画像サイズを小さくすることで、最終的に出力されるswfファイルのサイズを小さくすることが可能です。ただし、JPG形式はイラスト調・アニメ塗りの絵には適しませんので、この方法はお勧めしません。

b.について
画像の色数を減らすことで、埋め込まれる画像形式を予備知識のiii.からii.にし、swfに埋め込まれる画像サイズを小さくします。なお、"embed image as lossless"にチェックが入っていないと色数に関係なくi.の形式で埋め込まれるため、色数を減らす意味がなくなります。チェックを入れましょう。ii.の場合は画像の1ピクセルあたり1バイト、iii.の場合は4バイト使用するため、画像の色数が256色以下かそれより大きいかでswf内での画像サイズが大きく異なります。画像にもよりますが、減色することで1/3程度まで画像ファイルサイズを小さくすることができます。
 256色に減色することによる画像の劣化ですが、よい減色ツールを選べば、それほど見分けのつかないレベルになります(BlastPNGの例)。以下にGimpで「画像」→「モード」→「インデックス」で256色に変えただけの非常に原始的な方法で減色した場合の比較画像を示します。どうでしょうか? JPGにするよりはずっときれいだと思います。ファイルサイズは53.2KBが18.6KBと約35%になっています。なお、さらに色数を減らすことで更にファイルサイズ減らすこともできます。

compare_overall.png

compare_faces.png

# わたしの考え
また、Flash Playerは動作環境にもよりますが、画像の拡大・縮小の際、アンチエイリアスがされます。たとえば240x320のサイズでswfを作成しても、最近の携帯電話の機種の画面解像度はもっと大きいために再生の際に画面にあわせるために自動拡大が入り、アンチエイリアスにより幾分ぼけた感じになるかもしれません。どうせ元の画像そのものは表示されることは少ないと考えて、256色への減色を受け入れてもいいかもしれません。
posted by 王子南 at 23:05| Comment(0) | TrackBack(0) | 日記

2010年12月19日

memo

865:名無し~3.EXE:2005/09/03(土) 23:01:04 ID:BTstsyra
昔、どこかでFlash(swf)の伺かもどき無かったっけ?
ふと、ケータイのFlash Liteに移植したら、おもろいかな?と。
待ち受けとか、メニューとか。もしすでに出てたらスマン子。

う:・・・圏外らしいで
さ:毒電波も届かない所で、ケータイが使えると思うなっ!
う:落ち着けっ!

さ:おなか空いたね、うにゅう
う:そろそろ充電してもらわなあかんな

さ:メールも電話も全然来ないねえ
う:それは言うたらアカンやろ
※これはFlash Lite 1.1では無理w
posted by 王子南 at 15:47| Comment(3) | TrackBack(0) | 日記

2010年12月12日

もくじ

1. まめフラスコとは?
2. ソフトウェアの入手とインストール
3. 起動と動作確認(サンプルの変換)
4. 基本的な説明
4.1 いちばん簡単なものを作ってみよう 100kb制限の注意事項もここでか
4.2 ほかの設定箇所の説明(ScreenShot交えて)
5. 表情を変えてみよう
5.1 変える例
5.2 意味説明・さくらスクリプトについて
5.3 使えるタグと用法
6. いろいろ話すようにしてみよう
6.1 トークファイルの基本
6.2 辞書について
6.3 入れ子を用いた条件分岐
6.4 日付・時間・電池電波状態などを反映させてみよう
6.5 状態変数について・その使い方
6.5.1 一般的な使用例
6.5.2 応用例(じゃんけんとか?)
7. さわり反応をつけてみよう
7.1 さわり反応とは 待ち受けでは無効になる注意
7.2 surfaces.txtの記法
7.3 リンク機能について
8. アニメーションについて
9. バルーンについて
10. 応用的ないろいろ
10.1 リンク機能を用いたネットワーク更新
10.2 PC上でのサイトマスコットとしての使用

Appendix
A. 画像のファイルサイズと減色・縮小について
B. Flash Player・Flash Lite について
posted by 王子南 at 19:55| Comment(0) | TrackBack(0) | 日記

2009年05月31日

next codename

"summerdiary" -> あれ
"millingsugar" -> あれ
"hypnotronika" ->あれ
posted by 王子南 at 02:25| Comment(0) | TrackBack(0) | 日記