AE BOXの回転移動

四角形のレイヤーをコロコロと転がすアニメーションです。

フッテージの高さ/幅ピクセルサイズを計算に使いますので、素材読み込みは「コンポジション-レイヤーサイズを維持 」で。
もし余白がある場合は四角形と同じコンポジションサイズにプリコンポします。
余白があると回転する時に地面から浮いてしまいます。

素材をコンポジションに入れたら、 「アンカーポイント」と「位置」にそれぞれエクスプレッションを追加します。

アンカ－ポイント用

count = Math.floor(rotation / 90);
    num = count + 1000;
    val = ( num % 4);
    if (val == 0) {
      [width, height]
    }
    else if (val == 1) {
      [width, 0]
    }
    else if (val == 2) {
      [0, 0]
    }
    else
      [0, height]

　

位置用

val = Math.floor(rotation / 90);
widthP=width*(scale[0]/100);
heightP=height*(scale[1]/100);
gap=Math.abs(widthP-heightP);
val2=Math.ceil(val/2);
valX=val * widthP;
valY=val2 *gap;
if(widthP>heightP){

    x = value[0]+ valX-valY;
}
else{

    x = value[0]+ valX+valY;
}
y = value[1];
[x, y]

レイヤーの回転に数値を入れてアニメーションさせてみると、回転に応じて右へ左へ転がっていきます。

あとはレイヤーを好きな位置に動かして完成！

AE ボールの自動回転

転がるボール、車のタイヤなどのアニメーションを簡単に作るエクスプレッションです。

アフターエフェクトで用意されている円周率関数（PI）を使って、移動をアニメーションさせるだけで地面を転がっているように物理的に正しく回転させます。


まず、フォトショップでネタを作ります。

ＡＥに　「コンポジション-レイヤーサイズを維持 」で読み込みます。
レイヤーサイズを維持しているので、レイヤーサイズ＝ボールの直径になっています。

レイヤーに移動のキーフレームアニメーションを作り、
回転にエクスプレッションを追加して下記の文をコピペします。

d=width*(scale[0]/100);

pi=Math.PI;

circ=d*pi;

rot=360/circ;

movex=position[0];

rot*movex;

プレビューするとボールが自動で回転します。

----エクスプレッションの補足---

レイヤーサイズ＝球の直径　になっていない素材を使いたい場合
1行目の「width」を直径（ピクセル）の数値に書き換えて下さい。

AE ウィグル

画ブレなど、プロパティにランダムな値を入れたい場合、ウィグラーが便利ですが、キーフレームを作るよりもエクスプレッションで行なうと作業がかなりやり易くなります。
試しにレイヤーの位置にエクスプレッションを追加して、

wiggle (5,20);

と打ってみると、レイヤーがランダムに振動しはじめると思います。
（　）内の「,」で区切られている数字のうち、初めの「5」は周波数で、大きくなると振動のスピードが激しくなります。２つ目の数字「20」は振動幅で、この例だと最大20ピクセルの移動範囲で振動します。
２つの数字を書き換えて再生すれば、すぐに変更が反映されています。
もちろんこの文はそのまま回転やエフェクトの値なんかにも使えます。

もう１ステップ、
このままだと、いちいちエクスプレッション文を開いて調整しないといけないので少し面倒です。
エフェクトのスライダーとエクスプレッション内の各数字を関連付ける事でさらに調整がスムーズになります。
なにやら面倒くさそうですが、アニメーションプリセットを参照で簡単に出来ますので、 よければ使ってみて下さい。

ウィグル位置.ffx
ウィグル回転.ffx

--オプション説明--
●(ON/OFF)　オンオフ切り替え。キーフレームを打って途中から振動を止めるor始める事も可
●freq:周波数　上の説明の同じ
●amp:振幅　上の説明と同じ
●octaves:オクターブ　ノイズ
●ampMult:振幅　ノイズの振幅


また、振動をつけた上で、キーフレームアニメーションも付けれますので、細かくブレながら飛ぶハエの動きなんかは簡単に出来ますね。



本文

a=effect("wiggle (amp:振幅)")("スライダー");
f=effect("wiggle (freq:周波数)")("スライダー");
o=effect("wiggle (octaves:オクターブ)")("スライダー");
on=effect("wiggle (ON/OFF)")("チェックボックス");
mult=effect("wiggle (ampMult:振幅)")("スライダー");
num=effect("wiggle (ON/OFF)")("チェックボックス").numKeys;

