toComp()・fromComp()｜動く図形と説明ラベルを線でつなぐ

商品が動いても、説明ラベルと結ぶ線をつないでおきたい。そんなときに使えるのがtoComp()とfromComp()です。対象の位置・回転・拡大に合わせて線の先端を更新し、ラベルは読みやすい向きと大きさのまま保てます。

この記事では、動く丸とラベルをつなぐ基本から、商品紹介と複数ラベルの図解へ進みます。画像の中身を認識して追いかける機能ではなく、指定したレイヤー上の点をつなぐ方法です。映像内の実写被写体を追う場合は、別途トラッキングなどの準備が必要です。

作例の編集可能なAEプロジェクトを用意しています。ダウンロードは記事の最後から。

何が便利？ 親子付けと使い分ける

ラベルを対象の子にすると、対象の回転や拡大も受け継ぎます。ラベルごと一緒に動かしたいときには便利ですが、画面の右側に説明を固定したいときには調整が必要です。今回の方法は、ラベルと対象を別々に配置したまま、線の両端だけをそれぞれに合わせる構成です。

やりたいこと	選ぶ方法
文字も図形も、まとめて移動・回転・拡大したい	親子付けやプリコンポーズ
説明を固定し、対象との接続だけ保ちたい	今回のtoComp()・fromComp()＋パスの式
先頭の動きを時間差で追いたい	valueAtTime()
線に沿って物体を走らせたい	pointOnPath()

基本作例：動く丸と固定ラベルを線でつなぐ

項目	今回の設定
環境	After Effects 26.5×89／JavaScriptエクスプレッションエンジン／8bpc
コンポジション	1280×720／30fps／6秒
レイヤー	TARGET（丸）／LABEL（文字）／CONNECTOR（線）。すべて2D・親なし
丸	直径90px。楕円の位置［0, 0］、レイヤーのアンカーポイント［0, 0］
ラベル	左揃え、40px、位置［880, 300］、回転0度・スケール100％
接続点	丸のアンカーポイントと、ラベルのローカル座標［0, 18］
線	塗りなし／線幅3px。パスはコンテンツ直下。線レイヤーの位置［0, 0］・アンカー［0, 0］・回転0度・スケール100％

1. 丸のシェイプレイヤーを作り、名前を半角でTARGETにします。楕円はレイヤーの原点に描き、レイヤーの「位置」で動かします。
2. 文字レイヤーを作って名前をLABELにします。文字を「動く丸」にし、左揃えで画面右側に置きます。親子付けはしません。
3. 何も選択していない状態でペンツールを使い、2点の開いた線を描きます。塗りはなし、線幅は3px。シェイプレイヤー名をCONNECTORにします。
4. CONNECTORの「コンテンツ」内でベジェパスの「パス」を開きます。グループに入っている場合、グループのアンカー・位置・回転を0、スケールを100％にします。レイヤーのトランスフォームとは別の設定です。
5. 「パス」のストップウォッチをOption／Alt＋クリックし、次のコードをすべて貼り付けます。「位置」へ貼るコードではありません。
6. TARGETの「位置」にキーを作って動かします。LABELを移動した場合も、線の反対側がついてくることを確認します。

コピー用コード1：丸の中心とラベルを結ぶ

var target = thisComp.layer("TARGET");
var label = thisComp.layer("LABEL");
var a = target.toComp(target.anchorPoint);
var b = label.toComp([0, 18]);
var p1 = thisLayer.fromComp(a);
var p2 = thisLayer.fromComp(b);
createPath([p1, p2], [], [], false);

target.anchorPointはTARGETのアンカーポイントです。今回の丸はそこに中心を置いています。図形の中心とアンカーが違う場合は、次の実践例のように接続したい点を直接指定できます。

label.toComp([0, 18])は、ラベルの文字基準位置から18px下に接続する設定です。文字の左端や外周を自動で判定するコードではありません。左揃えのまま使い、文字と線の距離を変えるときは18を調整してください。

時刻	TARGETの位置
0秒	［280, 430］
1.5秒	［550, 300］
3秒	［680, 485］
4.5秒	［420, 520］
6秒	［280, 430］

位置キーはすべてリニアです。動かし方は自由に変更できます。線やラベルへ同じ移動キーをコピーする必要はありません。動画内の接続点を示す小さな丸は装飾で、線の動作には不要です。

toComp()とfromComp()は、何をしている？

コード	役割
target.toComp(接続点)	対象レイヤーの中の座標を、コンポジション上の座標に変換
label.toComp([0, 18])	ラベル側の接続点も、同じコンポジション上の座標に変換
thisLayer.fromComp(a)	コンポジション上の点を、式を付けた線レイヤーの座標へ変換
createPath([p1, p2], [], [], false)	2点を結ぶ開いたパスを作る。falseなので最後と最初を閉じない

たとえば、商品の右上は商品内ではいつも同じ座標でも、回転や拡大で画面上の位置が変わります。toComp()はその変形を含めた位置を求めます。その後にfromComp()で線の座標へ戻すことで、線レイヤーの位置・回転・スケールを変えても接続がずれにくくなります。

