ダイアログボックス

アニメータの道具箱

FlashとAfter Effectsが実現するベクトル+ビットマップの表現力豊かなモーショングラフィックス

By クリス・ジョージンズ

図１. Yahooを窮地から救う顔文字のスーパーヒーロー

ベクターベースのラインがくっきりとしたアニメーションを作成する場合は、 Flash がうってつけだということは、アニメータなら誰でも知っているでしょう。 でも、ラスターベースの特殊効果を使いたければ、Flash以外のツールに目を向けることも大切です。

Flash 8では、リアルタイムのブレンドモードやフィルタ効果を適用できるようになりました。それでもアニメーションの特殊効果の中には、Flash 8のフィルタでは作成できないものもあります。そういった効果を追加したい場合は、どうすればよいのでしょうか？アニメーションに新しい手法を取り入れて面白い作品に仕上げるには、どんな方法があるのでしょうか？その答えがAdobe After EffectsとFlash の連携です。

それを説明するのに、いい例があります。つい先日、私はYahoo!とOgilvy Worldwideのために仕事をしました。新しいYahoo!インスタントメッセンジャーのプロモーション用にアニメーションを制作するという仕事です。このプロジェクトでは、ほぼ全体をFlashとAdobe Photoshopで制作しました。キャラクターのデザインとアニメーション作成をFlashで行い、Photoshopでは写真を加工して背景画像を作成しました。そして最終的に、その背景画像をFlashに取り込むという方法をとりました。

ただ、どうしても使いたかった特殊効果が、Flashだけでは作成できなかったのです。このプロジェクトに登場するキャラクターは、どれもエモーティコン（顔文字）ベースのスーパーヒーローで、それぞれ独自のパワーを持っています。その中の１人の顔を、「ノーマル」から「スチールモード」に変身させるという必要があったのです。そこで私はAfter Effectsを使用し、渦巻きのように回転するエフェクトを使って２つのグラフィックをモーフィングしました。その結果、ミキサーにかけたようにオブジェクトが渦巻いて徐々に溶けていき、最終的には別のオブジェクトに変わるという、イメージ通りのエフェクトを実現することができました。

このプロジェクトでは、どんなテクニックでこのエフェクトを実現するか、そしてどのようにファイルサイズを最小化するかという、相異なる２つの課題がありました。

使用するツール
Flash Professional 8
After Effects 7.0またはAfter Effects

この記事に必要な予備知識
以下の手順を理解するには、FlashとAfter Effectsのワークスペースに関する基本的な知識が必要です。

Flashでスーパーヒーローの「変身前」と「変身後」の状態を作成するには
モーフィングエフェクトを作成するための最初のステップは、Flashで「変身前」の画像（画像 1）と「変身後」の画像（画像 2）を作成することです。 これは、モーフィング前後の状態が分かっているので簡単です。 難しいのは、１つの状態からもう１つの状態へ変化させるという部分です。

図２. エモーティコンの「変身前」と「変身後」の顔

次に、エフェクトを適用する画像をそれぞれFlashの新規ドキュメントにコピーします。 それから各ドキュメントをPNGファイルとして書き出し、After Effectsで使用できるようにします。

1. Flash新規ドキュメントで、「ノーマル」なエモーティコンの画像がステージに貼り付けられていることを確認します。
2.ファイル／イメージの書き出しを選択します。ファイル名を head_a.png として、ファイルの種類はPNG（非圧縮）を選択します。
3. 画像をグラフィックのサイズにクロップしたい場合は、PNG書き出しダイアログボックスで、範囲ポップアップメニューから イメージサイズ を選択します。
4. バックグラウンドの透明を保持するには、カラーポップアップメニューから 24ビット（アルファチャンネル） を選択します。
5. 「スチールモード」のエモーティコンについても上記の手順に従い、ファイル名を head_b.pngとします。

図３. FlashのPNG書き出しダイアログボックスで行うPNGファイル書き出し設定

After Effectsでモーフィングエフェクトを作成
Adobe After Effectsを起動すると、デフォルトで新規の名称未設定プロジェクトが自動作成されます。 コンポジション／新規コンポジション（Ctrl+N）を選択して、新規コンポジションを開きます。コンポジション設定ダイアログボックスが表示され、ここでプロジェクトの設定をカスタマイズすることができます。今回の例で最も重要なのは、フレームレートがFlashムービーと同じになっていることです。それが確認できたら「OK」をクリックします。

図４. After Effectsで新規コンポジションを作成するときに表示されるコンポジション設定ダイアログボックス。 フレームレートが Flash ファイルと同じであることを確認

プロジェクトウィンドウまたはファイルポップアップメニューから、読み込み／ファイル（Ctrl+I）を選択し、Flashから書き出した２画像を指定して、開くをクリックします。すると、そのアセットがプロジェクトウィンドウに表示されますので、コンポジションウィンドウにドラッグ＆ドロップして作業を開始します。

図５. プロジェクトウィンドウからコンポジションウィンドウへ、画像をドラッグ＆ドロップ

