どうも、太一です。

今回はAfterEffectsCS4のXFL書き出し機能を色々試してみた時のメモです。

FLV形式で書き出した時の比較は以前の記事で試しているので、

今回はAEのコンポーネントをPNG形式で書き出して利用してみました。 

 

 

ーー

 

アニメーション素材はPhotoShopCS4でアニメーションさせたいオブジェクト毎に

レイヤー分けして用意します。

 

 

折角なのでクリスマスカードを作ってみる事にしました。

 

 

 完成したpsdファイルをAfterEffectsのプロジェクトに追加。

プロジェクト内のpsdを更にコンポジションに追加すると、

psdのレイヤー構造が保たれている事が分かります。

ここではデュレーションを10s程に設定し、フレームレート30で設定しました。

 

 

AEの持つモーションプリセットの中でも、テキストアニメーションを利用する際は

あらかじめ、「レイヤー」→「編集可能なテキストに変換」を 選択しておく必要が有ります。

 

 

早速、「アニメーション」から「アニメーションプリセット」を利用して行きます。

 Adobe BridgeCS4を利用する事で、エフェクトを確認しながら選択できるのが便利です。

Bridge内で利用したいプリセットをダブルクリックする事でも利用可能です。

 （Bridgeについては以前書いた「Flash制作に欠かせない３つのツール」でも書いています。）

 

 

 

 折角AEを利用しているので、テキストアニメーションだけではなく、

サンタクロースの後方にキラキラ系のパーティクルも利用してみました。

  

 

完成したので「書き出し」からXFLで書き出します。

前回はFLVでしたが、手順はほぼ同じです。

 

  

 

書き出されたXFLを今度はFlashで開きます。

レイヤー構造はそのままですが、モーショントゥイーンが適用されています。

 

 

 配置されているグラフィックシンボルを開くと、

PNG画像が連番でぎっしりと埋まっている事が分かります。

10秒程のアニメーションですがこの時点の容量は約3MB。

 

 

実際にモーションが無い部分でも、何も像の無いPNGが並んでいたりするので、

その部分はごっそり削除します。

また、動きに合わせて等間隔で似た様な画像を差し引いたりして、

PNG画像を半分近く減らして行きます。 

この作業で1.4MBまでダイエットする事が出来ました。

 

AEやFlからはアニメーションGIFで書き出す事も出来ますが、

画質は以下の通り。。

 

静止画であればこの方法で解決は出来ますが、

ムービー書き出しではどうしても画質が全体的に下がります。 

どうしても画質良くアニメーションGIFを書き出したい場合は、

 

PhotoShopのアニメーション機能（CS3〜）を 使う方法がベストの様です。 

 

 

 

それでアニメーション用としてはどうしても使い辛い面が有りますね。

FlashやAfterEffectsから綺麗にアニメーションGIFを書き出す方法は無い物かでしょうか・・。

 

 

以下、完成したクリスマスカードです。

 

FlashやAfterEffectsのそれぞれの良いところを生かして制作に繋げたい今日この頃。