文字と描画

【シェイプ・文字】カッコいいサイバーなアニメーションフレームの作り方!

超解読AE! |サイバーなアニメーションフレームの作り方
SF映画やアニメなどに出てくるようなロボットの視点みたいなサイバーなフレームを作ってみたいのですが、どうやって作ればいいのでしょうか?
A子さん
E太郎
AEならシェイプやエフェクトなど色々組み合わせることでとっても簡単に・かっこよくサイバーなフレームを作ることが出来ますよ。一緒に作り方をチェックしていきましょう!

シェイプはこちらの記事を読んでおくと理解が深まります!

超解読AE! | 文字とシェイプ、モーショングラフィックスの基礎
【シェイプ・ペンツール】直線・曲線の描き方。パスの調整方法もこれを読めば完ぺき!

続きを見る

サイバーなアニメーションフレームのイメージ

サイバーなアニメーションフレームの作り方

SF映画やアニメのハッキングシーンなどデジタルっぽいアニメーションフレームはよく見かけますが、近未来感があってかっこいいですよね。

こちらのサンプルで作ったものはひとつひとつのパーツはごく簡単に作られたものなのですが、組み合わせることで結構雰囲気が出ていますよね。

今回はこちらのサイバーなアニメーションフレームの作り方を各パーツごとに解説していきます。組み合わせを変えたり、アレンジをすることでオリジナリティも出せるので、是非応用してカッコいいフレームを作ってみてくださいね!

サイバーなアニメーションフレームの作り方

作り方の手順

サイバーのアニメーションフレームを作るには4つの手順をたどります。

  1. フレームの具材を作る
  2. 具材を配置したコンポジションを作る
  3. さらに処理を加える
  4. 最終調整をする

発光感やノイズのブレは具材をすべて配置してからまとめて処理を加えますので、具材を作る段階では何も考えなくてOKです。

E太郎
さっそく詳しく見ていきましょう!

(手順1/4)フレームの具材を作る

組み合わせで出来ている

フレームはいくつかの具材を組み合わせて作っています。

一つ一つを別々のコンポジションで作っておけば、後から自由に配置しなおせるので汎用性もあっておすすめです。

E太郎
さらに、具材をループするように作っておけば長さも好きにアレンジできるので使いやすいですよ。

ぐるぐる回る円

グルグル回る円

グルグルと回転する円のパーツを作ります。

シェイプで円を作り、線の太さを太めに設定しておきましょう。

レイヤーを複製して2つ重ねます。

  • 上の円:クルクル回る用の円
  • 下の円:薄っすら見えているベースの円(不透明度を下げて薄くしておきましょう)

パスのオフセットで回す

上の円をくるくる回します。

シェイプの「追加」で「パスのトリミング」を追加します。

「開始点」か「終了点」の数値を上げて円を一部だけ切り取りましょう。

「オフセット」をアニメーションさせればクルクルと回るようになります。

エクスプレッションで

time*360

を入れて制御すると楽です。(数字はお好みで調整してください)


エコーをかけて尾を引かせる

時間エフェクトの「エコー」を適用すると尾を引くようになります。

E太郎
お好みでシェイプの「線端」を丸くするのもオススメです!

エクスプレッション制御についてはこちらの記事を参考に!

超解読AE! |エクスプレッションの使い方
【エクスプレッション】基本だけ覚えればOK!動きの自動制御の仕方。

続きを見る

番号エフェクトでランダムに表示させる

真ん中に配置しているランダムに表示される数字はテキストエフェクトの「番号」を使っています。

平面レイヤーに「番号」を適用して設定をしていきましょう。

基本的には乱数値にチェックを入れて小数点を0にしているだけです。

「値/オフセット/最大」に数字を入れるとその数値以下の数字がランダムで表示されます。

フォントは最初に出てくる設定ウィンドウかエフェクトコントロールパネルの「オプション」から変更できます。

カクカクしたデジタルっぽい数字にするとよりサイバーっぽい印象になります。

番号エフェクトのより詳しい使い方はこちらの記事を参考に!

超解読AE! |番号・タイムコードの使い方
【テキスト】番号・タイムコードの使い方。チェックムービーなどに活用しよう。

続きを見る

光が流れるライン

ラインに沿って走る光を作る

光が流れるラインを作ります。

平面にマスクを作り、そのパス上を光が流れるように設定したあとパスからシェイプでレールになるラインを作ります。

  • 平面にマスクで光が通るラインを作る
  • マスクのパスからシェイプでレールになるラインを作る

平面にマスクを作る

まずは平面に光の通る道をペンツールで描きます。

どんなラインでもOKですが、カクカクしている方がデジタルっぽく見える気がします。

パスは最初と最後が繋がるようにしましょう。


ベガスをかける

