UNORTHODOX WORKBOOK
BLOG TOP › After Effects › [After Effects] 文字を書き順通りに徐々に表示させるアニメーションの作り方
[After Effects] 文字を書き順通りに徐々に表示させるアニメーションの作り方
Date 2015.09.24 Thu Category After Effects Tags アニメーション, 備忘録, 動画文字を書き順通りに塗りつぶしていくアニメーションが必要になったので、After Effectsを使ってアニメーション（動画）を作成しました。After Effectsは、あまり使う機会がなく、たぶんすぐ使い方を忘れてしまうと思うので、今後のために作り方をブログに残しておきたいと思います。
「文字を書き順通りに塗りつぶす」と言っても、単なる（After Effects上の）テキストではなく、Illustrator で作成したレイヤーに、件のアニメーションを施すという作業になります。
完成動画
作成方法
After Effectsのバージョンは、CC (2015) になります。他に、IllustratorとMedia Encoderがでてきますが、これらも CC (2015) になります。Macで作成していますので、ショートカットとかは全てMac用のものになります。
1. Illustratorでレイヤーをコピー 2. After Effectsでコンポジションを作成するまずAfter Effectsを開き、メニューの [コンポジション] → [新規コンポジション] の順にクリックし、動画の元となるコンポジションを作成します。
この設定は、メニューの [コンポジション] → [コンポジション設定] で、全て後で変更が可能ですが、フレームレートやデュレーション（動画の長さ）については、予め決めておいた方が無難です。
3. Illustrator画像の配置まず、メニューの [レイヤー] → [新規] 内の [平面] をクリックします。「平面設定」というダイアログが表示され、ここでは [カラー] の設定のみ行います。ここでのカラーは、仕上がりの色と同じになるので、仕上げたい色を指定します。
[OK] をクリックすると、今まで透明だったコンポジションの部分（設定によってはコンポジションの背景色）に、赤色に塗りつぶされた平面レイヤーが作成されます。この作成されたレイヤーをコンポジションで選択したまま「command + v」と打ち、先ほどIllustratorでコピーしたレイヤーをペーストします。
4. アニメーション部分のレイヤーを作成する次に、メニューの [レイヤー] → [新規] 内の [平面] をクリックで、もう１つ別の（アニメーション用）レイヤーを作成します。「平面設定」のダイアログで、今度は [カラー] を黒にして、[OK] をクリック、「ブラック平面1」というレイヤーが作成されます。
黒いレイヤーに覆われて、下のレイヤーが全く確認できない状態になってしまっているため、上の黒いレイヤーの [不透明度] を60%くらいにして、下のレイヤーが見える状態にします。
「ブラック平面1」というレイヤーが選択されている状態で、メニュー下の [ペンツール] をクリックし、下のレイヤーを見ながら、書き順通りにパスを打っていきます。
上記のように全てのパスが打ち終わったら、「ブラック平面1」レイヤーを選択したまま、メニューの [エフェクト] をクリックし、[描画] → [線] をクリックします。
すると「エフェクトコントロール」という線のスタイルを設定できるパネルが表示されますので（パネルが表示される場所は設定により異なります）、[すべてのマスク] にチェックを入れ、[カラー] に白を指定し、[ブラシの硬さ] は100%にしておきます。
ここまでで、先ほど変更した [不透明度] を100%に戻しておきます。
5. キーフレームを作るまず、先ほどの「エフェクトコントロール」パネルの [終了] の左側にある白い三角形をクリックします。0.0% から 100% のインジケーターが表示され、100%のところにつまみが配置されていますので、これを0.0%までスライドさせます。
そして、タイムラインのインジケーターの位置が一番左にあることを確認し、「エフェクトコントロール」パネルの [終了] のすぐ左にあるストップウォッチのようなアイコンをクリックします。
6. 下のレイヤーで切り抜く設定と言っても単純なもので、初めに作成した「レッド平面1」というレイヤーの [トラックマット] という項目で、[ルミナンスキーマット ブラック平面1] を選択するだけです。
[トラックマット] という項目が見当たらない場合は、[スイッチ/モード] という部分をクリックすると表示されるようになります。
今回のようなベクトルレイヤーの場合、レンダリング時にぼやけることがあるので、各レイヤーに対して [連続ラスタライズ] にチェックを入れておくと、ぼけを防ぐことができます。[連続ラスタライズ] の項目は、[スイッチ/モード] の切替えで表示されます。
7. はみ出し部分の処理 はみ出している部分をパスで隠すまず、どこか適当なスペースをクリックして、どのレイヤーも選択していない状態にし、[ペンツール] をクリックします。[塗り] に背景色と同じ色を指定し、はみ出ている部分が完全に隠れるようにパスで囲んでいきます。
これではみ出している部分は隠れましたが、このままだと表示のタイミングが来たとしても白い部分が残ってしまうので、表示させるべきタイミングが来たら [不透明度] を [0] にして、白いパスを非表示にするように（新たなキーフレームを作成して）設定します。
キーフレームを作成するタイムラインを1フレームずつ進めながら、非表示にしたい1フレーム手前で「シェイプレイヤー」の [トランスフォーム] → [不透明度] の左隣にある [ストップウォッチアイコン] をクリックします。
そして、タイムラインを1フレーム進めたところで、[不透明度] を [0] に変更します。
複数のコンポジションを扱う
新規にコンポジションを作成 元となるレイヤーの作成さっきと同じように、ベースとなるレイヤーをIllustratorからコピーして、[レイヤー] → [新規] → [平面] で新規の平面レイヤーを作成し、ペースト。「O」以外の余分な文字は削除します（この作業が地味に面倒）。
アニメーション部分のレイヤーを作成ここも同じように、新たな平面レイヤーを作成し、[不透明度] を調整して下のレイヤーが確認できる状態にします。作成したレイヤーを選択しつつ、ペンツールで文字順通りにパスを打ち、[エフェクト] で [線] をつけ、下の文字を覆えるだけの太さにします。
[不透明度] を元に戻し、先ほどとは少し手順が前後しますが、[ルミナンスキーマット] を選択して、下のレイヤーで切り抜きます。
フレームの位置を確認しアニメーションを設定ここでは、00:32 でアニメーションが開始し、01:19 でアニメーションが終了することが分かりましたので、「O」のコンポジションに戻って、フレームを 00:32 に合わせてから「エフェクトコントロール」の [終了] インジケーターを [0%] にスライドし、[終了] のストップウォッチアイコンをクリックします。
次に、フレームを 01:19 まで進め、今度は [終了] インジケーターを [100%] にスライドし、完了です。
これで、00:32 から 01:19 の間でアニメーションするコンポジションが完成しました。「X」についても同じように作成しておきます。
複数のコンポジションを配置
レンダリングする
レンダリングする場合は、レンダリングしたいコンポジションを表示（今回の場合は全てのコンポジションを配置した「mix」というコンポジション）し、まずメニューの [コンポジション] → [レンダーキューに追加] をクリックして、コンポジションをレンダーキューに追加します。
ここでは、[レンダリング設定] と [出力モジュール] をそれぞれ設定し、出力名を決定します。設定が完了したら [レンダリング] ボタンをクリックでレンダリングが開始します。
mp4でレンダリングする場合mp4(H.264形式)で書き出したい場合は、メニューの [ファイル] → [書き出し] → [Adobe Media Encoder キューに追加] をクリックし、Media Encoderを立ち上げます。
[H.264] と記載されている部分をクリックすると、「書き出し設定」というダイアログが表示されますので、形式や出力名を決定し（オーディオの書き出しが不要の場合は[オーディオを書き出す]のチェックを外す）、[OK] をクリックしてダイアログを閉じます。
まとめ
Related Posts
COMMENTS
Leave a comment キャンセル?NEW POSTS
文字を書き順通りに徐々にアニメーションさせて描画する「ハンドライティングアニメーション」をSVGで実装する方法。 以前に AfterEffects で同じようなことをやっていて、それのSVGバージョン。AfterEffe…
WordBench 長野 vol.7 で Webデザイナーが VCCW を使ってみた話をしてきました #wbnagano
2017年3月11日（日）、松本で開催された「WordBench Nagano vol.7」に参加および登壇させていただきました。 今さら感は否めませんが、Webデザイナーとして、WordPressの開発環境にVCCWを…