if(num==0){
    if(on!=0){
        wiggle(f,a,o,mult,time);

    }
    else{
        value;
    }
}
else{

    t = 0; //ループカウンター、初期化   

    timeGo=0;
    while (t <= time){   
        nKey = effect("wiggle (ON/OFF)")("チェックボックス").nearestKey(t);
        (t >= nKey.time ) ? P1 = nKey.index : P1=nKey.index-1;
        onoff = effect("wiggle (ON/OFF)")("チェックボックス").key(P1).value;

            if(onoff==1){
                timeGo+=1/30;
            }

        t+=1/30
    }

wiggle(f,a,o,mult,timeGo);
}

　

AE 連番文字をパカパカ

文字がランダムにパカパカ切り替わり→決まり文字へ、というよくあるパターン。
タイムリマップとエクスプレッションを使ってやってみます。

例えば、アルファベットの場合、Ａ～Ｚの連番26枚を用意し読み込みます。

コンポジションに入れて、タイムリマップを適用します。
タイムリマップにエクスプレッションを適用し、↓をコピペします。

 fps=30;
sn=source.name;
du=footage(sn).duration*fps;

start=1;　//ランダム範囲の開始フレーム
end=du;　//ランダム範囲の最終フレーム
koma=1;　//何コマ落ちでパカパカするか

if(marker.numKeys){
    marker1=marker.key(1).time;
    kimari=marker.key(1).comment;
}
else{
    marker1=100;
    kimari=1;
}

start=start-1;
hold=koma/fps;
seed = Math.floor(time/hold);
seedRandom(seed,true);
run=random(start,end)/fps;
fix=(kimari-1)/fps;

time<marker1? run:fix

再生してみると、１コマおきにランダム表示されていると思います。
次に適当な場所にレイヤーマーカーを１つ作って、決めで使いたいフレーム番号をコメントに入れます。例えばＧを使いたい時は７。
も一度再生すると、コメントの位置にくるとＧでストップします。

また、
本文の中、下の３行はオプションとして書き換えることができます。

start=1;　//ランダム範囲の開始フレーム
end=du;　//ランダム範囲の最終フレーム
koma=1;　//何コマ落ちでパカパカするか

読み込んだ連番のすべてのフレームを使ってランダム表示したい時はそのままで良いのですが、
特定の範囲、例えばＣ～Ｆだけを使いたい！という場合は開始の「１」を「3」へ、最終の「du」を「6」へ変更してみてください。
またkomaはコマ落ち数で、５に変更すると５枚おきに文字が切り替わります。現状はフルフレームの「1」ですね。

もろもろ設定が終われば、レイヤーをコピーして、レイヤーの位置、マーカーを編集すればＯＫ。

ちなみにリンクのムービー「PAKAPAKA」のタイムラインはこんな感じ↓

タイミングの編集くらいなら、レイヤー数が増えても比較的編集しやすいと思います。



 --追記--
今回は、外部で文字ファイルを用意する前提での方法ですが、
文字の扱い的にフォントにこだわる必要がなく、決まり文字のタイミングもおおざっぱで良い場合などは、ＡＥ内のテキストレイヤーでアニメーターオプションを使った方法がてっとりばやいですね。
一応、 ＡＥサンプルです。

AE キーフレームのループあれこれ

キーフレームを1サイクル作ってそのアニメーションをループさせたい時、キーフレームをコピーするよりも、エクスプレッションの記述で簡単にできちゃいます。

loopIn(type = "cycle", numKeyframes = 0)

loopOut(type = "cycle", numKeyframes = 0)

上の文は、エクスプレッションを追加すると出てくる矢印ボタンから、メニューをたどると簡単に出せます。

矢印を押して出てくるメニュー、propertyの中にあります。

２タイプある文から、まず
loopIn(type = "cycle", numKeyframes = 0)
を適用してみた結果

グラフの実線が実際作ったキーフレームで、点線がエクスプレッションでループされているアニメーションです。
実際のキーフレームより前の時間だけループします。
お察しの通り、このloopInはあまり使う事はないでしょう・・

ちなみに、エクスプレッションの動きをグラフに点線で表示するにはココを押す

次が本命
loopOut(type = "cycle", numKeyframes = 0) 
結果は、

そうそうコレコレ。
ちなみに、前後にループを足すには少々ややこしい文が必要になりますので、特に理由がなければコンポジションの先頭でキーフレームを作って、このloopOutを使うと良いと思います。

loopIn loopOut　の意味はそんなところです。
そして気になるのが（）の中。type="cycle"とありますが、これはどのようにループするかというのを指定しています。

