【After Effects】ヌルオブジェクトで座標連動

【After Effects】 エクスプレッションで 座標連動

Adobe After Effectsのエクスプレッションを調べてみると、座標連動が入門としてわかりやすいように感じました。ヌルオブジェクトを基準に2つの素材を連動させる手順を共有したいと思います。

After Effectsを勉強していく中で「エクスプレッション」というモノがあることを知りました。配置した素材(レイヤー)のプロパティ内で簡易なプログラムを作れる機能だそうです。ただ、手にした書籍の中ではエクスプレッションについてAdobe公式のサンプルが紹介されているだけだったので、サンプル以外への応用がいまいちわかりませんでした。

そんな中「ある素材を基準に別の素材を相対的に配置したい」という場面がありました。

調べてみると、エクスプレッションを使えば素材の位置情報を簡単に連携できるようです。また、エクスプレッションの応用の入り口としては良さそうな規模だと思いました。

今回は調べた情報をまとめながら「ヌルオブジェクトを基準に複数の素材を連動させる」ことを目指して、手順をまとめたいと思います。

【?】やりたいことの詳細

今回やりたいことをもう少し具体的にしていきましょう。

現在動画制作の題材としてゲームの画面を使用しています。はじめはテロップを出す様にしていたのですが、作業量を見直し、代わりにアイコンと記号を出す様にしています。
(経緯については「実況動画での強調表現について見直します」をご参照ください)

アイコンと記号の例
アイコンと記号の例

ゲーム画面へのアイコンや記号の配置は、ゲームのUIとの位置関係もあり毎回微調整が必要になります。1つのタイトルを作って終わりであれば関係ないのですが、複数のタイトルで使うことを考えるとアイコンを移動するたびに記号の位置を再調整するのは面倒です。(動画内で使いたい記号も1つではないですからね)

そこで、画面上に「配置の基準点」を作り、基準点に連動するようにアイコンと記号を配置していきます。こうすれば、基準点を移動するだけでアイコンも記号も移動します。

今回は「配置の基準点」を「ヌルオブジェクト」でつくりたいと思います。

配置素材

練習用の素材は普段も利用させてもらっている「icooon mono」から借りたいと思います。

素材をダウンロードする前に「color」を「白」に設定しておくとわかりやすいと思います。(After Effectの背景色が黒に設定されているため)

【?】ヌルオブジェクト?

ヌルオブジェクトは「動画の見た目に影響しない透明な素材」です。

単純に配置するだけでは何の意味もありませんが、今回のように「基準点が欲しい場合」は見た目に影響しない点がとても便利です。

応用として「声に合わせてアイコンの大きさを変える」ことを試しています。

こんなやつ

使い方がわかってくると、活用の幅が広い素材ですね。

【〇】 ヌルオブジェクトを配置する

今回は「1920px * 1080px」のHD画面設定でつくっていきたいと思います。画面設定をしてヌルオブジェクトを配置します。

コンポジション設定

編集画面ではヌルオブジェクトに赤い枠がついています。この枠は実際の動画画面では表示されません。(編集時も完全に透明だとわかりにくいですからね)

次にヌルオブジェクトのアンカーポイントを調整します。
基準点は移動や変形の基準になります。初期状態ではヌルオブジェクトは100px * 100pxの平面で、基準点はオブジェクトの左上(0px , 0px)の位置にあります。

このまま進められないこともないですが、他の素材の基準点は基本素材の上下左右中央に配置されています。合わせたほうがわかりやすいので、ヌルオブジェクトの基準点を(50px , 50px)に調整します。

ヌルオブジェクトを配置

【〇】素材を読み込む

アイコンと記号を読み込んで、タイムラインに配置しましょう。
アイコンと記号はエクスプレッションでヌルオブジェクトの座標と連動させるので、この段階での配置位置は適当でよいです。(ヌルオブジェクトの近くにでも置いておいてください)

素材の読み込み

【〇】基準点に重なるように連動してみよう

アイコンをヌルオブジェクトに重なるように関連付けてみましょう。これが最も簡単な連携です。

アイコンを連動

ピックウィップで紐づけるだけなので簡単ですね。

エクスプレッションは見慣れないと難しそうに映りますが、エクスプレッションに追加された内容をよく見ると「transform(トランスフォーム)」内の「position(位置)」情報が紐づいていることが、なんとなくわかると思います。

【〇】少し上にずらして配置してみよう

アイコンは基準点を重ねるので簡単でしたが、アイコンの配置位置は少し上にしたいと思います。

基準点を重ねるまではアイコンと同じですが、その前に「どのくらいずらせばよいか?」を検討しておきましょう。

とりあえず、アイコンの上に記号を手で移動してみます。このあたりでしょうか?

記号位置の検討

上下の位置はY座標を確認します。アイコンと記号それぞれのY座標の数値を確認してください。上に配置した記号の数値が小さくなっていると思います。加えて、Y座標の差も出しておきます。(動画ではだいたい「300px」です)

さて、記号の配置はXY座標それぞれを調整したいので、その準備をしましょう。
記号の「位置」を右クリックし、「次元に分割」をクリックします。これでXY座標が分かれます。

座標の分離(次元の分割)

次に記号もアイコンと同じようにピックウィップで基準点が重なるように連携させます。ただ、今回は「次元に分割」を行っているので、記号の「X位置」をヌルオブジェクトの「位置の左の値」。記号の「Y位置」をヌルオブジェクトの「位置の右の値」に紐づけます。

上に配置したときはY座標の値は小さくなったので、基準点から先ほどの差分数値がマイナスされるように、記号のエクスプレッションを修正します。

Y座標の調整

記号が上にずれました。

今回は「基準点を動かすと他の素材も連動する」様にしたかったので、最後にここも確認しましょう。

ヌルオブジェクトを移動させると、アイコンと記号が連動することがわかります。

【◎】まとめ

エクスプレッションを使うと、コンポジション内で素材を連携させることができることがわかりました。

座標の連携は有用しやすい内容だと思いますので、ぜひ試してみてください。

投稿者: 0.1

厚塗りで「存在感や重さ、質感による説得力」のあるイラストを目指しています。 日本では線画をベースとしたイラストが主流ですが、そこから外れたモノもイラストの世界を広げる為に必要だと考えています。「世界観にもう一味試したい」そんなときには、ぜひお声がけください。

COMMENT