ファイルをコンポジション内にドラッグ＆ドロップすると、その度に新しいレイヤーが自動作成されます。 今回作成するエフェクトの場合、コンポジション内で完全に同じ位置に２つの画像を配置する必要があります。

図６. 「スチールモード」の顔が「ノーマル」の顔に完全に重なるように配置

制作プロセスのこの時点で、エフェクトのデュレーションに合わせてタイムラインの長さを調整しておきます。エフェクト全体の長さはほんの２∼３秒なので、タイムラインのデュレーションもその長さに縮めます。タイムラインを変更する際には、「ノーマル」画像（head_a.png）がアニメーション全体で継続し、２つ目の画像（head_b.png）がデュレーションの後半にだけ現れるようにします。「スチールモード」画像は変身し終わった後の顔なので、エフェクトの開始時点では見えないようにしておきたいからです。

図７. 画像を適切に配置した状態の、After Effectsのタイムライン

次はいよいよお待ちかねの、エフェクトを画像に適用するというステップです。 １つ目の画像が配置されているレイヤーを選択し、エフェクト／ディストーション／回転を選択します。

図８. エフェクト／ディストーション／回転を選択

エフェクトを適用すると、そのエフェクトのプロパティがタイムライン上のレイヤーに追加されます。 レイヤーのサブセクションをクリックして展開すると、利用可能なオプションが表示されます。 ここで、キーフレームの作成、適用したエフェクトの調整、あるいはアンカーポイント、位置、スケール、回転、不透明度といったレイヤーのプロパティを編集することができます。

図９. コンポジションのレイヤー２に、回転エフェクトと利用可能なオプションが表示された状態

エフェクトコントロールウィンドウでは、エフェクトのプロパティのコントロールと調整を行うことができます。 この例では、角度のツマミを回転させ、回転半径のスライダバーを動かして、回転エフェクトを調整します。

図10. 回転エフェクトによるモーフィング

エフェクトコントロール（図10）とタイムラインのプロパティ（図11）の両方を使用して、２つのレイヤーに配置された画像の両方に対して、キーフレームの作成、エフェクトの適用、不透明度の調整を行うことができます。 回転エフェクトを両方の画像に適用し、２つ目の画像が元の画像の上に徐々に現れるように調整します。

図11. タイムラインでモーフィングエフェクトを設定

このようなエフェクトでは、「これでOK」という状態になるまでに、かなりの微調整を行うのが普通ですので、 ちょっと腰をすえて、タイムラインとエフェクトのプロパティを完全に納得いくまで調整してください。

思い通りにエフェクトが完成したら、いよいよアニメーションを書き出す準備をします。必要以上の長さを書き出す必要はありませんので、まずタイムラインをアニメーションのデュレーションに合わせてトリミングします。ワークエリアのスライダをドラッグして、アニメーションのフレーム範囲に合わせます。

図12. アニメーションのデュレーションに合わせてタイムラインをトリミング

コンポジションウィンドウの下部に、目標範囲のクロップツールがあります。 このツールは、Photoshopの切り抜きツールと同じように使えます。 このツールをクリックしてから、コンポジションウィンドウにあるアニメーションを覆うようにドラッグするだけで、アニメーションの境界エリアを指定できます。

図13. 目標範囲ツール

目標範囲を指定したら、コンポジション／コンポジションを目標範囲にクロップを選択します。

図14. コンポジションを目標範囲にクロップ

次に、ファイル／書き出し／イメージシーケンスを選択します。 フォーマットはPNGを選択します。

図15. シーケンスを書き出す際にPNGフォーマットを選択

このエフェクトでは透明背景を使用するので、オプションメニューから「数百万色+」を選択します。 （「+」はアルファチャンネルを表します。）

図16. シーケンスの書き出しでは、アルファチャンネルを含む「数百万色+」を選択

アニメートされたエフェクトをFlashへ取り込む
After Effectsから書き出した画像シーケンスには、命名規則によって数字が順番に割り当てられています。 Flashでシーケンスを読み込むには、ファイル／ライブラリに読み込みを選択し、そのシーケンスの最初のファイルを選択します。すると、それがシーケンスの最初の部分であることをFlashが認識し、選択したファイルのみを読み込むか、シーケンス全体を読み込むかを選択することができます。シーケンス全体を読み込むと、Flashのライブラリにムービークリップのシンボルが作成されます。ムービークリップには一連のPNG画像 が含まれ、各画像が個々のキーフレームに配置されています。このムービークリップをステージにドラッグし、ムービーをテストします。

図17のムービーを見るには、こちらをクリックしてください。 After Effectsで作成したモーフィングエフェクトをFlashで再生します。

ムービーを制作していて、必要なエフェクトをFlash 8だけでは作成できないとき、それを完璧に補ってくれるのがAfter Effectsです。 Flash 8の新しいフィルタやブレンドモードは、Flashが大きくパワーアップした証であり、魅力あふれるビジュアルの制作を実現してくれます。ただ、「腕まくりしてチャレンジ」といった方法でアニメーションのエフェクトを作成するとなると、解決策を提供してくれるのは、やっぱりAfter Effectsなのです。