試しに「cycle」を「pingpong」と書き換えてみます。
loopOut(type = "pingpong", numKeyframes = 0) 
結果は、

いったりきたり、RAMプレビュー再生のオプションにもある、あの動きです。
んん、たまには使うかなぁ

次は、「cycle」を「offset」と書き換えてみます。

loopOut(type = "pingpong", numKeyframes = 0) 
結果は、

最初と最後のキーの値を差分して足したうえでループしてくれます。
階段をはずみながら落ちていくボール、など使うケースはそこそこあるかと思います。
このループ形式は、3Dソフトで歩行アニメーションの足の位置なんかで結構使ったりします。


次はとてもステキなループです。
とりあえず結果は、

タイムラインの最初に実際のキーフレームがあります。
そして、レイヤーにマーカーを付けて、コメントに数値を打ち込みます。
あら！マーカー位置から数値の回数分ループしてるじゃないですかっ！もちろんマーカーの位置を移すとアニメーションもついていきます。
マスクシェイプにも使えるので、キャラのまばたきなど利用するシチュエーションは無限大！
ちなみにキーフレームは実際のアニメーションに反映されませんので、 そこも動かしたい場合は１Ｆにマーカーを作りコメントを「1」とすると良いでしょう。

エクスプレッション文は

loopTime = 0;
numLoop = 0;
keyN = 0;
shiftTime=0;　
cycleTime =key(numKeys).time;　

if (marker.numKeys){
keyN = marker.nearestKey(time).index;
if (marker.key(keyN).time > time) keyN--;
}

if (keyN > 0) {
numLoop = parseInt(marker.key(keyN).comment);
shiftTime = time - marker.key(keyN).time;

if (shiftTime < numLoop * cycleTime ) {
loopTime = shiftTime % cycleTime ;
}
}

valueAtTime(loopTime )

 

これはとあるサイトから見つけてきた文で、ボクは理解していません・・・
難しく考えずにコピペで使っちゃいましょう！

↓レイヤーマーカーではなく、コンポジションのマーカーを参照できるよう書き換えてみました。
複数レイヤーを同じタイミングでループさせたい場合はこちらの方がラクですね。

loopTime = 0;
numLoop = 0;
keyN = 0;
shiftTime=0;
cycleTime =key(numKeys).time;

if (thisComp.marker.numKeys){
keyN = thisComp.marker.nearestKey(time).index;
if (thisComp.marker.key(keyN).time > time) keyN--;
}

if (keyN > 0) {
numLoop = parseInt(thisComp.marker.key(keyN).comment);
shiftTime = time - thisComp.marker.key(keyN).time;

if (shiftTime < numLoop * cycleTime ) {
loopTime = shiftTime % cycleTime ;
}
}

valueAtTime(loopTime )

　

AE マーカーの位置でブルブル

このエクスプレッションはココのサイトからの転載です。

スケールにエクスプレッションを追加し、下記文をコピペ
レイヤーにマーカーを追加して再生してみて下さい。

n = 0;
t = 0;
if (marker.numKeys > 0){
n = marker.nearestKey(time).index;
if (marker.key(n).time > time) n--;
}
if (n > 0) t = time - marker.key(n).time;
amp = 15;
freq = 5;
decay = 3.0;
angle = freq * 2 * Math.PI * t;
scaleFact = (100 + amp * Math.sin(angle) / Math.exp(decay * t)) / 100;
[value[0] * scaleFact, value[1] / scaleFact];

タイムライン上でマーカー位置のタイミングに合わせて、スケールがしばらくブルブルしておさまります。
ブルブル具合は、エクスプレッション内の「amp」「freq」「decay」で調整できます。

amp : 大きいほど数値の増減がまします
freq : 周波数　大きいほど小刻みになります
decay : おさまるまでの時間　大きいと短い時間でおさまり、小さいと長い時間ブルブルします

また、最後の行の「/」を、「*」に変更すると、これまた違った種のブルブルになります。

AE 値の参照

エクスプレッション
他レイヤーの値を参照。

同じ動きをさせたり、タイミングをずらして追従せたり、色々なことが出来ます。

例）

レイヤーを２つ用意します 

 緑のレイヤーに上下移動のキーフレームをつけます




青レイヤーの位置にエクスプレッションを追加し、縄のアイコンから緑レイヤーの位置にドラッグします。これで青が緑の位置を参照したことになり、同じ位置に移動し追従します。

式は
thisComp.layer("グリーン 平面 1").transform.position

「thisCopm.layer」「グリーン　平面1」の部分を書き換えれば、別のコンポジションのレイヤーからも参照できます。

