カラーコンセプトに関して、青い背景と黄色のテキストで非常にシンプルかつシンプルにすることを考えていました。青と黄色は補色であり、非常に読みやすく、お互いに美しく際立っています。

理論的には新しい色面を作成し、青を付けて、その後テキストを黄色くすることができます。それは可能ですが、アニメーション中に画面全体に色を反転させるワイピングをどのように行うかという問題が発生します。

レイヤー>新規>調整レイヤーCtrl+Alt+Yを使って調整レイヤーを作成し、その後にチャンネル反転エフェクトを追加することを試してみることができます。しかし、我々の色が完全に補色でないことに気づきます。青の補色はオレンジであり、ここには適していません、色が合わないのです。

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


しかし、私はそれを絶対にしたいし、方法があります。


ステップ1

次のようにそれを構築します:王室青の色面を取り、Ctrl+Shift+Yを押すか、レイヤー>色面の設定を通じて色を黒に設定します。

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

それはその後きれいに変更され、After Effectsは色面の名前を変更してくれます。

"アニメーションを簡単に"と書かれたテキストを白色で書きます。

アニメーションを簡単に作成する方法: 色

私たちは透明度のない黒と白を持っており、それを簡単に反転させることができます。

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



しかし、私はそれが黒と白にとどまってしまうのですが、青と黄色にしたいのです。

ステップ2

ですから、Ctrl+Alt+Yで調整レイヤーを作成し("調整レイヤー 2")、効果>カラーコレクション>着色を適用します。

この効果は非常にシンプルで、単に色をマッピングしています。黒と白を取り、他の色値を割り当てます。

アニメーションを簡単にする:Die Farben

次に、ここで黒を取り、青と白を黄色に合わせます。私はすでに"008FF"という美しい青のカラーコードを書き留めています。

そして、白を取り、その黄を"Gelb"に合わせます。色の値は"FFF000"、本当に鮮やかな黄色です。

アニメーションが簡単に:色

ステップ3

これを反転レイヤーの後に適用しました。私はこれを"色変更"と"色付け"と呼ぶ予定です。

最上位レイヤーをロックしておいて、二度と触れないようにします。

アニメーションを簡単にする:色

"色変更"をオンにしたりオフにしたりすると、色の素晴らしい反転を得られ、オレンジ色や紫色に移行することなくすぐに変更できます。

アニメーションを簡単にする:色



しかし、トランジションをどのようにデザインしますか? "色変更"レイヤーを左から右にまたは上から下にスライドして、トランジションを作成できます。しかし、それはあまり面白くありません。

もう少し何かしたいと考えており、画面をストリップに分割し、これらのストリップを画面を掠めてエッジをより多く壊すようにします。どうやって最も良くやるか?

ステップ4

エフェクトにはエフェクト>トランジション効果;のようなものがあり、そこにはLine Sweepがありますが、次のものが開始される前にまず1つのラインが作成されます。

私にとって、これは不規則すぎません。

アニメーションを簡単に作る方法:Die Farben

ステップ5

そのため、マスクを使って最良の方法です。マスクシンボルをダブルクリックしてマスクを作成し、私の寸法に正確に一致するマスクを作成します。これは後で、まだ使用するであろう非常に便利な機能です。

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

ステップ6

このマスクを20ポイントに分割して、20の単独列を持つようにしたいのですが、標準のAfter Effectsツールではできません。

しかし、このような状況では、単にスクリプトを作成します。ここで使用するものについては、各チュートリアルに併せてスクリプトを添付しています。

ここでは、レイヤーチェイナー、マスクスライサー、およびシーケンスストローク。マスクスライサーが必要です。これらすべてのファイル名の前にあるシンボルは、Extendscript Toolkitに属していますが、それを起動できます。これを起動すると、Extendscript Toolkitも起動します。

このToolkitは標準でインストールされていないため、手動でインストールする必要があります。これはCreativeCloudを通じて簡単に行えます。

これらのスクリプトにはいくつかの設定が含まれています。これらのスクリプトにはユーザーインターフェイスがないので、自分用に作成されています。つまり、ここでのすべての設定はテキストファイルで直接変更する必要があります。

今回の場合、二つの値を変更できます:最終的に持ちたい「noOfSplices」という各個切り裂きの数。

そして、"separateLayers"にはtrueまたはfalseが入ります。 trueを選択すると、各スライスに新しいレイヤーが追加されます。

試しに4スライスでやってみましょう…

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

… After Effectsに移動して、スライスしたいマスクを選択します。これが非常に重要です。

それから、アプリケーションのターゲットでAfter Effects CCを選択します。他にもプログラムがあることに気づきますが、このツールキットはスクリプトを作成してテストするためのものです。

今回はAfter Effectsを選択し、その後、実行ボタンを押します。

アニメーションを簡単にする:色

