Adobe After Effects ユーザーのための支援ファイルセット

QE

FlashとAEの連携

AEでスプラッシュ.swfをつくろー。(ベクターSWF出力編)

映像をwebで展開することが多くなってきた昨今、AE CS4ではFlashとの連携がより強化されたことに加え、Flash CS4自体に搭載された3Dグラフィック効果や加減速を調整できるモーションエディタ機能、モーションパスの直感的な編集など、アニメーション機能の向上もグぐっとAEライクに迫って来た感がある。

とは言っても、これらの機能はAEがバージョン5.0で搭載済みであることからアニメーション表現では、やはりAEの方が遥かに分があるでしょう。
そこで、Flashで展開可能な出力方法から描画に応じたベストな選択肢を探究してみる。

例えば、オーブニングによく見られるインタラクティブな要素を必要としない一方通行のスプラッシュムービー(前フリ)などは、AEで制作するに打ってつけのパートと言える。以下、たたき台のサンプルをつくってみました。(ケース 1)


いくつかのコピーが登場した後、商品イメージやお決まりのタイトルで収まる典型的な例です。このような画面全体がスピーディに動くアニメーションは、FLV形式の出力がベストではと思います。Flash上でスキン(コントローラー)なしで貼付ければ手っ取り早く装える。

FLV出力のメリットはAE上でエフェクトを多用した表現でも、モーションブラー付きで30フレの滑らかな再生が可能なこと。デメリットはコピーやテキストにも圧縮がかかってしまうので、色数と設定レートによっては肝心な箇所で荒れてしまう心配があることくらいか。
FLVはムービーファイルになるのでそれなりの容量になるが、コンパクトな圧縮と画質の高さは実にすばらしい。このサンプルのフルサイズ(720 x 540 pixels)、30フレーム/秒、11秒尺で1.5Mbほどになる。
実際のフルサイズ表示も用意してみたので動きとスタートに要する待ち時間などをチェックしてみる。
ここをクリックでポップアップ表示 >>

フルサイズになるとやはりテキストの荒れが若干気になるところだが、同じレイヤー構造をFlashで構築してもこの容量では収まらないだろう。要はクオリティとファイルサイズのバランスがエンコード時のネックと言えるだろう。

では、背景が静止画で動かないことに加え、テキストがゆる〜い動きで間を取った長尺のケースではどうだろうか?
同じようにたたき台のサンプルをつくってみました。(ケース 2)


ちなみに、この場合のFLV出力はケース 1と同じ設定レートで出力しても1.9Mbにもなる。所要時間が長くなったことで容量も増えた訳です。
さて、本テーマを分かりやすくするためにこのようなケースを用意してみたが、ここではテキストとタイトルのベクターレイヤーにしか動きを付けていない。このような場合は、ベクターモーションだけをswf形式で出力し、Flash上で再配置して、swf出力するとフルサイズでも何と!56Kb!で収まる。(驚)
フルサイズでその軽さを確認してみる。
ここをクリックでポップアップ表示 >>

いや〜軽いっす。恐るべきコンパクト化である。また、ベクターレイヤーには圧縮がかからないのでテキストやタイトルのクオリティが落ちないこともswfのメリットです。また、アニメータを使用したテキストモーションをそのまま再現できるので、AEの良さを盛り込めるのが尚よい。AEでは以下の手順で出力します。

▼ STEP 01
ここではベクターモーションに該当するすべてのレイヤーをひとまとめにしてswf出力する。
ラスター画像のみを非表示にして、すべてのベクターレイヤーだけを表示させる。エンドフレームにワークエリアを設定。
ラスターレイヤーとベクターレイヤーをラベルカラーで色分けしておくとレイヤー数が増えた時の選択が効率化できる。
STEP01
▼ STEP 02
[ファイル]メニュー→[書き出し]→[Adobe Flash Player(SWF)]を選択する。ファイル名に名前を付けて[SWF設定]ダイアログの[サポートされない機能]を[無視]に設定してOKする。ここで[ラスタライズ]を選択すると何故かIllustratorフッテージのベクターレイヤーだけがラスタライズされるので要注意です(謎?)。
STEP02
▼ STEP 03
背景のラスター画像は通常のレンダーキューパネルから静止画出力を行う。
STEP03
▼ STEP 04
後はFlashでAEと同じドキュメント設定をした後、ベクターモーションのswfファイルを[ファイル]メニュー→[読み込み]→[ステージに読み込み]で配置します。続けて背景の静止画レイヤーを配置して、ベクターレイヤーのエンドフレームにStopのアクションを入れて完了。最後にswf出力です。
ベクターモーションの動きはすべてフレームモーションとして読み込まれるので、Flash上でのモーションの修正はほぼ不可能でしょう。AEに戻って再出力、再読み込みってことですな。
STEP04

ここでちょっとした疑問が湧く。AEでswf出力が可能ならベクターモーションのみをわざわざswf出力せずにコンポジション自体をswf出力すれば簡潔するではないか。と思うだろう。ところがどっこい、AEのコンポジション全体のswf出力では容量(3.8Mb)とクオリティが大きく違う結果だった。残念。。これまた謎!?

ともかく、AEで作成したベクターモーションはそのままswf出力で再現できることを良しとしよう。そしてポイントを抑えて作成する必要がある。

ベクターモーションとして利用できるレイヤータイプは、Illustrator(ペクター)レイヤー、テキストレイヤー、平面レイヤー、の3つだけである。一見、いけそうに思えるシェイプレイヤー(CS3以降)や、マスクパスを適用した平面レイヤー、コラップスを効かせたコンポジション(ネスト化)レイヤーなどもNGである。また、動きはトランスフォームのモーション設定に限られ、上記3タイプのレイヤーであっても3Dレイヤー化したり、トラックマットやマスク処理がされていれば、これまたNG。当然すべてのエフェクト効果はラスタライズの対象となる。

