「カッコいいエフェクトを作りたい」
AfterEffectsをはじめて少し慣れてきた時に僕が漠然と思ったことです。

図形などを用いたオシャレなモーショングラフィックスも素晴らしいですがアクションゲームなどで目にする攻撃が当たった時の派手なエフェクトでインパクトをつけたいと感じる人もいることでしょう。（お仕事柄そういう演出を求められることも多かったので・・・）

なので今回は僕が色々と試行錯誤の上、作ることができたカッコいいエフェクト（自称）の作り方をご紹介したいと思います。

まずは１つのエフェクトを作り、そこからさらに手を加えることで色んな表現に変えることができるので是非覚えてもらえれば幸いです。

操作がある程度できる人に向けた内容となりますので完全な初心者の方が見ると説明が分かりづらい所があるかもしれませんがご了承ください。

 

ではまずこちらから・・・

https://youtu.be/dTUM0JtEiRc

画面外からラインが中央に集まって波紋がボワンと広がる演出です。

 

ステップとしては・・・

１.画面外から現れるラインの作成

２.STEP１で作成したラインを複製

３.中央の波紋の作成

となります。

 

早速コンポジションの作成・・・

 

幅・高さ：1000px

フレームレート：29.97

デュレーション：2秒

基本的な設定はこのくらいで、デュレーションに関しては最終的に調整します。

 

STEP１「画面外から現れるラインの作成」

・平面レイヤーの作成

・「エフェクト」→「描画」→「レーザー」を作成した平面レイヤーに適用

・適用した「レーザー」のパラメーターを設定

開始点：x-250／y-250（画面外に設定）

終了点：x500／y500（画面中央に設定）

長さ：100％

時間設定：次の手順に記載

開始点の太さ：次の手順に記載

終了点の太さ：次の手順に記載

柔らかさ：1.0％

内側のカラー：FFFFFF

外側のカラー：FFFFFF

「3D遠近法」にはチェックを入れます。

・「時間設定」「開始点・終了点の太さ」の制御の設定

こちらは動きに関わる部分になり、後でレイヤーを複製する際にまとめて制御できるように少し手を加えます。

１.調整レイヤーを１つ作成

２.「エフェクト→エクスプレッション制御→スライダー制御」を3個適用（分かりやすいようにレーザーのパラメーターの名前に変えておきましょう）

３.パラメーターの紐づけを行う

画像のように渦巻のマークを引っ張ってレーザーのパラメーターを同じ名前にしたスライダー制御のパラメーターにそれぞれ紐づけしましょう。

こうすることで調整レイヤーに適用したスライダー制御で平面レイヤーに適用したレーザーの「時間設定」「開始点・終了点の太さ」のパラメーターが制御できるようになりました。

・キーフレームの打ち込み

外側から線が中央に流れていくアニメーションをするためのキーフレームを打っていきます。

全て調整レイヤーのスライダー制御の方のパラメーターを使って行います。

・5F目の所にキーフレームを以下の値で打つ

時間設定：0

開始点の太さ：250

終了点の太さ：10

・20F目の所にキーフレームを以下の値で打つ

時間設定：ここでは打たない

開始点の太さ：0

終了点の太さ：0

・25F目の所にキーフレームを以下の値で打つ

時間設定：100

開始点の太さ：打たない

終了点の太さ：打たない

この段階で再生するとすでにニュイーンとラインが中央に向かって流れる動きになっていると思います。

少し緩急をつける為に、打ち込んだキーフレームを全選択しイージーイーズをかけておきましょう。

これでラインのベースができました。

 

STEP２「STEP１で作成したラインを複製」

文字通り複製していきますが複製するのは平面レイヤーのみです。

ずっと放置していた平面レイヤーを選択し複製します。（5個くらい）

複製できたら各レイヤーの「レーザー」開始点の位置を被らないように変えます。

各レイヤーの開始点の位置をズラしてアニメーションさせると画像のように各方向から中央に向かってラインが流れてくるアニメーションになっているかと思います。

 

STEP３「中央の波紋の作成」

さぁこのチュートリアルもいよいよ最後のステップとなりました。

最後はモーショングラフィックスの基本的なものです。

・１つ目の円の作成

 

シェイプレイヤーを作成

コンテンツ→楕円形１→楕円形パス→サイズのサイズにアニメーション用の以下の場所にキーフレームを打っていく

9F目：w0／h0

14F目：w300／h300

25F目：w0／h0

25F目に打ったキーフレームにイージングをかけて１つ目の円のアニメーションは完成です。

 

・２つ目の円の作成

シェイプレイヤーを作成

先ほどとは違い「塗り」ではなく「線」の色をオンにして輪っかのシェイプにします。

コンテンツ→楕円形１→楕円形パス→サイズのサイズと線→線幅の線幅にアニメーション用の以下の場所にキーフレームを打っていく

9F目：サイズ[w0／h0]　線幅[打たない]

14F目：サイズ[打たない]　線幅[114]

20F目：サイズ[打たない]　線幅[打たない]

25F目：サイズ[w600／h600]　線幅[0]

25F目に打った線幅とサイズのキーフレームにイージングをかけて２つ目の円のアニメーションは完成です。

そしてこれで全ての工程が終わり完成です！

はじめの動画のようなエフェクトが出来上がったと思います。

さてこのままでも十分使えるエフェクトですが、ここからさらに加工を施してガラッと雰囲気を変えたいと思います。

こちら・・・

https://youtu.be/jbMittBtxpo

なんかモヤっと感が出てゲームのエフェクトっぽくなりましたよね？

これ、先ほど作ったエフェクトに調整レイヤーにエフェクトをいくつか適用して加工してるだけなんです！

ではさっそく加工していきましょう

 

作ったままのエフェクトは後で使用するので、コンポジションを複製して、複製した方を編集していきます。

調整レイヤーを一番上に作成、これに適用するエフェクトは・・・

タービュレントディスプレイス（エフェクト→ディストーションの中にあります）

ブラー（放射状）（エフェクト→ブラー＆シャープの中にあります）

ラフエッジ（エフェクト→スタイライズの中にあります）

※適用する順番は上から順です。

 

各エフェクトで変更するパラメーターは以下の通りです。

「タービュレントディスプレイス」

量：100

サイズ：100

複雑度：5

展開：時計マークをAlt̟＋クリックでエクスプレッションに「time*720」と記述しましょう。

「ブラー（放射状）」

量：100

種類：ズーム

「ラフエッジ」

エッジの種類：スパイキー

スケール：400

展開：時計マークをAlt̟＋クリックでエクスプレッションに「time*720」と記述しましょう。

再生してもらうと動画のようなエフェクトになってると思います。

こちらもこのままでも色々使い道はありますが、この加工をかけたものと加工をかける前のものを重ねるだけでさらにカッコよくなります。

（複製しといたのはこれのため・・・）

それがこちら・・・

https://youtu.be/Wc2o3pwh0r0

よりゲームのエフェクト感が増したかと思います。

トーンカーブなどを使用すれば色を自由に変えることも可能ですので色々試してみてくださいね。

このように作ったエフェクトもそれで完成ではなく重ねたり、なにか加工を少し加えるだけで劇的に変化させることができますので参考になれば幸いです。