モーショントゥイーンをActionScriptに置き換えると軽くなる

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

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

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

サンプルAではモーショントゥイーンを使って動かします。
サンプルBでは以下のASを1フレーム目に書き、2フレーム目ではcall(1);として同じスクリプトを実行。1フレーム目と2フレーム目をループさせています。
[code lang=”js”]
//1フレームに0.6ずつ右に動かす
//("cloud"のx座標プロパティに、0.6を加算して代入)
cloud._x += 0.6;
//雲が410pxよりも右に移動したら、-110pxへ戻してループさせる
//("cloud"のx座標プロパティが410以上になったら、-110を代入する)
if (cloud._x>410) {
cloud._x = -110;
}
[/code]

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

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

_x x座標。数値が増えるほど右へ移動
_y y座標。数値が増えるほど下へ移動
_alpha 透明度(%)
_height インスタンスの高さ
_width インスタンスの幅
_xscale インスタンスの横の拡大率(%)
_yscale インスタンスの縦の拡大率(%)
_rotation 回転。正の値で時計回りに回る。

FlashLiteのファイルサイズオーバー対策まとめ

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

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

シンボル、シェイプ

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

ActionScript

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

その他

FlashできれいなアニメGIFを作る

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のエラーメッセージ

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

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

携帯でグラデーションをきれいに表示する

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

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

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


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

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

パスとビットマップのメモリ/ファイルサイズ比較

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


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

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

26x26px 76x76px 180x180px 240x240px
パス
(Flash上での曲線数:360)
Heapメモリ 145KB 152KB 155KB 156KB
ファイルサイズ 1KB 1.1KB 1.4KB 1.5KB
PNG-24
(Photoshop「Web用に保存」)
Heapメモリ 108KB 130KB 238KB 340KB
ファイルサイズ 0.5KB 2.4KB 7KB 10.4KB
PNG-8 16色
(PNG-24→Pngquant→OptiPNG)
Heapメモリ 107KB 113KB 142KB 169KB
ファイルサイズ 0.4KB 1.6KB 4.6KB 6.6KB

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

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

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

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

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

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

FlashLiteのメモリーオーバー対策まとめ

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

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

シェイプとビットマップ

シンボルとインスタンス

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

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