AfterEffectsでUIコンポーネントを作った話

例えば、名前紹介のモーショングラフィックスを組む場合。コンポジションを大量に複製し、それぞれテキスト内容だけを替え、挙げ句構造自体に修正が必要になって途方に暮れたことのあるAfterEffectsユーザーは多いのではないだろうか。カラーバリエーション、画像差し替えなどでも同様。自分は日常茶飯事だった。

解決策は表題の通り、エッセンシャルプロパティ（以下EPと省略）を使うこと。「MOONSITE」という自主制作を通し、これに関する知見が溜まったので整理しておこうと思ったのが今回の趣旨だ。

作例にもあります。

例えばこの「ボタン」コンポは、テキスト・幅と高さ・基準点・ボタンの色をパラメータとして外部から指定できる仕組み、いわば1つのコンポーネントとなっている。フォントや線幅はまとめて変更可能だ。機能の使用例としては大変ニッチだが、その過程の汎用性は高い。

なお、「MOONSITE」の文脈的な話をはじめ、ボタンの屈折表現、音楽の話等はこちらの記事にまとめた。是非合わせてご覧いただきたい。

また、この記事は一部有料となっているが、末尾に具体例のAEPファイルへのリンクと簡単なメッセージがあるだけだ。本旨は全て無料で伝わるので、答え合わせのような感覚で購入することをおすすめする。

パラメータを外部に出す

まずはEP自体の説明から。長い名前だが、要はコンポを跨いだプロパティの上書きだ。プログラミングにおけるオーバーライドの考え方、といって伝わる方にはそれが手っ取り早い。

比較的最近のバージョンから入った機能だし、かくいう自分も本腰を入れて使用したのは今回が初めてだった。すでに使用経験のある方は次項まで読み飛ばしてくれて構わない。

ある「コンポA」内のいずれかのプロパティを右クリックし、「エッセンシャルグラフィックスに追加」を選択。平面の座標、エフェクトの色、テキストのソーステキストなど何でも良い。これで外部から操作するプロパティを登録することが可能になる。

とっつきづらいのが次の過程で、選択したプロパティをどのコンポに紐づけるかを問われる。が、これは基本的にその編集している「コンポA」自体を指定すれば問題ない。もっと大掛かりなテンプレートのようなものを作る場合、入れ子の大元のコンポに全てのプロパティを紐づけるような使い方が考えられるが、今回はそこまで話を広げない。

この工程が終わると、別の「コンポB」内にコンポAを置いたとき、タイムライン上でコンポAのプロパティを展開するとEPが表れる。パラメータを変更することでコンポBにいながらコンポAの内容を操作できるはずだ。キーフレームも打てる。もちろんオリジナルに変化はない。

この記事にたどり着いたAEユーザーの需要は、この時点で概ね満たせたはずだ。どうせだから次以降も読んでいって欲しい。

エクスプレッションを組み合わせる

EPによる変更は、エクスプレッションより手前に処理される。これが何を意味するかというと、1つのEPでコンポ内の複数のプロパティを制御できるということだ。例えば、複数のエフェクトやシェイプの色をエクスプレッションで集約し、EPによってカラバリを管理することができる。

エクスプレッションの具体的な操作方法については過去の講義を参考にしていただきたい。「パラメータを参照して常に同じ値にする」「マイナスを掛けて2で割る」程度の操作ができれば十分。if文が分かればマスタークラスだ。

エクスプレッション以外にも、親子関係やエフェクト間の参照もEPの後で処理される。オブジェクトのレイアウトがEPによって変わったり、条件式によって分岐をかけるような仕掛けを作ったりと、処理順を意識するとEPの応用性は飛躍的に高まる。

作例紹介

具体的な作例をシンプルなものから順に紹介していく。どれも実際に「MOONSITE」に使用したものだ。

テキスト入力

テキストボックス。テキストの位置を枠の幅から計算するだけのシンプルな仕組みだが、これだけですら集約できるのは価値がある。なおソーステキストのパラメータはキーフレームを打ってキーをダブルクリックすると値を変更できる模様。

汎用ボタン

幅と高さに加え、チェックボックス制御による分岐をかけてアンカーを擬似的に固定できるような仕組みを搭載。跳ねるような動きも制御しやすくした。いずれの場合もテキストは常に中央に配置されるよう計算。

トグルスイッチ

赤くなってるのはサンプルとしてループさせてるだけです

ON/OFFをチェックボックス制御にしたほうがカッコイイ気もしたが、結局X座標を動かす形に。内部でシルエットアルファモードを使っているのでコラップスする際は注意が必要。

プログレスバー

枠とプログレスバーの幅からパーセンテージを表示。左端固定のオプション付き。はみ出し処理済みだが数値は無視される。実際のコンポーネントとしてはパーセンテージを指定して幅を算出するべきだが、「枠が伸びる」表現をしたかったため上述のような構造になった。

アイコンボタン

円の大きさ、塗りの色、アイコンを独立して指定できる。アイコンのシェイプのみをまとめたコンポを用意し、それをタイムリマップを介してindexを呼び出す構造。

テキストウィンドウ

難産だったテキストエリアのウィンドウ。ウィンドウの幅と高さ、および文章をパラメータとして入力。はみ出し処理にも対応している。

テキストの処理については上記を参考にした。テキストエリアの幅はエクスプレッションから操作できないため、レイヤー自体のスケールとフォントサイズを相殺させるというハックじみた構造にする必要がある。

警告ウィンドウ

上から、ウィンドウ幅と高さ、警告文、タイトル、ボタンのX座標と幅。クローズボックスや仕切り線はウィンドウに追随する。ここまでの総まとめようなコンポ。ここまで来ると、実際のUI設計の苦労が想像できる。

AEP置いておきます

冒頭の通り大変ニッチな例だが、EPの汎用性・応用性を少しでも伝え、制作の役に立つことができれば幸いだ。

前項7つの作例を並べたAEPファイルのリンクを置いておくので、興味が湧いた方は下記からDLしてみて頂きたい。

必要要件

• 日本語環境のAfterEffects 2020 (17.x) 以降

• フォント「新丸ゴ」（ない場合は代替されます）

なお、商用利用など特に制限はしないが、再配布は禁止とする。詳しくは同梱のテキストを読んでいただきたい。