マスクを作った平面に描画エフェクトの「ベガス」を適用します。

「線」をマスク/パスに変更して、「マスク/パス」のパスを先ほど作ったマスクに指定します。

  • 線分数を1にして、長さをお好みで調整しましょう。
  • 「レンダリング」の項目内の開始点・中間点・終了点の不透明度をすべて1にするのがおすすめです。
  • 「幹の幅」でお好みの太さに調整しましょう。
  • 「レンダリング」の描画モードは「透明」にしておきましょう。

「線分数」の項目内の「回転」にアニメーションをつけるとマスクパス上を光が走るようになります。

こちらもエクスプレッション time*360 で制御するのが楽でおすすめです。


マスクからシェイプを作る

次にシェイプでレールになるラインを作ります。

メニューのレイヤー > 新規 > シェイプレイヤー でシェイプレイヤーを作ります。

「追加」から「パス」を選んだあと、先ほど平面に作ったマスクのパスをコピーして、こちらのシェイプレイヤーのパスにペーストします。

「線」の色を指定してあげればラインの完成です。

あまり目立たせたくないので線幅は細めにしておくといいかと思います。

網目状の球体

網目状の球体

網目状の回る球体を作ります。

平面レイヤーに描画エフェクトの「グリッド」を適用します。


グリッドを球体にする

遠近エフェクトの「CC Sphere」を適用すると形は完成です。

【Rotation】にアニメーションをつけると球が回転します。

こちらもエクスプレッションで制御すると楽です。

time*〇

〇にはお好みで数値を入れましょう。20くらいでゆったり目に回すのがおすすめです。

ランダムで表示される座標

ランダムに表示される座標

ランダムで表示される座標をつくります。

X,Y,Zの表示は固定したいので、数字とは別のテキストレイヤーで用意します。

  • X,Y,Zの表示テキスト
  • ランダムな座標表示テキスト

2つを作ります。

X,Y,Zは普通に入力したものです。


ランダム表示されるように設定する

テキストレイヤーを複製し、横にずらして数字に書き換えます。

3桁の数字を適当に入力します。

「アニメーター」で「文字のオフセット」を適用し、エクスプレッションを入力します。

wiggle(3,100)

数字はお好みでOKです。これで数字がランダムに表示されるようになります。

ランダムな文字については「マトリックス・コードの作り方」記事でも解説しています!

超解読AE! |マトリックス・コードの作り方
【マトリックス・コード】文字の雨の作り方・標準エフェクトでOK!

続きを見る

さまようターゲット

動くターゲット

ランダムにさまようターゲットを作ります。

  • 十字をランダムに動かす
  • ターゲーットマークを十字に追従させる

グリッドを設定する

平面に描画エフェクトの「グリッド」を適用します。

「グリッドサイズ」を「幅スライダー」にして幅の数値をかなり大きくして十字になるように設定します。

「アンカー」にエクスプレッションを入れます。

wiggle(1,250)

数値はお好みで調整しましょう。これでランダムに動き回るようになります。


アンカーポイントを設定する

ターゲットマークを追従させます。

こちらで使用しているターゲットマークはICOOON MONOさんよりお借りしたものですが、シェイプで作ったり、他のマークでも何でもOKです。アンカーポイントだけマークの中央になるように設定しておきましょう。

アンカーポイントについてはこちらの記事を参考に

超解読AE! |アンカーポイントと位置の使い分け。基点をマスター
【アンカーポイント】「基点」を理解したら、アニメーションに強くなれる!

続きを見る

アンカーに位置をリンクさせる

ターゲットマークの「位置」を先ほど作ったグリッドの「アンカー」にリンクさせます。

これだけでグリッドに追従するようになります。

リンクのさせ方は親子付けの記事を参考に

超解読AE! | 親子付けって知ってる?ヌルも使いこなせばアニメーションマスターになれるかも
【親子付け・ヌルの基本】別のレイヤーの動きを真似させる方法

続きを見る

怪しい文字が流れるフレーム

ランダムに流れる文字

怪しい文字が流れるフレームを作ります。

文字はコンポジションの高さいっぱいに適当に入力します。

「アニメーター」で「文字のオフセット」を適用し、エクスプレッションを入力します。

(先程の「ランダムで表示される座標」と同じ手順です。)

wiggle(3,100)

数字はお好みでOKです。まずはこれで文字がランダムで表示されるようになります。


自動でスクロールさせる

文字を上へスクロールさせたいので、エフェクト&プリセットパネルの「アニメーションプリセット」からBehaviors > 自動スクロール(垂直方向)を適用します。

自動で垂直にスクロールするようになるので、速度を調整しましょう。

自動スクロール(垂直方向)の「速度(ピクセル/秒)」で数値を調整すると速さを調整できます。


トラックマットで範囲を設定する

