美術部

FlashLite初心者の時に参考にしていたサイトのメモが出てきたので、まとめました。
はじめてFlashに触れるデザイナー向けなので、慣れてる方は(3)あたりから読んでください。

(0)Flash Liteについて

携帯向けのFlashです。待ち受け、Flashゲーム、きせかえ、携帯向けサイト、デコメなどで使われています。
バージョンが1.0から3.1までありますが、古い機種にも対応させるため1.1が主流。次に2.0。
この記事はだいたい1.1向けに書いています。

(1)まずはソフトを揃える

Flash(swfファイル)を作成するためのソフトと、作成したデータを確認するためのソフトを用意します。
無料で手に入るものも紹介しておりますが、有料のものの方がおすすめです。

●作成ツール
・Flash
Flash MX 2004以降のバージョンがFlashLite1.1に対応しています。
MX2004とFlash8を使う場合は、できるだけProfessional版を使用してください。

お手持ちのFlashがBasic版かMX2004以前のバージョンの場合は、Flash4でパブリッシュすると携帯でも動きます。
これはFlash Lite1.1が、Flash4を基にして携帯用のスクリプトが動くように拡張されたものだからです。
Flash4で携帯向けのActionScriptを書くとパブリッシュ時にエラーが出ますが、書き方が合っていればエラーが出てもちゃんと動作します。

・PalaFla、またはSuzuka
フリーソフトで揃えるならこちら。
この記事ではFlashMX 2004以降のバージョンのFlash向け参考URLを貼っていますので、こちらの人は適宜読み替えながら読み進めてください。

●動作確認用のツール
・Adobe Device Central
端末上での動作をシミュレーションでき、Heapメモリ消費量も見られます。
FlashCS3以降に付属しています。

・iモードHTMLシミュレータII
携帯向けFlashのシミュレーションができます。
電池電波や時刻表示関連の値を変更することができ、待受Flashのテストに最適。
電池電波は最大値の変更ができますので、auやSoftBank向けのActionScript検証にも使えます。

(2)アニメーションするデータを作れるようになる

・FLASH・アニメーション・ActionScript1.0,2.0,3.0の学習サイト　Flashの枝
パソコンで再生するためのFlashの作り方を説明しているサイトですが、基本的な操作方法を覚えるのに便利なので挙げています。
こちらの目次の「シンボルとインスタンス」から「マスクとは？」までを一通り読んで、更に余裕があれば「ActionScript とは？」から「gotoAndStop() gotoAndPlay()」までを読んでください。
上に挙げなかったページは、Flashの操作に慣れるまではまだ読まないことをおすすめします。
パソコン向けのFlashと携帯向けのFlashでは、少しずつできる事が違います。
このサイトには携帯Flashで出来ないことも書いてありますので、全てのページを読むと混乱してしまうかも。

(3)時間や電池残量で表示の変わる待受の作り方を覚える

動く待ち受けはFlashの操作を覚えれば作れますが、
電池残量によって絵柄が変わる待受や、時計付きの待受を作るにはActionScript(AS)という簡単なプログラムを書く必要があります。

・Design Flash Wall Gallery!
FlashLite1.1でサンプル付きのActionScriptリファレンスがあります。
最新機種に合わせるにはちょっと記述が古い(09年11月現在)ので、_level0.KAYACのまとめ記事や、このブログの記事もあわせて読んでください。

(4)もっと詳しく

ここまで挙げた記事よりも、もう少し細かいことの書いてある入門記事です。
・Flash Lite 1.0/1.1メモ
・Flash Lite入門講座　第1回　日本のFlash Liteの仕様
・Flash Lite 1.1 の基本が分かる8つのポイント

FlashLiteでも特に待ち受けで起こりがちな事についてメモ。
Flash全般の問題は「Flash Lite1.1のバグ？とその対処法」を参照してください。
思い出したら追記します。

音量に連動するActionScriptは使用しない

待ち受けでは、fscommand2(“GetVolumeLevel”);が動作しません。
待受設定時のFlashでは、音が鳴らない仕様で音系関数の戻り値も0(またはサポート外)です。

画像の大きさはFlash上で変更しない方がよい

一部機種では、待受の表示に時間がかかったり、「展開中」と表示されることがあります。
ビットマップ画像が原寸よりも拡大(縮小)されている時に起こりやすい現象で、
おそらく何らかレンダリングが上手くいかない機種があるのだと思います。