… そして、After Effectsに戻ります。新しいレイヤーが表示されますが、それぞれは1つのレイヤーから成り立っています。

そして、ここで4色グラデーションを生成します。…

アニメーションは簡単に作られます:色

すると、すべてのスライスが行われた画像が表示されます。実際には座標を持つ1つのレイヤーですが、マスクがスライスされています。つまり、このレイヤーの個々のスライスができるため、個別に移動や回転ができます。

アニメーションが簡単になりました:色



しかし、今回はそれを必要としません。別のことをしたいです。

ステップ7

1つのレイヤーに20個のすべてのマスクを持ちたいです。そして、seperateLayersfalseに設定します。保存して、再度実行します。…

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

… そして、今、すべての20個のマスクが1つのレイヤーに表示されています。

1-20までのマスクを選択し、Ctrl+Ccmd+Cを押します。次に、元のマスクを削除し、すべて代わりに挿入します。

今、すべてが揃っており、次のステップでそれらをアニメーション化したいと思います。

アニメーションを簡単にする:  色

ステップ8

マスクには回転やスケーリングなどの変換プロパティがないため、マスクパスのみがあります。しかし、これは問題ではありません。

すべてのマスクを選択して展開し、マスクパスをクリックしてキーフレームを設定し、少し後に、コンポジションですべてのマスクを画面外に移動させます。

アニメを簡単に作成する:色

ステップ9

これを見てみましょう。バックグラウンドで音楽が流れており、うまく合っています。そして、2つの線形キーフレームがあり、それほど面白くありません。

私は少し面白くしたいと思い、線形キーフレームではなく、使用したくありません。なぜなら、ディズニーのルールで既に聞いたように、一定のスピードは現実の生活では起こらないので、アニメーションでもそれは必要ありません。

アニメーションを簡単にする:色

ステップ10

それにはグラフエディターをクリックします。そこで、後でバウンスボールで詳しく学習するであろう曲線を取得します。

マスクパスにそれを制限するために、すべてのマスクを選択し、Uを押します。これにより、すべてのアニメーション化されたプロパティを取得します。

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

ここで、速度グラフ、スピードグラフが表示されます。値グラフほど使いやすくはありませんが、まだうまく動作します。多くのプロパティを同時にアニメーション化したい場合に役立ちます。

構造を少し整えるために、まずイージーイーズを適用したいと思います。それにはF9を押すか、このボタンを押します。

すると、グラフが大きく変化します。左側は一定速度ですが、私たちは速度がゼロから徐々に上昇し、再び下降します。

イージーイーズでは、速度がゼロから徐々に上昇し、再び下降します。これはパラボラの形になります。

アニメーションが簡単に作成されました:色

これをさらに極端にしたいです。そのために、接線を取り、中央にピークを作ります。

こんな感じ、どう見えるでしょうか…

アニメーションが簡単になりました: 色



再生してみて、思う通りです。中央部分でかなり速い動きをしており、始めや終わりよりも速いです。気に入りました。

ステップ11

私たちはポジションを使用して同じことができましたが、なぜスライスを作ったのでしょうか?

これを時系列的に美しく移動させ、キーフレームをランダムに配置して、リーヴェルの形にも多少の変化を加えるようにします。線は一斉には移動しないようにします。

最終的には、スカイラインのように見えます。通常、画像を分割するであろう1本の線を切り裂きます。これは片側だけにすることも、前だけにすることも、後ろだけにすることもです。同じ高さに終わることを避けるようにします。

素敵ですね。

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

そして、プレビューを有効にすると - これはかっこいいです。素晴らしいです。

アニメーションを簡単にする:色

ステップ12

そして、このレイヤーは今取り組んでいるもので、回転、スケーリング、移動、そしてもちろん繰り返し使用することができます。なぜなら、これは単なる反転効果だからです。

私たちはこれを複製し、時間軸を移動し、イエローからブルー、ブルーからイエローに切り替えます。

アニメーションを簡単に作成する方法:色



ただし、この場合、最初に現れてから消えるようになっています。これを反転させる必要があります。私は最初にレイヤーがない状態から始め、その前レイヤーが自動的にスライドするようにしたいのです。

ですので、複製したレイヤーを再度削除し、"Change Colors" レイヤーをアクティブにします。そして、全てのキーフレームを選択するために四角形を描画します。

右クリックすると、Keyframe-Assistenten を選択し、一番下にある Keyframe Reihenfolge umkehren をクリックします。

アニメーションを簡単にする: 色

これを押し、今は黄色が下から青に移動するようになりました。

そして、もし再度レイヤーを複製し、それを少し後ろに移動させた場合、うまくいくはずです。

私たちは今、一つの色から別の色へと移行し、そして再度戻ることができます。完璧です。

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



この部分はうまくいっています。次回のチュートリアルシリーズの次の部分では、テキストに取り組みます。