次にフレームを作ります。シェイプで文字の表示範囲を作りましょう。

文字の範囲を作ったらシェイプを複製して

  • 片方は塗りもつけて文字のトラックマット
  • 片方は線だけにしてフレーム

にします。

トラックマットについてはこちらの記事を参考に

超解読AE! | トラックマットで切り抜き!はめ込み画像もこれで簡単。
【トラックマット】画像のはめ込みはAEなら4つのモードで簡単。

続きを見る

フレームはアレンジできる

サンプルではフレームの方は「追加」でパスのオフセットを使って二十線にしてみましたが

丸い装飾をつけて回路っぽくしたり、自由にアレンジしてみましょう。

せわしなく動くメーター

動くメーターを作る

せわしなく動くメーターを作ります。

  • シェイプで線だけの枠
  • 中身の動く部分

を作ります。


別々のレイヤーになるように作る

長方形ツールで枠を作ったら中に動かす用の長方形を作ります。

エフェクトをつけるので別々のシェイプレイヤーになるようにしましょう。


ワイプを設定する

トランジションエフェクトの「リニアワイプ」を適用します。

ワイプ角度を調整して、「変換終了」にエクスプレッションを入れます。

こちらのサンプルでは

wiggle(10,70)

を入れていますが、お好みで調整しましょう。任意の位置で止めたりしたい時は手動でアニメーションを入れましょう。

味付け:アイコン類

アイコンなどを配置する

アイコンやマークなどを配置して不透明度を明滅させたりするとより「それっぽく」なります。

最終的に発光させるのでそのままロゴを置いたり、メーター類に適当なテキストを配置するだけでも結構かっこよく見えます。

(手順2/4)具材を配置したコンポジションを作る

配置をして具材をプリコンポーズする

実際に動画に重ねてレイアウトを作りましょう。

レイアウトが出来たら「具材全て」を選択してプリコンポーズしましょう。

プリコンポーズについてはこちらの記事を参考に

超解読AE! |プリコンポーズのやり方
【プリコンポーズ】レイヤーをまとめてコンポジションを作る方法【レイヤースッキリ】

続きを見る

プリコンポーズすれば色変えも簡単

プリコンポーズすると「塗り」や「色相/彩度」エフェクトなどを使ってまとめて色変更できます。

お好みで調整しましょう。

(手順3/4)さらに処理を加える

発光の設定

プリコンポーズ後「発光感」を追加します。

描画モードを「加算」(もしくは「スクリーン」でもOK)にします。

コンポジションを複製して、上のレイヤーに「ブラー(ガウス)」をかけてぼかします。


光る処理を追加

これで発光感が追加できました。

お好みでブラーを掛けた方のレイヤーに「色相/彩度」エフェクトを掛けて少し黄色っぽくしたり、青っぽくしたり、色味を変えるときれいに見えることがあります。

E太郎
「グロー」エフェクトでもいいのですが、色によってはあまりきれいに光らないことがあるのでこちらのやり方がおすすめです。

(手順4/4)最終調整をする

ノイズ追加

お好みでさらに処理を追加します。

デジタルノイズっぽいブレを入れると雰囲気が増します。

フラクタルノイズとディスプレイスメントマップを使用しています。

やり方はこちらの記事を参考に

超解読AE! |フラクタルノイズの作り方
【フラクタルノイズ】ザーザー・もやもや・集中線、何でも出来るエフェクト!

続きを見る

ボーダー追加

先程「ブラーをかけなかった方のレイヤー」にトランジションエフェクトの「ブラインド」を少しだけ適用するとホログラムっぽく見えます。

横向きに細くボーダーが入るように設定しましょう。

こちらのサンプルでは

  • 「変換終了」が15%
  • 「方向」を90°
  • 「幅」を8
  • 「境界のぼかし」を1

にしています。


サイバーなアニメーションフレームの作り方

お好みで先程「ブラーをかけなかった方のレイヤー」を複製して「塗り」エフェクトなどでピンクにします。

「位置」をほんの少しずらして配置すると「色収差」のような処理が追加されてかっこよく発光します。

E太郎
グラデーションを入れたりしてもいいかもしれませんね!是非いろいろアレンジしてみてください!

まとめ:オリジナルのフレームを作ってみて!

具材の作り方のアイディアは覚えたので色々組み合わせて作ってみたいと思います!
A子さん
E太郎
今回は緑色で作りましたが、色を変えるだけでも結構雰囲気が変わって面白いですよ!是非オリジナルのサイバーフレームを作ってみてくださいね。

シェイプについてもっと学習する!

超解読AE! |シェイプレイヤーの追加機能紹介
【シェイプレイヤー】「追加」機能10個を解説!大量複製もすぐに完結。

続きを見る

-文字と描画
-, , ,