画像は、Flash上ではscaleの変更や回転をせずに原寸で配置します。
変更の必要がある場合はPhotoshop等でリサイズしたものを使用してください。
また、幅240(QVGA)の機種と幅480(VGA)の機種ではファイルを分けてください。
幅240pxで制作した待ち受けを、幅480pxの機種で表示した際にも
ビットマップ画像が原寸よりも拡大されて表示されていることになりますので、
機種によっては表示エラーを起こすことがあります。

Flashで［ファイル］→［書き出し］から静止画を保存する時に、大きさが4080pxをこえる画像が正常に書き出せませんでした。
結局どうにも解決策が見つからなかったのですが、試した事だけメモ。

状況

• FlashProfessionalCS3＋WinXP (Flash8Proでも発生)
• シェイプ・ビットマップ・ダイナミックテキスト混じりのデータ
• 高さ2080pxのムービーを解像度144dpi(2倍サイズ)で保存しようとした

保存した画像は左上(0,0)から数えてx軸方向・y軸方向ともに、4080px付近からノイズがかったように崩れ始め、4100px以降は透過または白になってしまいました。
ワークステージ、およびオブジェクトのサイズ上限(2880px)には触れていませんし、
書き出しできる画像のサイズ上限(8000×8000px)にも触れていないのでそのあたりに原因はなさそう。

やってみたこと

• パブリッシュ設定を変えてみる
  →変わらず
• 保存する形式を変えてみる
  • 静止画系(bmp、jpg、png、その他でオプションを変えながら保存)
    →変わらず
  • .aiで書き出し
    →シェイプは問題なく書き出せたが、ダイナミックテキストが途中で途切れてしまった。
    100個くらいある各テキストが、各行で頭の4文字くらいしかない。。
  • .epsで書き出し
    →IllustratorCS3で、「不明なエラーのため、操作を完了できません」と表示されファイルが開けない。
• 横幅を変えてみる
  →変わらず。全体のピクセル数ではなく、一辺が4080px以上であることがお気に召さない様子。
• 内容を変えてみる
  →長方形のシェイプが1枚置いてあるだけでも4080px以降の部分は崩れる。
• 複数あったシンボルをひとつのシンボルにしてみる
  →変わらず
• 書き出しの解像度を変更する
  →解像度にかかわらずビットマップ画像中で4080px以降の部分が崩れる

