エクスプレッションでシェイプを柔軟にサイズ調整する

シェイプのサイズ調整をより便利にする仕組みを考えてみます。

右だけ伸ばしたいとして、

長方形パス 1のサイズで幅を変えるしかないため、左にも膨らんでしまいます。

中心から左右に大きくなってしまうため、右の辺だけを伸ばしたいのです。一方向できれば、四角形の上下左右を個別に伸び縮みできる仕組みにできそう。便利ではないか。

ではいつものごとく、プログラミングは機械語への翻訳に過ぎないため、案をまず言葉にしてみます。

• 延長したい「上」「下」「左」「右」のpx数を入力するインターフェースが必要
• 一辺を伸ばしたら、逆に膨らむ分戻してやればいいのではないか

…意外とこんなものか？

処理を整理して理解するだけで良さそうです。

幅を10px伸ばした場合は、左右に5pxずつ大きくなるんだということがわかれば、紐解いていけそうですね。

“幅”を”右”に置き換えて考えると、左に-5pxだけ、レイヤーの位置を調整してやれば、見た目上のシェイプレイヤーの位置が固定されながら、右だけ10px伸びるようにできるはずです。

言葉を式に変換していく

上下左右の数値入力できるものを準備

では、シェイプレイヤーに上下左右それぞれを入力するスライダー制御を追加します。4つ。

それぞれ「←」「→」「↑」「↓」とリネームします。

ここの値を、長方形のサイズとレイヤーの位置でごにょごにょしていけばいいでしょう。

長方形のサイズのエクスプレッション

先にサイズの調整部分です。位置をキャンセルする処理は次にやっていきます。

長方形パス 1のサイズにエクスプレッションを開始します。

サイズ調整が4つのスライダーのみになると逆に面倒が増えるので、幅と高さの調節機能が死なないよう、元々のサイズも活かしましょう。valueを残します。これで長方形パス 1のサイズを赤い数値で直接変更できるままになります。

var left  =effect("←")(1);
var right =effect("→")(1);
var top   =effect("↑")(1);
var bottom=effect("↓")(1);

value+[left+right, top+bottom];

var left  =effect("←")(1);
var right =effect("→")(1);
var top   =effect("↑")(1);
var bottom=effect("↓")(1);

value+[left+right, top+bottom];

造作もないですね。スライダーから値を受け取る際はeffect(“エフェクト名”)(“スライダー”)でもいいですが、日本語が入ると設定言語依存になるので(1)にしてます。「エフェクトの1つ目のプロパティ」という意味らしく、短いですし「スライダー制御の数値を取得する際はエフェクト名のあと(1)」と丸暗記でいいでしょう。(ピックウィップで拾うと名前の文字で拾ってくるので毎回書き換えは必要です)

サイズは幅、高さの2次元で指定する1つのプロパティですから、最終的なエクスプレッションの計算結果が2次元の配列になる必要があります。

valueで現在の元々のサイズ、今回は[200,200]が入っています。

これは[x軸,y軸]のルールです。leftとrightは横方向=x軸の幅のことなので1つめの配列に、topとbottomは縦方向=y軸の高さなのでコンマの後の2つ目の配列に、ぶち込みます。

逆方向への移動をキャンセルするエクスプレッション

ではでは仕上げに、スライダーで伸ばしたい方向と逆側に膨らむ分を戻してやる式を作ります。

素直に、レイヤー>トランスフォーム>位置 にエクスプレッションです。

var left  =effect("←")(1);
var right =effect("→")(1);
var top   =effect("↑")(1);
var bottom=effect("↓")(1);

// 位置打ち消しオフセット
var offsetLeft  =left/-2;
var offsetRight =right/2;
var offsetTop   =top/-2;
var offsetBottom=bottom/2;

[value[0]+offsetLeft+offsetRight, value[1]+offsetTop+offsetBottom];

var left  =effect("←")(1);
var right =effect("→")(1);
var top   =effect("↑")(1);
var bottom=effect("↓")(1);

// 位置打ち消しオフセット
var offsetLeft  =left/-2;
var offsetRight =right/2;
var offsetTop   =top/-2;
var offsetBottom=bottom/2;

[value[0]+offsetLeft+offsetRight, value[1]+offsetTop+offsetBottom];

ここで整理したいのが、符号です。After Effectsの仕様では、

左に移動…xがマイナス方向に動くこと
右に移動…xがプラス方向に動くこと
上に移動…yがマイナス方向に動くこと
下に移動…yがプラス方向に動くこと

です。つまり、

左だけ伸ばしたい場合(右移動を戻す)…[←]の数値の半分だけxをマイナスする
右だけ伸ばしたい場合(左移動を戻す)…[→]の数値の半分だけxをプラスする
上だけ伸ばしたい場合(下移動を戻す)…[↑]数値の半分だけyをマイナスする
下だけ伸ばしたい場合(上移動を戻す)…[↓]数値の半分だけyをプラスする

とすれば、見た目上はシェイプが固定されますね。

おっと！

シェイプレイヤーのスケールが100%でないと正しく固定されません。位置のエクスプレッションの最終行を、スケールも考慮するように少し追加しましょう。

xとyそれぞれに、scale.value/100を掛けてやります。レイヤーのスケールが40%なら、長方形のサイズもスライダーで追加するpx数も40%になるわけですから、打ち消し移動量を0.4倍してやらねばなりません。

var left  =effect("←")(1);
var right =effect("→")(1);
var top   =effect("↑")(1);
var bottom=effect("↓")(1);

// 位置打ち消しオフセット
var offsetLeft  =left/-2;
var offsetRight =right/2;
var offsetTop   =top/-2;
var offsetBottom=bottom/2;

value+[(offsetLeft+offsetRight)*scale.value[0]/100, (offsetTop+offsetBottom)*scale.value[1]/100];

var left  =effect("←")(1);
var right =effect("→")(1);
var top   =effect("↑")(1);
var bottom=effect("↓")(1);

// 位置打ち消しオフセット
var offsetLeft  =left/-2;
var offsetRight =right/2;
var offsetTop   =top/-2;
var offsetBottom=bottom/2;

value+[(offsetLeft+offsetRight)*scale.value[0]/100, (offsetTop+offsetBottom)*scale.value[1]/100];

効率化完了

xとyの仕様、長方形シェイプのサイズの処理の仕様、これがわかれば難しいことはありませんでしたね。

一緒に考えて、エクスプレッションを組んでみることで、After Effectsの仕組みについて理解が進んだことと思います。簡単な作業ですが、こういったシステムになっていれば複雑になるアニメーションもシンプルに早く作れるようになります。

これは一発で呼び出したいので、作ったらアニメーションプリセットとして保存すると便利かと思います。

ブラッシュアップ案としては、選択したテキストレイヤーの座布団として使えると便利そうですので、これをスクリプト化する記事を予定しています。