After Effects で Flash 表現をよりリッチに魅力的に

「After Effects は Web制作 とはあまり関係ない」と思っている方はいませんか? その考え方は間違っています。Flash はインタラクティブかつ多彩な表現力を持つコンテンツやアニメーションを作成するツールであり、After Effects はビジュアルエフェクトとモーショングラフィックスのための使いやすいアプリケーションです。Flash と After Effects を連携させれば、よりリッチで魅力的な表現を実現することが可能です。アドビとしても、バージョンアップを重ねるごとに、両製品がより綿密に連携できるように進化させてきました。

Flash + After Effects のメリットを、みなさんにもっと知っていただきたい。そこで、先月刊行された『Flash + After Effects 創造と表現の可能性をひろげる』(ボーンデジタル刊)の著者である Chris Jacksonさんに、Flash + After Effects のメリットとコツを伺いました。

※Chris Jacksonさんと株式会社ボーンデジタルさんのご厚意により、『Flash + After Effects 創造と表現の可能性をひろげる』のダイジェスト版PDF を当記事においてダウンロード配布しています。詳しくは、記事末を見て下さい。

Edge:Flash ユーザにとって、After Effects を使うメリットは何でしょうか? 逆に After Effects ユーザにとって、Flash を使うメリットは何でしょうか?

Chris:Flash ユーザにとって After Effects は、Flash のプロジェクトをさらに上のレベルの 2Dアニメーション に引き上げてくれるツールです。After Effects は、Flash だけでは難しい、あるいは実現できない様々なビジュアルエフェクトの組み合わせを提供してくれます。たとえば、粒子系(パーティクル)や水動力学的(ウォーターダイナミックス)なエフェクト。こうした複雑なエフェクトでも、After Effects では単純なドラッグ&ドロップで適用することができます。

パーティクルエフェクトの適用
パーティクルエフェクトの適用例

水動力学的エフェクトの適用例
水動力学的エフェクトの適用例

また、テキストアニメーションは、Flash で作成すると意外と難しく、時間のかかる作業です。After Effects のテキストエンジンは、アドビが提供するエンジンの中でも最も洗練されたものの1つです。After Effects のテキストアニメーションプリセットを使えば、Flash では何時間もかかる表現を簡単に作成することができます。

After Effects のプリセット画面
After Effects CS4 に用意されているテキストアニメーションプリセット。
3D、in/out、ブラーなど17のカテゴリがあり、全部で300以上のプリセットがあります

一方、After Effects ユーザにとって Flash は、Web ビデオをより魅力あるものにする上でとても優れたツールだといえます。デジタルビデオはもはやリニア(一方向のみに進むもの)ではありません。ActionScript を使えば、ビデオの再生方法をコントロールできます。Flash のキューポイント機能を使えば、DVD のチャプター機能のように、視聴者が(あるアクションに基づいて)特定のフレームにジャンプできるようにすることが可能です。キューポイントは、他にも Flash ファイルに対してさまざまなイベントやアニメーションを起こさせるトリガーを付与することができます。


Flash のキューポイント機能を使えば、
ユーザのアクションに反応して、特定のフレームにジャンプできるようにすることができます

また、Flash はビデオのアルファチャネルをサポートしています。この機能により、Flash ゲームやインストラクションコンテンツをよりリッチにすることができます。

Edge:After Effects を使った Flash 事例は増えてきているのでしょうか?

Chris:After Effects を使って Flash コンテンツをより魅力的なものにする手法は、どんどんポピュラーになってきています。たとえば、ハリウッドのメジャーな映画作品の多くでは、After Effects と Flash を使って Web サイトを制作し、その映画のプロモーションやマーケティングに活用しています。

Edge:Flash と After Effects との連携は簡単にできるのでしょうか?

Chris:製品がバージョンアップするたびに、2つの製品はより効率的に連携できるようになってきました。Flash ユーザは、After Effects のワークスペースやワークフローをすぐに理解できると思います。Flash CS4 で搭載されたオブジェクトベースでのアニメーション制作手法は、After Effects での手法により近いものとなっています。また、Flash CS4 には 3D やローテーションツール機能が搭載されたので、After Effects で作成した 2Dオブジェクト を 3D空間 でアニメーションすることもできるようになりました。