このあたりで諦めた。4080でぐぐっても出ないし何ぞこれ(´；ω；`)ﾌﾞﾜｯ

(1)コピー＆ペースト

　・透過していない画像
　・面積の小さいもの、または画質が多少劣化しても構わない場合
以上のような画像であれば、直接photoshop等の画像編集ツールにコピペできます。
その際、Flashの[編集]→[環境設定]→[クリップボード]を以下の設定にしてください。
　・色深度…32ビットカラー(アルファチャンネル)
　・解像度…72dpi
　・サイズ制限…5000KB
画像編集ソフトの標準が72dpiであることが多いため、解像度が72dpi以外のものに設定されているとコピー＆貼り付け前後で画像の縦横サイズ(px)が変わることがあります。標準では「画面サイズに合わせる」になっているので注意してください(windowsの標準は96dpiのためズレが生じます)。
画像が透過を含む場合は透過部分が黒く表示されてしまいますので、次の(2)(3)のいずれかの方法を使います。

(2)swfから画像を抽出する

　・8ビットカラーの透過を含むPNG画像、透過しているGIF画像
　・JPEG画像
以上のような画像は、一度swfにパブリッシュしてからHugFlashのようなswfから画像を抽出できるツールを使用するとファイルをまとめて取り出すことができます。
Flash上でJPEG画像の圧縮を使用していると、圧縮後の劣化した画像が取り出されます。
圧縮を使用しているかどうかは、[ライブラリ]パネルからプロパティを選択して確認できます。PNGやGIFの場合は[圧縮：]で[ロスレス]を選択、JPEG画像の場合は「読み込んだJPEGデータを使用する」にチェックを入れてください。
また、半透明を含む24ビットPNG画像を取り出した際には半透明部分の色調が黒色ががって見える場合があります。
その際は(3)の方法で画像を取り出してください。

(3)Flashの書き出しを使用する

・24ビットの半透明を含むPNG画像
・各種画像やFlash上のパスを画質を劣化させず正確に抽出したい
以上のような場合はFlashの書き出しを使用します。
1.新規作成したFlashのステージ上に取り出したい画像を配置します。
2.[ファイル]→[書き出し]→[イメージの書き出し]を選択します。
3.ダイアログで保存先とファイル名を指定し、種類をpngにして保存します。
4.次のダイアログで[解像度:72dpi]、[範囲:イメージサイズ]、[カラー：24ビット(アルファチャンネル)]を選択し、[OK]を押します。

主にモバイルFlash向けに、PNG画像を減色→最適化するバッチファイルです。
アルファチャネル付きの24ビットPNG画像も減色、最適化できます。

使い方

1. pngquant、PNGrewrite、OptiPNG、PNGOUTをそれぞれダウンロードし、解凍します。
2. 以下のコードをメモ帳にコピー＆貼り付けします。

SETLOCAL
::------------------------------------------------ここから設定項目
::何色きざみで減色を行うか、イコール(＝)の右側に数値を半角で入力してください。
SET /A color=16
::軽量化処理に使用する各ソフトのファイルパス(それぞれのソフトを解凍した場所)を、イコール(＝)の右側に入力してください。
SET pngquant=pngquant-0.95-win32\pngquant.exe
SET pngrewrite=pngrewrite-1.3.0\pngrewrite.exe
SET optipng=optipng-0.6.1-exe\optipng.exe
SET pngout=pngout.exe
::------------------------------------------------ここまで設定項目
md result\fullcolor
copy "*.png" result\fullcolor\
%optipng% result\fullcolor\*.png -o7
for %%V in (result\fullcolor\*.png) do %pngout% /y %%V %%V
for /L %%M in (%color%,%color%,256) do md result\%%Mcolor
:LOOP
SET /A clr+=%color%
IF %clr% GTR 256 GOTO END
%pngquant% %clr% *.png
move "*-fs8.png" result\%clr%color\
for %%R in (result\%clr%color\*.png) do %pngrewrite% %%R %%R
%optipng% result\%clr%color\*.png -o7
for %%V in (result\%clr%color\*.png) do %pngout% /y %%V %%V
GOTO LOOP
:END
ENDLOCAL

3. 説明にしたがい、設定項目を記入したらお好きなファイル名で保存します。
4. 保存したテキストファイルの拡張子を「.txt」から「.bat」に変更します。
5. このバッチファイル(.bat)と同じフォルダに最適化したいPNG画像をコピーします。
   圧縮したいPNG画像が複数枚ある場合は、すべてコピーしてください。
   (同じフォルダにあるすべてのPNGファイルが最適化されます)
6. バッチファイルを実行すると、最適化処理が始まります。
   終了までしばらくお待ちください。
7. バッチファイルのあるフォルダに、「result」という名前のフォルダができます。
   このフォルダの中に、減色＆最適化済みのPNGファイルが色数別に保存されます。

利用上の注意

変換後のPNGファイルはアルファチャンネル付きインデックスカラーPNGです。
photoshop等の画像編集ツールで正常に開けない場合がございますので、必ずバックアップをとってください。

高圧縮になった分、展開にHeapメモリを消費しないかどうかが若干心配になり
こちらの記事のサンプルデータで比較してみたのですが、全く変わりませんでした。
どの圧縮方式を利用しても変わらないのかな。

このバッチファイルは各種最適化ツールを順番に実行しているだけなので、PNGgauntletやBlastPNGとやってる事は大体同じです。
重ねがけはそんなに意味がないので、最近はこれ1つで全て済ませています。

自分用に撮った写真を素材として公開しています。
リンクをクリックするとSkyDriveに飛びますので、アイコンか「ダウンロード」をクリックしてzipファイルをダウンロード後、解凍してください。
利用に制限等はございません。クレジット表記も不要です。

動物の写真 (10枚)
　鯉、ゾウ、虎、猫、オランウータン、ペンギン、鴨、アヒル

街の風景 (35枚)
　空、建物、室内、電車、線路、駅、城、骨董市、標識、大仏、狛犬、教会、夜の風景、花火　など

自然の風景 (20枚)
　海、砂浜、海岸、入江、波打ち際、海鳥、空、夕陽、滝、川、水草、並木、木漏れ日　など

植物・花 (36枚)
　木立、樹木、木漏れ日、コスモス、バラ、ハイビスカス、あじさい、かすみ草、野ぎく、睡蓮、桜　など

ぼけ写真・ぶれ写真 (7枚)
　空、街灯、建物、自転車、信号　など　(主にテクスチャ用途)

自分メモ。
規格判(A判、B判、郵便、印画紙、画面解像度、広告バナーサイズ)を携帯から見られるように画像にまとめました。
元々紙で持ち歩いていたのですが、使う頻度も減ったので携帯でいいかと。

http://pw6.jp/images/flash/777-kikaku.jpg

携帯からのアクセスの方は直接上のリンクで開けます。
PCからのアクセスの方はここから携帯宛にこのURLをメールできます。

Flashではタイムラインが長くなるほどメモリを消費し、ファイルサイズも大きくなります。
ゆっくりとしたアニメーションでは長いモーショントゥイーンが使われることもありますが、これらはASで書いて軽量化できます。

サンプル：流れる雲(A、B)

このサンプルでは、インスタンス “cloud” がx座標-110に配置されています。
そこから約1分(12fpsで800フレーム)かけて右に500ピクセル動きます。

サンプルAではモーショントゥイーンを使って動かします。
サンプルBでは以下のASを1フレーム目に書き、2フレーム目ではcall(1);として同じスクリプトを実行。1フレーム目と2フレーム目をループさせています。

//1フレームに0.6ずつ右に動かす
//("cloud"のx座標プロパティに、0.6を加算して代入)
cloud._x += 0.6;
//雲が410pxよりも右に移動したら、-110pxへ戻してループさせる
//("cloud"のx座標プロパティが410以上になったら、-110を代入する)
if (cloud._x>410) {
cloud._x = -110;
}

AとBの比較では、ファイルサイズは70.3KBから1.2KBに、
消費メモリは217～223KBから184～190KBになりました
(Flash CS3＋DeviceCentralCS3＋プロファイルW52Kで確認)。

使うプロパティを変えたり複数のプロパティを組み合わせて使えば、複雑なアニメーションもASで書けます。
以下、使いそうなプロパティ。

そのうち補足を足さなくちゃとは思いつつメモ的に箇条書きで。
このブログ内に関連エントリがあるものはリンクを貼ってあります。

この対処法はファイルサイズを減らすためのものです。
こちらの対策を行うことで端末での再生に使用するHeapメモリが増えることがあります。
メモリオーバー対策まとめ記事もあわせて参照してください。

シンボル、シェイプ

• 使いまわすことのできるシンボルや画像は極力使い回します。
• ビットマップ画像にした方が軽くなるようなシェイプは、ビットマップ画像として配置します。
• シェイプの曲線数(アンカーポイントとハンドルの数)を極力減らします。
  • [修正]→[シェイプ]→[最適化]を実行すると、パスの曲線数を自動で減らせます。
  • 自動で減らしきれない部分に調整を行う場合や、形が崩れてしまう場合はダイレクト選択ツールで編集を行います。
  • 線のシェイプは、塗りのシェイプよりもファイルサイズが少なくなります。
    細長い塗りの部分は線でトレスして置き換えたり、円を極太の線で表すことでアンカーポイントとハンドルの数を減らします。

Flash内のビットマップ画像の最適化

• シェイプにした方が軽くなるようなビットマップ画像は、シェイプとして配置します。
• 画質があまり重要でない場合、1/2に縮小した画像をFlash上で拡大して配置します。
  その際、パスでマスクを切っておくとエッジがなめらかになり、粗が目立ちにくくなります。
• パターン状の画像など、繰り返しのできる画像はその最小単位を切り出しシェイプの塗りに画像を指定するなどして、敷き詰めて使います。
• 画像を複数枚に分割したり、部分的にパスを使用することでファイルサイズが減ることがあります。
• PNG画像の最適化を行います。
• JPEG画像の最適化を行います。

ActionScript

• 複数フレームで同じASを実行する場合は1フレームにのみアクションを書いておき、他のフレームからはcall()でアクションが書いてあるフレームを呼ぶようにします。
• できるだけ簡単なコードを書き、説明はコメント内に書きます。コメントはパブリッシュ後のswfファイルに含まれません。
• 変数名とフレーム名はできるだけ短いものにします。

その他

• ASで書き換えることのできるモーショントゥイーンはASで記述します。
• 同じ文字を繰り返し使用する場合、テキストは分解せず、埋め込みフォントを使います。
• 同じ文字があまり出てこないテキストでは、文字はすべて分解し、シェイプとして最適化を行います。

Flashで[ムービーの書き出し]を使用すると、Flashの機能を利用してGIFアニメを作れます。
直接アニメーションGIFを書き出すと減色や微調整がいまひとつなため、
まずFlashでフルカラーの静止画を書き出してからGIFアニメ化します。

まずFlashムービーを静止画＋連番で書き出す

(1)[ファイル]→[書き出し]→[ムービーの書き出し]
(2)[ファイルの種類]で[PNG シーケンス(*.png)]を選択
(3)カラーには24ビットを選択し、[OK]を押します。

アニメーションGIFに変換する

◇Fireworksを使う場合(おすすめ)
(4-f)[ファイル]→[開く]で、連番で書き出された画像をすべて選択します。[アニメーションとして開く]にチェックを入れます。
(5-f)[ファイル]→[書き出しウィザード]→[書き出すファイル形式を選択]→[アニメーションGIF]を選択します。
(6-f)[オプション]でアニメGIFの色数や透過色を設定します。
(7-f)[アニメーション]のタブでフレームの表示時間、ループ等を設定します。
(8-f)[書き出し」から出来上がったアニメGIFを保存します。

◇Giam(フリーソフト)を使う場合
(4-g)画面左下の白い部分に、連番で書き出された画像をドラッグ＆ドロップします。
(5-g)画面の右側で表示時間、ループ等を設定します。
(6-g)ファイルサイズの最適化を行う場合は、[編集]→[各コマサイズの最適化]を選択します。
(7-g)[ファイル]→[名前をつけて保存]から保存します。
※Giamで作ったアニメで、絵柄のふちに黒いドットが見えてしまう場合は[オプション]→[その他オプション]で「サイズを最適化するとき透過色を使った最適化を行う」のチェックを外してください。

自分が次に同じ言葉でぐぐった時用のメモ。

Photoshop CS2で選択範囲内を移動しようとすると、「選択範囲を移動できません。プログラムエラーです。」と出る時は、動かそうとしているレイヤが文字レイヤ、またはベクトルスマートオブジェクトになっている場合があります。
選択範囲内を移動するためには、レイヤをラスタライズする必要があります。

なんで「レイヤをラスタライズしてください」ではなく「プログラムエラー」なんて言われたんだろ、、、

携帯は、最新機種でも16ビットカラー(65536色)表示の機種が多く、グラデーションのような階調のある画像で色むらが起きます。

　
左:PCでの見た目(32bit)　右:携帯での見え方(16bit：イメージ)

これは減色でパターンディザをかけると目立ちません。
photoshopの場合、[Web用に保存]から[PNG-8]、または[GIF]を選択し、[ディザアルゴリズムの指定]を[パターン]にします。
色数はグラデーションがなめらかに見えるぎりぎりまで減色します。

30色に減色してパターンディザをかけたもの(16bit：イメージ)

VGA端末のQVGAモードでディザのドットが見えることがありますが、それでも減色した方がきれいです。

Flashで画像を置く際の最適化のポイントとして
「複雑で面積の小さなものはビットマップで、単純で面積の大きい図形はパスで」
というのは良く聞かれますが、その面積のボーダーラインを正確に把握していなかったので実験してみた。

この画像で大きさを変えながら検証。使ったFlaファイルはこちら。

以下、FlashCS3、DeviceCentralCS3＋プロファイルW52Kでのテスト結果

おおよそこんな感じのまとめ。
　・アイコンのような要素はビットマップ画像が向いている
　・背景にあたるような要素はパスが向いている
　・どちらとも言えない大きさの画像の場合、メモリ重視ならビットマップ、ファイルサイズ重視ならパス
　・VGA端末向けのデータの場合、パスを使用した方が良い場面が多い
　・QVGA端末向けのデータの場合、ビットマップ画像を使用した方が良い場面が多い

なお、この結果はパスの曲線数や複雑さ、ビットマップ画像にした際は色数に左右されます。

　・サンプルファイルよりパスの曲線数が多い場合
　　…ビットマップにした方が良い場合が増える

　・サンプルファイルよりビットマップ画像の色数が多い場合や画像が複雑な場合
　・またはビットマップ画像としてJPEG形式の画像を使用する場合
　　…パスにした方が良い場合が増える

適宜読み替えて、どちらを使ったら良いかの判断の目安にしてください。
迷ったら両方作って比較するのが一番。

個人的には
・PNGを減色すると消費メモリもかなり大きく落ちる
・明らかにビットマップの方が良い面積と、明らかにパスの方が良い面積の中間にあるグレーゾーンがとても広い
の2点が「ここまで大きく出るのか、、」という感想。

そのうち補足を足さなくちゃとは思いつつメモ的に箇条書きで。
このブログ内に関連エントリがあるものはリンクを貼ってあります。

この対処法は端末での再生に使用するHeapメモリを減らすためのものです。
こちらの対策を行うことでファイルサイズが増えることがあります。
ファイルサイズ対策まとめ記事もあわせて参考にしてください。

シェイプとビットマップ

• 不要なインスタンス、不要なグループ化を分解します。また、テキストも分解してシェイプ化します。
  シンボルやグループの入れ子の構造は、深く複雑になるほどメモリを消費します。
• シェイプの曲線数を減らします。[修正]→[シェイプ]→[最適化]より最適化を行うか、直接選択ツールを使ってアンカーポイントとハンドルの数を減らします。
• 複雑なシェイプはビットマップ画像にして配置します。
• 拡大・縮小配置されているシンボルや画像がないかを[変形]タブで確認します。
  大きさの変更が必要な場合は元のシェイプを拡大・縮小、ビットマップ画像は画像編集ソフトで適した大きさに変更します。
• 画像はJPEGよりもGIFやPNGで配置します。
• PNG画像やGIF画像は[ライブラリ]内の画像を右クリック→[プロパティ]から、画像の圧縮で「ロスレス」を選択してください。
  ファイルサイズの都合上、透過を含む画像の圧縮にJPEGを使用したい場合は、JPEG画像を配置しFlash上でマスクを適用します。
• 透過を含む24bitPNG画像は、PNGquant等を使用して8bitに減色します。
• パターンが繰り返されるような画像は、シェイプの塗りにビットマップを指定して敷き詰めます。

シンボルとインスタンス

• インスタンスのタイプはできるだけ(ムービークリップではなく)グラフィックにします。
  アニメーションするタイムラインを持たないインスタンスや、ASが関わらないインスタンスはグラフィックにしても動作は変わりません。
• シンボルの数を減らす、複数のシンボルを一つにまとめる等、ステージ上に読み込まれるオブジェクトの数を減らします。
• インスタンスに対して[プロパティ]パネルのカラーで変化をつけると、メモリを大きく消費します。
  透明度や色調変更目的でのカラー適用は極力避け、元のシェイプやビットマップの色調を編集してください。
  同一のシンボルでバリエーションをつけている場合でも、すべて分解して個々に色調編集を加えることでメモリ消費をおさえられる場合があります。

モーションとアニメーション

• ASで書き換えることのできるモーショントゥイーンはASで記述します。
• 長すぎるタイムラインを持つシンボルは複数に分割し、一度に読み込まないようにします。
• 面積の大きなアニメーションの動きを止めます。
• 同時に動いているアニメーションの数を減らします。

PNGquantは、アルファチャンネルつきの256色PNG画像を作るためのオープンソース(フリーソフト)の減色ツールです。
FlashLiteで半透明を含むビットマップ画像を扱う際はこちらのツールを使用すると、24bitアルファチャンネルつきPNG画像を使用する場合に比べてファイルサイズ、消費メモリを落とすことができます。

(1)ツールの入手

・http://www.libpng.org/pub/png/apps/pngquant.html
Binaries:の右側、 Windows 9x/NT/etc.　のリンク先がダウンロードページです。

(2)使用準備

ダウンロードしたソフトを解凍してできたフォルダに、以下のファイルを解凍したバッチファイルをコピーします。
pngquant_bat_pw6jp.zip

(3)画像の減色

pngquant.exeの入っているフォルダに減色したい画像をコピーし、pngquant_bat_pw6jp.batを実行します。
減色された画像がresultフォルダ内に、色数別にフォルダ分けされて保存されます。
・複数枚のPNG画像をコピーすれば、一度に処理することができます。
・不要なファイルはresultフォルダごと削除できます。

補足など

8bit半透過PNG画像はPhotoshopなどの編集ソフトで正しく開くことができません。
もしも間違って減色元のファイルを削除してしまい、再編集できなくなった場合は
以下の手順で24bitPNGとして保存し直すことができます。
(1)減色後のPNG画像をFlashに配置する。座標は0,0
(2)右下を基準点にしてグラフィックシンボルに変換(画像の座標ずれ対策)
(3)[ファイル]→[書き出し]→[イメージとして書き出し]でPNGを選択
(4)PNG書き出しダイアログで「解像度：72dpi」「カラー：24ビット(アルファチャンネル)」を選択して保存

PNG画像の軽量化/ファイルサイズ対策あれこれ。

減色をする

画像処理ソフト付属の機能よりも、Yukariなどの減色専用ツールの方がきれいに減色できることがあります。

また半透明を含むPNG画像は、PNGquantでアルファつきの256色以下に減色できます(→PNGquantの使い方)。
PNGquantを通した後の画像は一部のソフト(photoshop含む)で正常に開けないので、必ず最後の工程で減色をして元画像は残すようにします。
Flash(PC/モバイル)上での再生に関して問題が起きたことはありませんが、よほどファイルサイズの制限がきつい場合でない限り使わない方が無難かもしれません。

スライスを使う

一つのイメージの中にJPGの方が適した部分とPNGの方が適した部分がある場合は、画像を切り分けて別々の形式で保存した方が良い場合があります。
Photoshopの場合、スライスツールとWeb用に保存が便利。
また、パーツによって色数を変えることでも大幅にファイルサイズを落とせることがあります。

最適化を行う

PNGの圧縮を最適化するツールを使用して、画質を変えずにファイルサイズを落とします。
BlastPNGは、OptiPNG、PNGOUT、pngrewite、cPNGCを一括でかけることができます。
ソフトをインストールできない環境や手っ取り早く最適化したい時には、ブラウザから利用できるpunypngが便利です。

携帯Flash向けには、アルファつき24ビットPNGの減色と最適化を行うバッチファイルを書きました。
こちらの記事もあわせてごらんください。→携帯Flash向け：PNG画像の最適化バッチファイル

JPG画像の軽量化/ファイルサイズ対策あれこれ。

圧縮率を操作する

画像の圧縮率を上げて、画質を落とすとファイルサイズが小さくなります。
QUAJPGやPhotoshopの[Web用に保存]など画質をプレビューしながら圧縮率を決められるものが便利。

PhotoshopのWeb用に保存では、画質重視の場合は画質51～80で保存すると良い。
画質50以下と画質51以上では圧縮に使われるアルゴリズムが変わるため、50以下では急激に画質が落ちてしまう。また、画質90以上では感覚的な見た目の画質が変わらない割にファイルサイズが大きくなってしまう。

ぼかしをかける

JPEG画像はノイズや変化の多い画像でファイルサイズが大きくなります。
コントラストを弱めたり、画像をぼかすことでも軽量化できます。
[フィルタ]→[ノイズ]の[ノイズを軽減][明るさの中間値][輪郭以外をぼかす]はそれぞれノイズを低減するためのフィルタです。
また、[フィルタ]→[ぼかし]の各ぼかしツールやツールバーの[ぼかしツール]で画像自体をぼかしたり、
画像によっては[フィルタ]→[アーティスティック]→[カットアウト]でイラスト調にして細部を飛ばすのも効果があります。

フィルタによって印象を変えたくない時は、色のチャンネルのみにこれらのフィルタをかけます。
[イメージ]→[モード]から[Labカラーモード]を選択しaとbのチャンネルにフィルタをかけると、輪郭(明度)をぼかさないので、シャープな印象を保ったままファイルサイズを落とすことができます。

ハフマンテーブルの最適化を行う

JPEGファイル圧縮プログラム carmineを使用して、圧縮を最適化することで画質を変えずにファイルサイズを落とすことができます。
photoshopの「Web用に保存」を使って保存した場合は更にこのツールを使用しても効果がないようです(CS3 Extendedで確認)。

直線を含む場合は、8pxの倍数を意識する

JPEGで保存の際に圧縮率を上げると、ブロックノイズ(長方形の模様)が出てしまうことがあります。
このブロックノイズは画面の左上を基点として8pxの正方形に現われるため、はっきりした直線を含む画像の場合はこの正方形の端を意識すると線のエッジをぼかさずに表現でき、ファイルサイズも小さくなります。

画像をスライスする

一つのイメージの中にJPGの方が適した部分とPNGの方が適した部分がある場合は、画像を切り分けて別々の形式で保存した方が良い場合があります。
Photoshopの場合、スライスツールとWeb用に保存が便利。

JPEG画像では圧縮率を上げると赤系統の色が汚くなってしまうため、赤色の部分のみPNGで保存することで画質を落としながらきれいに見せることができます。

Flashでは同一のパーツを使い回すことでファイルサイズを減らしたり、制作過程を効率化することができます。
以下は、できるだけファイルサイズを増やさずに見た目のバリエーションを作るための方法です。

(1)インスタンスに明度/着色/アルファ/詳細を設定し、カラーバリエーションを作る

インスタンスを選択した状態で[プロパティ]パネルの[カラー]の欄から色をつけることができます。
はじめは[なし]に設定されています。

・明度…プラスに設定すると明るく、マイナスに設定すると暗くなります。
・着色…指定した1色で塗りつぶします。塗りつぶしの濃さを設定できます。
・アルファ…透明度を調整します。0%で完全に透明になります。

[詳細]は色調の変更を行う時や、着色とアルファの効果を同時に適用する時に使います。
[詳細]を選択後、[設定...]ボタンをクリックするとカラー設定のためのダイアログが出てきます。
赤、緑、青のそれぞれの値が色調、アルファの値が透明度に影響します。

(2)共通部分のある画像は使いまわし、差分はレイヤで重ねる

例えば、白馬とシマウマが並んでいるようなイラストの場合では、
「白馬」と「シマウマ」で別々のシンボルを用意するよりも
「白馬」と「シマだけ」のシンボルを用意し、2つのシンボルをFlash上で重ね合わせる方がデータが少なくて済みます。

「人A」「人B」「人C」を描く場合にも、
・「顔シンボルA＋髪型シンボルA」
・「顔シンボルB＋髪型シンボルB」
・「顔シンボルA＋髪型シンボルB」
のようにパーツを使いまわすことで、ファイルサイズを膨らませずにバリエーションを作れます。

(3)変形・斜形・反転を使用する

インスタンスに変形をかけることで、共通のシンボルを使用できる場合があります。
例)真正面から見た蝶のイラストのような、対象の画像の場合
…半分だけの蝶のシンボルを作り2つ配置、片方を反転させます。
例)同じ形の花びらが5つ並んだ桜のような画像の場合
…1枚の花びらをシンボル化し、コピーしたものを回転させて配置します。

(4)テクスチャやパターン画像は塗りに指定して敷き詰める

テクスチャの当たっている部分や、水玉模様などの繰り返しのある画像の場合、シェイプの塗りにシームレスパターン(並べてもつなぎ目の見えない画像)を指定することで軽量化できます。

1.photoshopなどでシームレス画像を作成
2.Flashにドラッグ＆ドロップし、ライブラリに登録する
3.ステージ上にシェイプを作成する
4.[カラー]パネルでタイプを[ビットマップ]に変更、サムネイルからシームレス画像を選択

以上の手順で、シェイプの塗りに画像を隙間なく敷き詰めることができます。
敷き詰めた画像が歪んだりズレが発生した場合は、シェイプを基準点右下でシンボル化してください。

補足など

・複数組み合わせて活用するといい感じ
例えば以下のような手順では、Flash上でパターンのカラーバリエーションを作れます。
1.透過PNGで作ったシームレスパターンをシェイプの塗りに指定
2.[カラー]で色のバリエーションをつける
3.下に敷くシェイプの色との組み合わせで複数カラーバリエーション作成

・(4)を除く(1)～(3)の手法は、制作のスピードアップやファイルサイズの軽量化には役立ちますが、携帯での再生時にメモリを食うことがあるため注意してください。

就活の時に携帯のGUI周りを作った方とお話する機会があり、苦労話として
「有機EL液晶は焼きつきを起こしやすいので、#FFFFFFの代わりに微妙なグレーを使う」
と伺ったことがある。

ITmedia ＋D Lifestyle： au新モデル、「映像のキレイさ」はどれほどか (1/2)

> 有機ELディスプレイ自体はさほど新しい技術ではないが、液晶に比べて寿命が短く、焼き付きに弱いという弱点もあり、携帯電話への利用例はさほど多くなかった。
> 色再現性とコントラスト比以外のスペックは非公開だが、「半永久的とはいえないが、携帯電話での利用に耐えられるだけの寿命を確保することに成功」（KDDI）したほか、「焼き付きを起こさないよう、GUIや配色なども工夫した」（同）と実装のめどが立ったことから、製品への投入となったようだ。

この「配色も工夫した」のひとつが「#FFFFFFを使わない」かな？
確かに実機で標準ピクト＋白ベタ待受にすると、他の白は若干暗く見えなくもない。

MEDIASKINを2年以上使って未だ焼きついていないので、それこそプリインストールでもなければ神経質になる必要はなさそうですが。。

#MEDIASKINはブラウザのbackgroundのデフォルト色もグレーなので、透過していない画像は白い角が見えて残念なことになる

書籍やポスター等で使われる複数行のテキストで、一行の左右が合うように組むこと。均等割付。
文字数の少ない行は文字の間隔を空けたり、文字数の多い行では字間を詰めて文頭と改行位置を合わせる。