どーですか。極めて限られた設定しかできないでしょう。
ただ、先に紹介したテキストのアニメータ(3D化やブラーを除く)や、エクスプレッションを使用したモーション設定は問題なくベクター化できるので、そこは腕の見せ所と割り切ろう。

次回は、このラスタライズしてしまう箇所の対策を探究したい。ひとまず。

>> 追記です。
FLV出力はAE 7.0以降から、SWF出力は何とAE 5.Xから利用できる。6.5以前は買収前なので[Macromedia Flash(SWF)]となっております。


日時: 2009年04月14日 05:37 | パーマリンク


AEでスプラッシュ.swfをつくろー。(ラスター出力編)

前回に引き続き、Flashで連携できるAEプロジェクトからの最適な出力方法を探究する。より軽いファイルサイズを目指し、尚かつAEのディテール表現にもこだわりたい!が、ここでの主旨である。

前回、AEで作成したベクターモーションはswf出力で再現可能なことを抑えた。今回はエフェクト効果などAEの機能の多くがラスタライズの対象となってしまうので、その対策を探究する。手抜きではあるが、前回のサンプル(ケース 1)を使用します。

ここをクリックで(ケース 1)のフルサイズをポップアップ表示 >>

これはFLV出力したムービーファイル(1.5Mb)だが、手っ取り早くFlashに貼付けられる反面、仕事ではその圧縮によるタイトルやコピーの荒れがNGになることもある。これを避けるには、ベクターレイヤーは圧縮のかからないswf出力で、ラスタライズされる対象レイヤーはFlashに配置できる最適なフォーマットで出力し、これらを組み合わせ再出力する必要があります。
また、ファイルサイズを小さくするためにはフレーム/秒を落とすという根本的な対策もあるが、ここでは対 FLV出力と比較するためFlash上でもAE設定と同じ30フレームで試してみる。

このサンプルケースでは、ラスタライズ対象レイヤーがベクターレイヤーの上にかかったりする効果がないため、ラスターレイヤーをすべてひとまとめにして、PNGシーケンス、FLV、swfと3つの形式で書き出し、Flash上でどのタイプが軽く、クオリティが保たれるかを出力テストした。

▼ STEP 01
前回同様、すべてのベクターモーションだけをひとまとめにしてswf出力する。対象レイヤーのみを表示、ワークエリアをエンドフレームに設定して[ファイル]メニュー→[書き出し]→[Adobe Flash Player(SWF)]を選択する。ファイル名に名前を付けて[SWF設定]ダイアログの[サポートされない機能]を[無視]に設定してOKする。
STEP01

スピード感のあるベクターモーションにはモーションブラーの効果をつけることができないので、キビキビした動きはメリハリ感が強くなる印象です。ベクターモーションのみのswf出力。

▼ STEP 02
(PNG出力)
同じ要領でラスターレイヤーだけをひとまとめにして出力する。
ラスターレイヤーのみを表示して、レンダーキューパネルからPNGシーケンス出力を行う。
STEP02
▼ STEP 02
(FLV出力)
続けて、ラスターレイヤーだけをひとまとめにしたFLV出力を行う。ここではビデオコーデックに[On2 VP6]、ビットレートは[1000]に設定した。
STEP03
▼ STEP 02
(swf出力)
最後の出力に、[ファイル]メニュー→[書き出し]→[Adobe Flash Player(SWF)]を選択する。ファイル名に名前を付けて[SWF設定]ダイアログの[JPEG画質]を[低(ファイル小)]に、[サポートされない機能]を[ラスタライズ]に設定してOKする。この設定でも以外ときれいなラスター画質です。
STEP04
▼ STEP 03
Flashに移り、AEと同じドキュメント設定をした後、出力したファイルをそれぞれ[ファイル]メニュー→[ステージに読み込み]でレイヤー別に読み込む。FLVはファイル内に埋め込みで配置します。ベクターモーションのレイヤーのエンドフレームにStopのアクションを入れて完了。PNGシーケンス、swfの各素材も同様に処理して最後に出力します。
STEP05

結果は以下の通りです。FLV素材を埋め込んだ出力ファイルが圧倒的に軽く、クオリティを落とさない結果となった。コピーやタイトルを含めたAEからのFLV出力より容量が軽くなった。(驚)
尚、パブリッシュ設定はすべてのタイプとも同じ設定で出力している。

PNGシーケンスレイヤー出力(1.9Mb)フルサイズの描画をチェックする>>
FLVレイヤー出力(984Kb)フルサイズの描画をチェックする>>
swfレイヤー出力(3.7Mb)フルサイズの描画をチェックする>>

当然、ファイルサイズでレスポンスが大きく左右する結果となった。
swf出力素材は際立って容量が重いことから、ラスタライズされるレイヤー出力には完全に不向きと言える。
PNGシーケンスは圧縮のかかっていない画質、一方FLVは出力した時点で品質を損なわない程度に圧縮されているので、この点が最終出力で明暗を分けたと考える。
また、AEのレイヤー階層をFlashでも効果別にレイヤー分けしたファイルも作成して出力テストしてみたが、ラスター素材のレイヤー数が増える程、出力ファイルサイズも増えてゆく結果となった。

結論、ラスター素材は最小限のレイヤーにまとめてFLV出力がベスト。
(ただし、あくまでも個人的な見解です。)


日時: 2009年04月19日 17:39 | パーマリンク