Edge:Flash ユーザが After Effects を使う、またその逆においてコツや注意点はありますか?

Chris:Flash ユーザがリッチなユーザ体験を提供するサイトを作る場合、主にビデオやモーショングラフィックスを統合する際に After Effects を使っています。多くの Flash ユーザは、After Effects を使って小さなモーショングラフィックスのコンポーネントを作り、それを別途 Flash のワークスペースに読み込んでいるようです。実は、After Effects でデザインした素材を Flash に持ち込むための、もっとスムーズなワークフローがあるのです。After Effects のコンポジション(プロジェクトファイル)を、単にレイヤー化された XFLファイル として書き出し、それを Flash で開いて編集することができるのです。

また、ビデオはファイルサイズが大きいという特性があるため、Web にビデオを使う場合は注意が必要になります。Flash と After Effects を連携して使う場合、非圧縮ビデオをレンダリングすることは避けるべきでしょう。非圧縮のビデオファイルは Web で提供するファイルとしては大きすぎて、効果的ではありません。

一方、After Effectsユーザは、(放送や販売用ビデオと比較して)Web ビデオでは映像品質についてある程度の犠牲を強いられることになります。どの程度まで妥協するかは本人次第です。After Effects や付属する Adobe Media Encoder を使ってビデオを圧縮する必要があります。最初に、なぜ、そしてどのようにビデオが圧縮されるのかを理解することから始めるのがいいでしょう。人間の知覚は限られています。圧縮ツールはこの点を利用して、我々が認知できないデータをあえて省くことで圧縮しています。私の本の Chapter 10 では、ビデオの圧縮と最適化について詳しく解説しているので参考にして下さい。

Edge:Flash + After Effects を学ぶ上で、おすすめの情報サイトを教えて下さい。

Chris:この本を書いている際、Flash + After Effects のみにフォーカスした Web サイトがあまりないことに気づきました。その点、Adobe.com は両方のアプリケーションについてのチュートリアルを多く提供しています。2つのアプリケーションの連携についても紹介されています。あと、Lee Brimelow の gotoandlearn.com には素晴らしいビデオチュートリアルがあるので見てみるといいでしょう。

私自身も 2~3ヵ月 以内に cjacksonstudios.com という Web サイトを公開する予定です。私の本をサポートするチュートリアルも加えていく予定ですので、ぜひご覧下さい。

Flash と After Effects は、お互いを補完する存在と言えます。Flash はアニメーションとインタラクティブコンテンツのためのクリエイティブな Web ツールです。After Effects はビジュアルエフェクトとモーショングラフィックスのためのツールです。私の本では、これら2つのアプリケーションがどのように統合して、Web や CD/DVD 向けのリッチコンテンツを制作できるのかを分かりやすく解説しています。それぞれのチャプターは、読者の方々がプロジェクトベースの演習項目を通して、理解できるように設計されています。各演習は、効率的に Flash と After Effects を使うように設計されていて、ステップ・バイ・ステップのインストラクションが用意されています。さらに、読者の方々が、それぞれの Flash プロジェクトにクリエイティブなソリューションを概念化し、視覚化するために使える Tips も盛り込んでいますので、ぜひ試してみて下さい。

 

Flash + After Effects

『Flash + After Effects 創造と表現の可能性をひろげる』

ダイジェスト版 PDF「Digest_Flash_AfterEffects」(ダウンロード)
※ダイジェスト版 PDF は個人での閲覧用のみにご利用下さい。公開、再配布、販売などを固く禁じます。



Chris Jackson氏写真Chris Jackson

コンピュータグラフィックスデザイナー。ロチェスター工科大学(Rochester Institute of Technology)教授。2Dコンピュータアニメーション、3Dコンピュータグラフィックス、モーショングラフィックス、トレーニング用マルチメディアなど、数多くの修士レベルコースで教鞭をとる。デザイナーとしての彼の作品は、オンラインコミュニケーションの分野において、25を超える著名な賞を米国内外で受賞。