以前の記事「2つのレイヤー間に均等配置させるエクスプレッション」をスクリプト化します。毎回エクスプレッションを打ち込んでいては面倒なので、rootとgoalレイヤーを選択し、スクリプトを実行するだけでエクスプレッションが適用されるようにします。

[完成品]

var sel=app.project.activeItem.selectedLayers;

function f_pos2LayersAlign(){
    if(sel.length<3){
        alert("レイヤーを選択してから実行して下さい。\r「始点レイヤー」\r「挟むレイヤー」(複数可)\r「終点レイヤー」\rの順に選択");
    }else{
        var rootLyr=sel[0];
        var goalLyr=sel[sel.length-1];
        var alignFx;
        
        rootLyr.name=rootLyr.name.replace(/_root/g,"").replace(/_goal/g,"");
        goalLyr.name=goalLyr.name.replace(/_root/g,"").replace(/_goal/g,"");
        rootLyr.name+="_root";
        goalLyr.name+="_goal";
        rootLyr.label=11; // ラベルをオレンジに
        goalLyr.label=2; // ラベルを黄色に
    
        for(i=1;i<sel.length-1;i++){
            selItm=sel[i];
                alignFx=selItm.property("ADBE Effect Parade").addProperty("ADBE Slider Control");
                alignFx.enabled=false;
                alignFx.name="距離%";
                kyori=i/ (sel.length-1)*100;//0->90
                alignFx(1).setValue(kyori);
                selItm.position.expression=
                    'a=thisComp.layer("'+rootLyr.name+'").transform.position;\r'+
                    'b=thisComp.layer("'+goalLyr.name+'").transform.position;\r'+
                    'def=(b-a)/100;\r'+
                    'a+(def*effect("距離%")(1));';
        }//for sel.length-1
    }//if レイヤー未選択
}//function

app.beginUndoGroup("pos2LayersAlign");
    f_pos2LayersAlign();
app.endUndoGroup();

[概要]

root(はじめに選んだ)レイヤーとgoal(最後に選んだ)レイヤーを結ぶ直線上に残りの全レイヤーを整列させるエクスプレッションを仕込むスクリプト。位置へのエクスプレッション追加となるため、ゴムのように伸び縮みするアニメーションを制作できます。

[使い方]

1. 整列させたいレイヤーを全て選択し、スクリプトを実行
2. はじめに選んだレイヤーが「root」レイヤーになる
3. 最後に選んだレイヤーが「goal」レイヤーになる
4. その他のレイヤーが間に均等に並ぶ

[オプション]

• 「%」エフェクトで、間のレイヤーの位置を調整できる
• 0%がスタートレイヤー位置、100%がゴールレイヤー位置
• 「root」レイヤーか「goal」レイヤーを移動し他レイヤーを追従させる

[解説]

まずrootレイヤーとgoalレイヤーの位置と距離を検知します。

「(goalレイヤーの位置-rootレイヤーの位置)/100」でrootレイヤーとgoalレイヤーを結ぶ直線が%で割り出せるため、rootレイヤーとgoalレイヤーに挟まれたレイヤーに「自身が何%の距離にいればいいか」を「距離%」スライダーエフェクトに設定します。

for(i=1;i<selItmAll.length-1;i++){
    selItm=selItmAll[i];
        alignFx=selItm.property("ADBE Effect Parade").addProperty("ADBE Slider Control");
        alignFx.enabled=false;
        alignFx.name="距離%";
        kyori=i/ (selItmAll.length-1)*100;//0->90
        alignFx(1).setValue(kyori);
}//for selItmAll.length-1

スクリプトでエクスプレッションを仕込む

スクリプトから指定プロパティにエクスプレッションを適用したい場合は、下記のように「プロパティ名.expression=」でエクスプレッション文字列を代入してやります。

selItm.position.expression=
  'a=thisComp.layer("'+rootLyr.name+'").transform.position;\r'+
  'b=thisComp.layer("'+goalLyr.name+'").transform.position;\r'+
  'def=(b-a)/100;\r'+
  'a+(def*effect("距離%")(1));';

位置にエクスプレッションが入るので距離に応じて、rootレイヤーかgoalレイヤーを動かし、アニメーション可能です。また、並べるオブジェクトの形が統一されていない場合、見た目上、等間隔に見えない場合には、rootレイヤーとgoalレイヤー間のレイヤーに適用された「%」エフェクトで個別にズラすことができます。

ダウンロード

次回予告

次のスクリプト記事では、スクリプト、エクスプレッションにおける「プログラム(JavaScript)内へのコメントの書き方」を学びます。複雑なコードにもコメントを適宜追加しておくことで、動きの把握をしやすくします。

下記リンクから飛べます。

JavaScriptの「コメント」の書き方