テロップの文字を変えるたびに、背景の長方形を描き直していませんか。sourceRectAtTime() を使うと、文字の幅や高さを読み取り、背景の大きさを自動で合わせられます。
今回は、短い文字から長い文字へ変えても余白を保つ背景を制作。名前が変わるテロップ帯と、複数行の文章を囲むボックスへ展開します。文面を直しても、背景を手で調整する作業が減るのが、このエクスプレッションの利点です。
この記事で使用したAEプロジェクトを無料ダウンロードできます。ダウンロードは記事の最後から。
まずは完成形：文字を変えると、背景も変わる
背景のサイズと位置には、キーフレームを打っていません。動画では違いを見せるため、ソーステキストだけを0・2・4秒のホールドキーで切り替えています。通常のテロップとして使うときは、文字を1つ入力するだけで構いません。滑らかに伸びるアニメーションを追加する式ではなく、文字の変更へその時点で追従する仕組みです。
sourceRectAtTime()で分かること
sourceRectAtTime(time, false) は、その時刻のレイヤー内の範囲を取得します。今回使うのは、次の4つです。
| 取得する値 | 意味 | 今回の使い方 |
|---|---|---|
| width | 文字の範囲の幅 | 左右の余白を足して背景の幅にする |
| height | 文字の範囲の高さ | 上下の余白を足して背景の高さにする |
| left | 範囲の左端の座標 | 背景の中心Xを求める |
| top | 範囲の上端の座標 | 背景の中心Yを求める |
幅と高さだけでなく、leftとtopも使うのがポイントです。テキストは基準点と文字の中心が一致するとは限りません。背景のサイズだけ合わせても位置がずれる場合があるため、背景の中心も同時に計算します。
コピー用コード：背景のサイズと位置
今回は背景シェイプレイヤーの親を、対象テキストにする構成です。コード中の parent は、その親テキストを表します。先に後述の親子付けと初期値を揃えてから、背景の「長方形パス」へ式を入れてください。
長方形パスの「サイズ」へ貼り付けるコード
var r = parent.sourceRectAtTime(time, false);
var padX = 24;
var padY = 16;
[r.width + padX * 2, r.height + padY * 2];padX は左右それぞれの余白、padY は上下それぞれの余白です。左右24pxなら幅へ足すのは合計48px。テキストの寸法はレイヤー内の値なので、今回の作例ではスケール100%で余白を確認します。
同じ長方形パスの「位置」へ貼り付けるコード
var r = parent.sourceRectAtTime(time, false);
[r.left + r.width / 2, r.top + r.height / 2];こちらは文字の範囲の中心を求めます。背景レイヤー全体の「位置」ではなく、「長方形パス」の「位置」へ入れる点に注意してください。
基本の作り方：親子付けと初期値を揃える
| 項目 | 今回の条件 |
|---|---|
| 制作環境 | After Effects 26.5（26.5×89）／macOS／JavaScriptエクスプレッションエンジン |
| コンポジション | 1280×720／30fps／6秒／8bpc |
| テキスト | クリックして作るポイントテキスト。3Dオフ |
| 背景 | シェイプレイヤー内の長方形パスと塗り。線なし、角丸0 |
| フォント | Hiragino Sans W6／Arial Bold。追加プラグイン・外部素材なし |
- 文字ツールで画面をクリックし、ポイントテキストを作ります。まずは白文字で「PAS」、文字サイズ60pxを入力します。ドラッグして段落ボックスを作る方法ではありません。
- 「レイヤー」→「新規」→「シェイプレイヤー」で空の背景レイヤーを作ります。
- シェイプの「追加」からグループを作り、名前をBOXにします。その中へ「長方形」と「塗り」を追加します。
- 背景をテキストより下へ置きます。背景の「親とリンク」を対象テキストへ設定します。
- 親子付けした後、背景レイヤー全体のトランスフォームを、アンカーポイント［0, 0］・位置［0, 0］・スケール100%・回転0度に揃えます。
- BOXグループのトランスフォームも、アンカーポイント［0, 0］・位置［0, 0］・スケール100%・回転0度にします。
- 「コンテンツ」→「BOX」→「長方形パス」の「サイズ」のストップウォッチをOption／Alt＋クリックし、サイズ用コードを貼り付けます。
- 同じ長方形パスの「位置」へ、位置用コードを貼り付けます。角丸は0にします。
- テキストを長い文面へ書き換えて、背景のサイズと中心位置が追従することを確かめます。
長方形ツールで直接描いたシェイプを使う場合は、グループの位置などが初期値からずれていることがあります。最初は上の手順で空のシェイプレイヤーから作ると、座標を揃えやすくなります。
この構成なら、テキストの位置を変えたときも背景が一緒に移動します。テキストを拡大縮小すれば背景も親の変形を受けるため、余白も一緒に拡大縮小されます。画面上で常に24pxの余白を保つ仕組みではありません。
余白を変える：padXだけを調整する
| 設定 | 見え方 | 調整する行 |
|---|---|---|
| padX = 8 | 文字に近いコンパクトな帯 | var padX = 8; |
| padX = 24 | 基本の余白 | var padX = 24; |
| padX = 48 | 左右に広く余白を取る | var padX = 48; |
| padY | 上下の余白を変える | 基本はvar padY = 16; |
文字数を数えて背景幅を決める方法と違い、実際の幅を読み取ります。たとえば同じ文字数でも「WWW」と「iii」は幅が違うため、固定の「文字数×サイズ」では揃わないケースにも使えます。
実践1：名前が変わっても整うテロップ帯
| 設定 | 値 |
|---|---|
| コンポジション | 02_SPEAKER_NAME |
| 対象テキスト | NAME／Hiragino Sans W6／62px |
| 左右・上下の余白 | padX = 32、padY = 18 |
| 背景色 | 濃紺。名前文字は白 |
| 式を使う範囲 | 名前の背景だけ。肩書きは別の固定テキスト |
基本例のテキストを名前へ変え、サイズ用コードのpadXを32、padYを18へ変更します。背景の親はNAMEにします。親を直接参照する形なので、コード内のレイヤー名を書き換える必要はありません。
上へ「SPEAKER / INTERVIEW」、下へ肩書きを別のテキストとして置けば、インタビュー用の名前帯になります。今回の背景はNAMEだけを測っています。名前と肩書きの両方を1つの枠で囲む構成ではありません。
配布例では0・2・4秒に名前を切り替えています。1人分の名前として使う場合は、NAMEのソーステキストのキーを外し、使いたい名前を入力してください。背景サイズを打ち直す必要はありません。
実践2：複数行の文章に合わせて高さも変える
| 設定 | 値 |
|---|---|
| コンポジション | 03_MULTILINE_BOX |
| テキスト | MULTILINE_TEXT／ポイントテキストに手動改行 |
| 文字サイズ・行送り | 44px／66px |
| 左右・上下の余白 | padX = 24、padY = 20 |
| 自動改行 | なし。改行位置は自分で入力する |
基本コードのpadYを20へ変え、文字の途中で改行します。heightには複数行の範囲が入るため、行数に応じて背景も縦に伸びます。位置のコードは同じままです。
文字を一定の幅で自動改行する機能や、画面内へ収める幅制限は含みません。長い1行を入力すれば、背景も横へ伸びます。文章が長いときは手動で改行し、画面の余白を見ながら配置してください。
ずれる・追従しないときに確認すること
| 症状 | 確認すること |
|---|---|
| 式でエラーになる | 背景の親が対象テキストか確認。親がない場合やヌルの場合は、この作例の前提と異なります |
| 大きさは合うが位置がずれる | 長方形パスの位置用コードも入力したか確認。leftとtopを無視していないか確認 |
| 全体が離れた位置へ出る | 背景レイヤーとBOXグループの位置・アンカーを0、スケール100%、回転0へ揃える |
| 文字が背景に隠れる | タイムラインでテキストを背景より上へ置く |
| 文字を拡大すると余白も大きくなる | 背景がテキストの子なので、親のスケールで余白も拡大します。基本値は100%で調整 |
| 文字のエフェクトやアニメーターと枠が合わない | 今回の作例は通常のポイントテキストが対象。エフェクトで広がる見た目やアニメーターによる変形まで同じ範囲として扱わない |
| 段落テキストで結果が違う | 今回と同じポイントテキストで試す。includeExtents=trueは段落ボックスの範囲を返す場合があるため、falseと同じ条件ではありません |
| 文字が変わるたび背景もパッと変わる | 式は現在の文字の寸法へ直接追従します。なめらかな伸縮を付ける処理は別途必要です |
sourceRectAtTimeの4つの値とincludeExtentsの扱いは、Adobeのエクスプレッション言語リファレンスでも確認できます。まずはサイズと位置をセットで計算し、親子付けで同じ座標に揃えるところから試してみてください。
作例プロジェクトをダウンロード
基本の自動背景、名前テロップ、複数行ボックス、余白と行数の比較を収録しています。背景の式は編集可能。文字変更のデモ用キーも入れてあるので、そのまま再生して仕組みを見られます。
| 項目 | 内容 |
|---|---|
| 版・容量 | v1.0／68,370バイト（約67KiB） |
| 内容 | 編集可能なAEP、expressions.txt、はじめに.txt |
| 制作環境 | After Effects 26.5×89／JavaScriptエクスプレッションエンジン |
| フォント | Hiragino Sans W6／Arial Bold。フォント本体は同梱していません |
| 利用条件 | 学習・個人制作で利用と改変可。商用利用は個別相談 |
商用利用はお問い合わせページからご相談ください。ほかのコードはAEエクスプレッション集から探せます。
コメント