最初のアニメーションであるBouncing Ballに取り組む前に、まず技術的なチャレンジに挑戦したいと思います:テキストを手書きで書いたかのように描くということです。Fig Leaf Ragには美しい導入部があり、その最後のアクセントが1つの感嘆符のドットを配置する場所になります。

状況に応じて、それぞれ良いものとそうでないものがいくつかの方法があります。グラフィックタブレットを使用しているため、文字を描き、アニメーションをどのように行うかを示します。ただし、まず別の方法も紹介しますが、これは私のお気に入りではありません:


ステップ1–10

ステップ1

テキストレイヤーを削除し、代わりに描画できる通常のピクセルレイヤーである合成レイヤーを作成したいと考えています。テキストはレイヤー内にあります。つまり、Strg+Shift+Cを使用してまたは レイヤー>下位合成を作成を通じて「Typo_Intro」と名付ける下位合成を作成します。

アニメーションを簡単に作成する:線画アニメ

ステップ2

属性はすべて保持され、Turbulent Displace も含まれています。

これは望んでいないので、Turbulent Displace を選択し、Strg+Xを押して、それを1つ上の合成("Fig Leaf Rag")へ再度貼り付けます。

アニメーションを簡単に作成する:線画アニメ

ステップ3

"Typo_Intro"合成に戻ります。ここではテキストが表示され、アニメーションを行うことができます。

最初のオプションは パス を経由する方法です。 ペンツール を使用し、Aの最初の文字のラインを書きます。その後、一旦ペンを離し、Ctrlキーを押しながらどこかにクリックして現在のパスを終了し、次にAの2番目のラインを引きます。

再度ペンを離し、Ctrlキーを押しながらどこかにクリックして現在のパスを終了し、次に次のラインを引きます。これを繰り返して、テキスト全体を書きます。

アニメーション簡単に作成する:ラインアニメーション

ステップ4

次にエフェクトを適用します。CCバージョンでは コンター として見つけることができ、CS6までは ペンエフェクト と呼ばれていました。

それから、マスクを選択し、または 全てのマスクにチェックを入れて、これらのマスクを描画させます。

アニメーションが簡単にできる:ラインアニメーション

ステップ5

この小さなシンボルでマスクを非表示にし、パス を赤く塗ります。また、サイズ も変更できますが、これはすべてのマスクに対してグローバルに行われます。

マスクを再表示すると、各ポイントを調整して、下の白いテキスト全体が隠れるようにすることができます。

アニメーションを簡単に作成:線画	animationで線とかがあるかもっので、アニメーションで線を使います。

ステップ6

ここに 開始-終了- のスライダーがあります: 開始から終了までスライダーを動かすと、テキスト全体を描画することができます。

これは非常に効果的ですが、正確な制御はできません。たとえば、常に同じペンの太さを使用する必要がありますので、細い線や太い線を描くことができません。

アニメーションを簡単に作成する:ラインアニメーション



そのため、一つ一つを描くより速い方法をお見せしたいと思います ...

ステップ7

この場合、少し早い方法をブラシ でお勧めします。

ただし、このブラシ はテキストレイヤーに適用できません。したがって、再度 下位合成を作成 し、"Typo_Static" と名付けます。この 下位合成 で作業を行います。

アニメーションを簡単に作成する:ラインアニメーション

ステップ8

ブラシ を使用したい場合は、ブラシモード をダブルクリックすると、レイヤーパネルが表示され、そこだけで ブラシ を使用できます。

新しい2つのパネルも作成されました:ブラシ描画。 ブラシ パネルでは、ブラシのサイズ、硬度などを設定できます。

そして 描画 パネルでは、描画方法を選択できます。最初はConstantに設定されていましたが、これをPaint Animateに変更します。

一筆ずつ描いてもう一回、そしてもう一回 - しかし、1本描いたペンで完了すると、それがなぜか消えます。

アニメーションを簡単に作る:ラインアニメーション

ステップ 9

別のタブに戻り、タイムラインをスクロールすると、すべてのラインが表示されて自動的に描かれていることがわかります。

アニメーションは簡単に:ラインアニメーション

ステップ 10

すべての変更されたプロパティにUUを押すと、多くの下位プロパティが表示されます。

それぞれのプロパティの始点と終点も表示されます。

さらに、各ラインの間隔、硬さ、さらに位置を変更することもできます - 描画が完了した後でも。

アニメーションが簡単に作成されました: スケッチアニメーション

続行する:ステップ 11~20

ステップ 11

全てを消去して概観を持つようにします。

新しいラインを引いて、レイヤービューでパスを表示します。これが保存されるものです。

描かれたラインが気に入らない場合、選択して新しく描いて上書きすることもできます。

アニメーションが簡単に作成できます:線画アニメーション

ステップ 12

同様に、テキストをトレースしたいので、これがアニメーションに最も速い方法です。

直径を少し小さくし、グラフィックタブレットでテキストをトレースして描き込みます。

アニメーションを簡単に作成する:線画アニメ

ステップ 13

全てのラインを描きました。タイムラインで再生すると、すべてが表示されるはずです。

Uを押すと、すべてのキーフレームが再度表示されます。

アニメーションを簡単に作成する:ラインアニメーション

ステップ 14

Üキーを押すと、マウスが重なっているウィンドウが最大化されます。この場合はタイムラインです。スペースを作成し、目立つ部分をより良く認識して、少し引き下げて全体の時間を調整します。

アニメーションを簡単に作成する:線画アニメ

ステップ 15

再生させてみましょう。

ちなみに: もしもCaps Lockキーを誤って押してしまった場合、After Effectsは更新されません。その際にはCaps Lockを解除してビューを更新してくださいというメッセージが表示されます。