ただし、シェイプの「グループのトランスフォーム」は、このコードでは打ち消していません。今回のパスはコンテンツ直下に置いています。ペンツールで作ったグループ内のパスを使う場合は、そのグループと外側のグループの変形を初期値にしてください。

実践1：商品カードの右上に説明線をつける

冒頭の作例では、340×260pxの商品カードをプリコンポーズし、その右上を接続点にしています。カードの中に描いた図柄ではなく、プリコンポジションの右上［340, 0］を指定しています。

1. 商品カードを340×260pxのプリコンポジションにまとめます。今回の配布例はPRODUCT_ARTです。
2. 外側の1280×720コンポに配置し、レイヤー名をTARGETにします。アンカーは［170, 130］。位置・回転・スケールをキーフレームで動かします。
3. LABELを作り、左揃え29px、位置［845, 290］で固定します。回転0度・スケール100％、親なしです。
4. 基本と同じCONNECTORを用意し、「パス」へ次のコードを貼ります。
5. カードを回転・拡大し、線の先端が右上に残ることを確認します。

コピー用コード2：340×260pxのカードの右上を追従する

var target = thisComp.layer("TARGET");
var label = thisComp.layer("LABEL");
var a = target.toComp([340, 0]);
var b = label.toComp([0, 18]);
var p1 = thisLayer.fromComp(a);
var p2 = thisLayer.fromComp(b);
createPath([p1, p2], [], [], false);

基本から変えたのは、target.toComp(target.anchorPoint)をtarget.toComp([340, 0])にした部分です。別サイズのプリコンポを使うときは、340をその幅に変更します。シェイプレイヤーではプリコンポと原点の位置が違うため、そのまま同じ数値を流用しないでください。

時刻	位置	回転	スケール
0秒	［390, 420］	−15度	80％
1.5秒	［500, 405］	18度	115％
3秒	［400, 460］	−12度	90％
4.5秒	［480, 380］	12度	105％
6秒	［390, 420］	−15度	80％

接続点を変える：中心と右上の違い

拡大率を変えても、同じ角につながる

実践2：3つの図形をラベルで説明する

1. 基本作例のTARGET・LABEL・CONNECTORを3組用意します。
2. 名前をTARGET_0／LABEL_0／CONNECTOR_0、TARGET_1／LABEL_1／CONNECTOR_1、TARGET_2／LABEL_2／CONNECTOR_2に分けます。
3. 各CONNECTORの式の最初の2行を、対応するTARGETとLABELの名前へ変更します。接続点は基本コードのtarget.anchorPointを使います。
4. LABELの文字をPLAN・MAKE・SHAREにし、位置を［860, 255］／［860, 405］／［860, 555］にします。
5. TARGETを別々に動かします。複製しただけでは式の参照名が元のままなので、名前の対応を忘れず確認します。

図形の大きさは88×88px。0・1.5・3・4.5・6秒のX座標は350／520／420／300／350、基準Yは265／415／565です。Yは基準から0／−25／15／−12／0px動かし、回転は0→3秒に40／80／120度→6秒に0度へ戻しています。ラベルと線の構造は基本作例と同じです。

つまずきやすいところ

症状	確認すること
式を貼るとエラーになる	貼り付け先はベジェパスの「パス」。位置・長方形パスのサイズ・ソーステキストではない
TARGETやLABELが見つからない	半角のレイヤー名と式の文字列を一致させる。同名レイヤーを作らない
線が対象からずれる	シェイプ内のグループ変形を初期値へ。レイヤー変形と混同しない
丸の外側に接続したい	anchorPointは外周ではない。丸の半径に応じたローカル座標を指定する
文字を変更すると接続位置が合わない	今回は左揃え・基準位置から18px下への固定接続。文字の右端・下端を自動取得する場合はsourceRectAtTime()との組み合わせが必要
線まで太くなった	レイヤーの拡大は線幅にも影響する。端点の一致と線幅の一定化は別の問題
複製した線が同じ対象を追う	式のTARGETとLABELの名前を、それぞれの組に変更する
3Dで同じように動かない	今回の手順は2D。カメラ投影や3D平面への変換を含めて扱う場合は追加設計が必要

作例プロジェクトをダウンロード

基本の丸、回転・拡大する商品カード、3つのラベルの図解、60・100・140％の拡大率比較を含む編集可能なAEプロジェクトです。

項目	内容
ファイル	pas-tocomp-v1.0.zip／77.1KB／v1.0
内容	AEP・はじめに.txt・コピー用コード
制作環境	AE26.5×89／JavaScript／1280×720／30fps／6秒／8bpc
必要素材	AE内の図形と文字のみ。外部素材・追加プラグイン不要
フォント	Hiragino Sans W6。フォント本体は未同梱。未導入の場合は置換してください
利用条件	学習・個人制作で利用と改変可。商用利用は個別相談

商用利用のご相談はお問い合わせへ。ほかの動きはAEエクスプレッション集から探せます。