After Effectsで定規。もう言わずもがな。

Hの形の定規が欲しいこと、ままありますよね。

シェイプレイヤーとエクスプレッションで実用的な定規を作ります。

シェイプを準備する

長方形を組み合わせればOKですが、長さや太さ、色の調整などが早くなるように頭を捻ります。

条件を整理する

• ヨコ線と長さに応じて両端にタテ線
• 太さは変えられるようにしたい
• サイズ調節しやすくしたい
• じゃあもう色も一箇所で変えたい
• 塗りと線の色を個別に変更したい
• ヨコ線の高さは変えられたほうが都合がいい

位置合わせを最適化したい

まずはベースとなるヨコ線。長さを直感的に変更したいので、1本線ではなく長方形で作っておくと、サイズの調整が楽になります。高さが線の太さ(thickness)、幅が長さ(width)です。

エクスプレッション制御の「ポイント制御」を2つ、widthとthicknessをセットする用に使い、タテ線は矢の左右端に固定、ヨコ線部分は伸び縮みして欲しいわけです。

まずはヨコ線の部分を作ります。長方形ツールをダブルクリックでど真ん中に長方形シェイプを作成。

エフェクトを準備

長方形シェイプのサイズをエクスプレッション制御で調整するために最低限必要な要素はこの2つです。

「width」ポイント制御
「thickness」ポイント制御

をそれぞれ追加しリネーム。パスにエクスプレッションを追加します。

ヨコ線部分のパスのエクスプレッション

長方形シェイプのサイズにエクスプレッションを記述します。

[effect("width")(1),effect("thickness")(1)];

これでエフェクトのスライダーでヨコ線の太さと長さを調整できるようになりました。

タテ線部分のパスとエクスプレッション

両端用に縦長の長方形を2つ準備します。幅となる太さはthicknessと同じ数字でいいので使い回します。

さらに、タテ線の高さは別に制御したいので、新たにスライダー制御を追加します。

「height」スライダー制御

を追加しリネーム。サイズにタテとヨコに応じたエクスプレッションをぶち込みます。

[effect("thickness")(1),effect("height")(1)];

またこちらはヨコ線の長さに応じて追従したいので、長方形の位置にエクスプレッションです。

1つめの長方形レイヤーの位置に

[-effect("width")(1)/2,effect("thickness")(1)%2/2];

2つめの長方形レイヤーのサイズに

[effect("width")(1)/2,effect("thickness")(1)%2/2];

と、ヨコ線のサイズの半分左と、半分右に位置を変えるだけでいいです。追加で、線の太さが奇数の場合で位置を0.5ピクセルずらさないと、ピクセルの間に中心が来て線がにじんでしまうので、2で割った余りをさらに2で割ることで線の太さが奇数のときに0.5、偶数のときに0にできます。

次にヨコ線の位置を上寄り、下寄りに調整したいこともあるため、これもスライダー制御でいじれるように新たにスライダー制御を追加します。

「border-Y%」スライダー制御

を追加しリネーム。タテ線の高さheightの上端、下端で%指定したく、

a=effect("height")(1)/200;
[0,effect("thickness")(1)%2/2+(effect("border-Y%")(1)*a)];

こうしてみました。

ヨコ線と中心を合わせるためにeffect(“thickness”)(1)%2/2を流用し、これにheightを200で割った数値をborder-Y%スライダーに掛けることでborder-Y%が-100で上端、100で下端に移動できるようになりました。

ブラッシュアップと仕上げ

このborder-Y%のスライダー、マウスでグリグリ動かしてみると、-100~100の範囲しか動かないようにしないと煩わしいようです。エクスプレッションで範囲を制御します。border-Y%のエクスプレッションに

if(value<-100){
	-100;
}else if(value>100){
	100;
}else{
	value;
}

これを記述しました。

最後に3つのシェイプを一括でカラー変更できるよう、エフェクトを追加します。

「border-color」カラー制御
「fill-color」カラー制御

です。パスの結合を追加してシェイプ3つをまとめ、「塗り」と「線」で一括して色をぶち込みます。両方に以下のエクスプレッションを記述します。

↓塗りのカラーにはこちら

effect("fill-color")(1);

↓線のカラーにはこちら

effect("border-color")(1);

完成

これでH型の使いやすい定規シェイプが一発で呼び出せるようになりました。

ダウンロード