《縦横指定で均等配置！》コピペだけでレイヤーを均等に配置する方法

エクスプレッション, オリジナル処理

オリジナル処理

AfterEffectsのシェイプレイヤーを均等に並べる場合、数が少なければ手動で出来ますが、数が増えると非常に大変です。

それを解決する為に、レイヤーをコピペするだけで簡単にレイヤーを並べられるエクスプレッション処理を作成したのでご紹介します。

※ シェイプレイヤーには「楕円形」などの図形と「塗り」を適用したものとして話を進めていきます。
※ シェイプレイヤーで描画した図形等ではなく、分割画面を作る場合は以下の記事をご覧ください。

《4分割！9分割！16分割！》簡単に分割画面を作る方法

AfterEffectsで4画面、9画面、16画面などの分割画面を手動で位置調整するのはなかなか大変な作業です。分割画面を簡単に作成するには、整列パネルを使います。具体的な手順をまとめていきたいと思います。この記事で出来る[…]

1 実現イメージ
2 処理イメージ
3 事前準備
4 処理内容
- 4.1 関数の使い方
- 4.2 関数処理内容
5 まとめ

実現イメージ

上記の動画では、今回作成した処理を使用して、白いドットを並べています。

白ドットと影を合わせると1000以上のレイヤーを並べているのですが、コピペだけで並べることができるので非常に簡単です。

処理イメージ

3列2行で配置指定をすると、上記のようにコンポジション内に均等に6つのレイヤーが並びます。一つのレイヤーにエクスプレッションを記述したら、そのレイヤーをコピペするだけで自動的に均等配置されます。

事前準備

① 新規コンポジションを作成（1920×1080）

② シェイプレイヤーを作成し、「楕円形」「塗り」を追加し、レイヤー名を「layer0001」にします。

これで準備OKです。

処理内容

レイヤーを均等に並べる処理を関数にして作成しました。

※ 関数については以下の記事で説明していますのでご覧ください。

《関数も使用可能！》自作関数を使って処理を再利用する方法

AfterEffectsのエクスプレッション内で、時間計算など、同じ処理を何度もする場合もあると思います。そんな時は、関数を使うと記述量を大幅に減らせる可能性があります。この関数の使い方についてご紹介します。関数と[…]

以下のコードをレイヤー「layer0001」の [トランスフォーム] – [位置] にコピペします。

コードをコピペしてエラーが出る場合は、レイヤー名の末尾に4桁の数字が無い可能性が高いので、ご確認ください。

//© 2021 COLORCODE-AE
//現在のコンポジションに均等配置した後のレイヤー位置を返す
function getArrangeEvenlyPosition(nStartIndex, nTargetIndex, nColumn, nRow){
    var nCompWidth = thisComp.width;
    var nCompHeight = thisComp.height;
    var nIndex = nTargetIndex - nStartIndex;
    var nXSpace = nCompWidth / (nColumn + 1);
    var nYSpace = nCompHeight / (nRow + 1);
    var nXIndex = nIndex % nColumn + 1;
    var nYIndex = Math.floor(nIndex / nColumn) + 1;
    var nPositionX = nXSpace * nXIndex;
    var nPositionY = nYSpace * nYIndex;
    return [nPositionX, nPositionY];
}
//レイヤー名末尾の数字を数値として取得
function getNumericFromLayerName(nDigit){
    var sLayerName = thisLayer.name;
    var sNumeric = sLayerName.slice(-nDigit) ;
    return parseInt(sNumeric, 10);
}
//関数を使う
var nTargetIndex = getNumericFromLayerName(4);
getArrangeEvenlyPosition(1, nTargetIndex, 3, 2);

※ 動作を変える場合は、一番下の行だけの変更で済むようになっています。

このレイヤー「layer0001」をコピペして6個にすると、レイヤーが均等に配置されます。