再生を開始すると、After Effectsは全ての文字を同時に描画し始めます。しかし、前から順に描画していきたいので、調整が必要です。望んでいるようにするには、一つ一つのラインを手作業で時間設定する必要があります。それはかなり手間がかかります。もう少し早くしたいので、次の手順で正確に説明しますが、それまでは全てのラインを選択しておきます。

アニメーションを簡単に作る:線画アニメ

ステップ 16

そのため、キーフレームを順番に設定するスクリプトを使用します。

このスクリプトは自分で書いたものであり、フォルダScripts内にSequence strokesという名前で保存されています。After Effectsの"Sequenzebenen aus After Effects"という映画をご存知の方は、このスクリプトが何を行っているか大体想像できるでしょう。

Extend Scriptスクリプトを開き、実行します。

アニメーション簡単作成:線画アニメ

ステップ 17

今、キーフレームの階段ができ、テキストが段階的に描画されます。しかし、まだかなり遅いです。

これを速める必要があります。すべてを選択し、見つけた最後のキーフレームを取得し、Alt-キーを押しながら5秒間に縮めます。

その後、かなり速くなります。

アニメーションを簡単に作成:ラインアニメーション



最後のポイントを少し遅らせる必要がありますが、すぐにその調整に取り掛かります。

ステップ 18

オフセット値について少し説明したいと思います。これはキーフレームの遷移に影響します:

現時点で、遷移を見ると、次のキーフレームは常に前のキーフレームの終了地点から開始されます(a)。

もし前のものよりも2フレーム間隔を設けたい場合、オフセットに2を入力します。

もちろん、スクリプトを有効にする前にすべてのブラシを選択する必要があります。一括選択するにはCtrl+Aを使用します。

アニメーションが簡単に作れる:ラインアニメーション



フレームが重なるようにしたい場合は、オフセットに-2を設定します。その場合、実際のフレームよりも2つ前に戻ります。しかし、ここで早く設定した場合、意味がありません。私は2の値で満足しており、それを維持します。

ステップ19

絶対に変更したいのは、感嘆符のタイミングです。それを音楽により合わせたいです。

そのため、その音楽は構成に必要です。そのため、「Fig Leaf Rag」に移動してファイルをコピーします。

そして必要に応じて、Alt-クリックで再び構成に移動し、ここに貼り付けます。

アニメーションを簡単に作成:ラインアニメーション

ステップ20

今、必要な2つのポジションを見てみましょう。それにはテンキーを使用して、プレビューを作成するためにコンマ-キーを押します。そして、テンキーの*キーを押してマーカーを設定します。 テンキーのないデバイス、特にMacの場合、プレビューにはcmd+コンマ、マーカーにはcmd+8が必要です。

今、音楽を再生させ、感嘆符の線と点が入るべき場所にマーカーを正確に配置します(1)。つまり、メロディの2つの強勢のちょうどその場所に配置します。

したがって、2つのマーカーを設定しました:最初の場所では感嘆符の線が完成し、2番目の場所では点が置かれるべきです。

ヘルプラインを最初のマーカーに合わせ、"Typo_Static"の構成に移動します。そこで、感嘆符の線を示すフレームをヘルプラインに合わせます(2)。

2番目のマーカーでも同じことを行います。点の位置を示すマーカーにヘルプラインを合わせ、フレームを移動します。

アニメーションを簡単に作成する:線画アニメ

最後のステップ

ステップ21

感嘆符の線は、それよりも前のテキストを前よりもゆっくり描かせたいです。これにより、感嘆符が強調されるようになります(1)。

そして、テキスト全体が少し早めに終了するようにしたいです。そのため、それよりも前のすべてを選択し、わずかに前に引っ張ります(3)。

そのようにすると、タイミングが完璧になります。

アニメーションを簡単に作成する:ラインアニメーション

ステップ22

テキストを元のテキストの上に描き込み、それについてもう少し変更します。

まず、「Typo_Static」レイヤーを複製し、下のレイヤーからペイント-エフェクトを削除します。

アニメーションを簡単に作成する:ラインアニメーション

ステップ23

上のレイヤーには描かれたテキストがあり、その下に白いオリジナルがあります。

下のレイヤーには普通の白いテキストがあります。

上のレイヤーで透明に描くをチェックすると、描かれた赤い線だけが表示されます。

アニメーションは簡単です:描画アニメーション

ステップ24

上のレイヤーは下のレイヤーのマスクとして使用されます。

マスクが表示されない場合は、スイッチモードの有効化/無効化をクリックして、移動マスク BewMasが表示されるようにします。

そこで、アルファマスクを選択して、必要な結果を得ることができます。つまり、これらの線が描かれる場所には、元のテキストが表示されます。

アニメーションを簡単に作成する:線画アニメ



何かがずれているようですが、最初からAが表示されています。

ステップ25

ですので、下から上にかけてすべてのブラシを再度選択し(1)、しかし、感嘆符の2つのフレームをShift+選択して除外します(2)。これら2点は時間的に完璧に配置されています。

それから、最初のフレームを右に少し移動し、つまり、最初にAが見えないようにします。

これで合っています。

アニメーションを容易にする: ラフアニメーション

ステップ26

これはサブコンポジションで行われましたが、ここには湧き出す乱れエフェクトがあります。

このコンポジションで表示すると、黄色だけでなく色が変わり、さらに揺れるようになります。

アニメーションを簡単に作成する:ラインアニメーション

ステップ27

素晴らしい結果が出ましたが、色がその後に変わるようにしたい、またはまったく変わらないようにしたいです。したがって、一旦カラーを変更は抜けます。

アニメーションが簡単にできる:ラインアニメーション



これでトレーラーの最初の4秒が完成し、次回のチュートリアル、バウンシングボールでまたお会いしましょう。