イトウ先生のTipsnote AfterEffects CC 2019 の新機能:Animate FLAファイルの読み込み

イマジカデジタルスケープ 短期集中クリエイティブ講座

イマジカデジタルスケープ・AfterEffects・Photoshop・HTML・CSS・JavaScript・1日トレーニング

Web・動画・映像・ゲーム・DTP・CG・Adobe Creative Cloud・キャリア・就活に

 
 
1 トレーニングの再開について
 
 
2 緊急事態宣言発令に伴うトレーニングの開催延期について
 

お客様index

企業・自治体のお客様に 業務効率化、コスト削減に

クリ博登録者・学生の方に 割引トレーニングはコチラ


イトウ先生のTipsnote

イトウ先生のTipsnote Secondbook


イトウ先生のTipsnote:目次

【 AfterEffects CC 2019 の新機能:Animate FLAファイルの読み込み 】

こんにちは、イマジカデジタルスケープの伊藤和博です。
今週は、AfterEffects CC 2019から新機能で「Animate FLAファイルの読み込み」をご紹介します。 AfterEffectsは元々FLASHおよびAnimateでパブリッシュしたSWFが読み込めますが、CC2019では、わざわざSWFにパブリッシュしなくても、FLAを取り込むだけで、自動的にSWFにパブリッシュして取り込む、ということができるようになりました。
さらに、FLAを読み込むと、Animateの個々のレイヤーを個別にSWFに変換して取り込むため、Animate上でのレイヤー構造を活かしたままAfterEffectsに取り込めるようになりました。

Flash Playerのサポート終了が2020年まで、と発表されてすでに3年ほど経ち、Webサイト上でSWFを見かける頻度が少なくなってきました。Animate側での制作も、SWFにパブリッシュする目的でActionScript3.0でドキュメントを作成する、という作業に比べ、HTML5canvasで作成しJavaScriptとして使用する、というケースの方が増えたかと思います。
このようなHTML5canvasで作成したドキュメントも、Animate側のレイヤー構造を維持したままAfterEffectsに取り込む、ということが可能になりますので、その辺りをご紹介していきます。

さっそくやってみよう!

まず、このFLAを直接AfterEffectsに取り込む機能を使うには、PC側にAnimate CC 2019がインストールされている必要があります。インストールしていない場合は予めAnimate CC 2019をインストールしておきます。 以下は、Animateで作成したHTML5canvasのデフォルトで作成できるサンプルファイルになりますが、このサンプルファイルに追加で効果音を入れてあります。

Aecc19_Anime001

このHTML5canvasで作成したドキュメントはHTMLとJavaScriptでパブリッシュされるため、SWFとしてAfterEffectsに取り込むには、Animate側でSWFにパブリッシュする必要がありますが、HTML5canvasをSWFでパブリッシュするには、一度ActionScript3.0ドキュメントに変換し、パブリッシュする必要があります。

Aecc19_Anime006

ただし、Animate側でSWFにパブリッシュして取り込むと、当たり前ですが単一のSWFとして取り込まれます。

Aecc19_Anime005

そこで、今回追加された新機能で、AfterEffects側で直接このFLAを読み込みこんでみます。すると、以下のようなウインドウを返します。

Aecc19_Anime008

「フォルダーを選択」というのは、今回のこの新機能では、Animateのタイムラインにあるレイヤーは個別のSWFとして取り込まれる為、各レイヤーをSWF変換した際の保存先を指定するフォルダになります。また、FLAの中にサウンドがある場合は、「import audio」にチェックを入れて取り込むと、FLAの中で使用しているサウンドファイルも取り込みます。 取り込むと、以下のようにコンポジションとして取り込まれ、Animateの各レイヤーは個別のSWFに変換して取り込まれます。サウンドも取り込まれているのがわかります。

Aecc19_Anime009

個々のレイヤーとなるSWFは、「フォルダーを選択」ボタンで指定したフォルダにパブリッシュされます。

Aecc19_Anime010

ループ

このFLA取り込みのメリットは、AnimateのレイヤーをAfterEffectsの個別のレイヤーとして取り込める=レイヤーを個々に操作できる、というところにありますが、取り込み時点はあくまでもコンポジションとして取り込まれ、フッテージではないことから、AfterEffects内でアニメーション全体をループ再生する場合は、エクスプレッションで行うか、または一度このコンポジションをプリレンダリング、または従来通り統合された単一のSWFとして取り込み、フッテージのループ設定を行うか、になります。

Aecc19_Anime011

この、エクスプレッションでループを行う方法の詳細は、以下のサイトにて解説したいと思います。

「To Creator」と「イトウ先生のTips note - Second book」

この度、イマジカデジタルスケープでは、クリエイティブに関わる全ての方へ、クリエイティブ業界で働く人たちへの価値を提供する、「To Creator」(トゥ クリエイター)というサイトを開設することになりました。
このサイト内に、【イトウ先生のTips note - Second book】という別のブログを開設いたします。 Second bookというのは「2冊目」という意味になりますが、Second bookでは主に「イトウ先生のTips note」の続きとなるお話や、関連するお話を掲載していく予定です。今回のAfterEffectsの記事に関する続きのお話を記載いたしますので、もしご興味がありましたらぜひ見てみてください。

To Creator
https://www.dsp.co.jp/tocreator/


イトウ先生のTips note - Second book
https://www.dsp.co.jp/tocreator/movie/tips-movie/itohsensei/

今回のこの機能の搭載で、FLAの中にある個別のレイヤーも、特にパブリッシュを必要とせずにSWFとして取り込めるようになりました。Animateの場合は、シンボルのネストで個別のレイヤーでアニメーションを作成しているケースも多いかと思いますので、ぜひFLAファイルはこの方法で取り込んでみてください。

関連講座

↑ページTOPへ

| カテゴリ | | Web | DTP・デザイン | CG・動画・映像 | キャリア・就活 |
| お客様 Index | | 企業・自治体のお客様に | 学生の方に |
| 目的別・状況別 Index | | Webデザイン入門セミナー | 映像編集入門セミナー | DTPデザイン入門セミナー | 魅力的なポートフォリオ作成 |
| Adobe CCを覚えたい方に | | Photoshop CC 2018の使い方・基本 | Illustrator CC 2018使い方・基本 |
| 画像をきれいに編集する方法 | 読みやすい文字の組み方 |
| HTML / XHTML / CSSの基礎知識 | HTML5 / CSS3の基礎知識 | JavaScriptの基礎知識 | jQuary・jQueryMobileの基礎知識 |
| Dreamweaver CC 2015の使い方・基本 | InDesign CCの使い方・基本 |
| AfterEffects CC 2018の使い方・基本 | AfterEffects CC 2014の使い方・実践 |
| Premiere Pro CC 2018の使い方・基本 |
| Webの基本をマスターしている方 | | 棚橋弘季氏の直伝、ユーザー中心のWebサイト設計 | 益子貴寛氏が伝授するCSS実践テクニック |
| 矢野りんさんに学ぶ、”使える”デザイン基礎知識 | こもり氏のHTML+CSS基礎 | 平塚氏のマーケティング基礎 |
| 坂本氏のIA入門 | Webに関わるすべての人の「Webリテラシー」講座 | 神森勉氏に学ぶコーディング講座 |
| 森川眞行氏に学ぶ、大規模サイトの構築・運用マネジメント |
| 就職・転職・就活中の方へ | | 模擬面接セミナー(個別FB付) | エントリーシートブラッシュアップセミナー |
| 面接・職場で使えるビジネスマナー研修 | 職務経歴書添削セミナー |