式を下の通りに書き変えてみます

A=hisComp.layer("グリーン 平面 1").position;
[position[0].A[1]]

青は緑のy位置だけを参照する事になり、x移動は自由になります。

１行目で変数Ａにグリーン平面の位置を代入しています。
２行目で、ｘにposition[0]と書く事で自身のｘ値をそのまま、ｙにはA[0]と書く事で緑のｙ値を指定しています。

式を下の通りに書き変えてみます

offset=3;
offTime=(time-offset/30);
A=thisComp.layer("グリーン 平面 1").position.valueAtTime(offTime);
[position[0],A[1]]

これで、青が緑のｙの動きを３コマ遅れで 追従します！遅れるコマ数は１行目のoffset=の後の数値で指定できます。


３行目の値の参照の後に「.valueAtTime(offTime);」という文が足されていますが、
この「.valueAtTime（数値）」は、指定した数値の時間の値を参照できるという優れものです。
数値に1と入れれば、コンポジションの１秒目（フレームなら30）の値を持ってきてくれます。
この例では()の中に offTime つまり、現時間+１行目で指定したコマ数を入れているので、常に３コマ時間をさかのぼって値を参照しています。

青レイヤーをいっぱいコピーして、エクスプレッションの
offset = ○
だけを少しずつ書き換える事で、波打つように追従させるアニメーションが出来ます。
実際にキーフレームを持っているのは緑だけなので、編集も楽チンです。

AE テキストで現在のフレームを自動表示

ムービーのはじっこにフレームナンバーやタイムコードを入れたいことって結構あると思います。
そんな時、新規平面を用意しテキスト - タイムコードを使う方法もありますが、文字がアルファで抜けてなかったり、無駄な平面が増えたりとあまり良い事がありません。

新規テキストを作成し、ソーステキストにエクスプレッションを適用し下記文をコピペすれば見た目も美しく簡単かもしれません。

-- フレームの場合 --
timeToFrames(t = time + thisComp.displayStartTime, fps = 1.0 / thisComp.frameDuration, isDuration = false)

-- タイムコードの場合 --
timeToTimecode(t = time + thisComp.displayStartTime, timecodeBase = 30, isDuration = false)

また、フォント、塗り・線　などお好みに設定したうえで、上の画像のようにレイヤーの「テキスト」を選択した状態で、アニメーションプリセットを保存すれば、次回からは　新規テキスト作成　-　アニメーションプリセットの適用 の２ステップで同じ状況を再現できます。


--余談--
ソーステキストのエクスプレッションは他のレイヤーの数値を引っ張ってくれば、

こんな事も出来たりと、楽しいです。
ＡＥの性質上数値の上下が逆になってますが・・・

AE タイヤの自動回転

車体レイヤーの移動距離にしたがって、タイヤを自動で回転させるエクスプレッションです。

まずフォトショップでレイヤーに分かれたＰＳＤを用意します。

ＡＥに　「コンポジション-レイヤーサイズを維持 」で読み込みます。
レイヤーサイズを維持しているので、タイヤはそれぞれの直径サイズになっています。

 タイヤ「front」「back」の親を「body」にします。
「body」の位置にキーフレームを打ち、移動します。

タイヤ「front」「back」の回転にエクスプレッションを追加し、下記の文をコピペします。

d=width;
pi=Math.PI;
circ=d*pi;
rot=360/circ;
movex=thisComp.layer("body").transform.position[0];
rot*movex;

プレビューするとタイヤが回転しているのが確認できます。

----エクスプレッションの補足---

赤字のアルファベットは変数であり、好きな名前をつける事が出来ます。 

青文字は各行の説明

d=width;　　　　　　　←　width(レイヤー自身の横幅ピクセル)を変数dに代入

pi=Math.PI;　　　　　←　MathPI(円周率関数)を変数piに代入

circ=d*pi;　　　　　　←　dとpiをかけた数値を変数circに代入、つまりタイヤの円周がピクセルで入っています

rot=360/circ;　　　　←　360をcircで割った数値を変数rotに代入

movex=thisComp.layer("body").transform.position[0];　　　←　「body」の位置xを変数movexに代入

rot*movex;　　　　　←　rotとmovexをかけた数値を最終的な回転とする

別のプロジェクトでこの文を使いまわす場合は、5行目の("body")を書き換えるだけでＯＫです。

ちなみに、エクスプレッションを編集し易くする為に変数を使用してますが、シンプルに

movex=thisComp.layer("body").transform.position[0];
(360/(width*Math.PI))*movex;

の2行でも同じ動作をします。