記事内に広告が含まれる場合があります

AE!After Effectsのエクスプレッション/カウントダウンのスクリプト!

After Effects

AEのエクスプレッションってJavaScriptもどきですね。JavaScriptは多少かくため理解が早く助かりまいた。

AE!After Effectsのエクスプレッション

最もベーシックな方法は次のとおりです。

三角形(展開ボタン)> ソーステキスト > 右クリック > エクスプレッションを編集

ソースを追加します。

エフェクト > エクスプレッション > スライダー制御

みたいな追加方法もあります。

カウントダウンのスクリプト!

var start_time = 3;  // 開始時間(秒)
var end_time = 0;    // 終了時間(秒)

// レイヤーがタイムライン上で始まってからの経過時間を計算
// time: AEの内部変数、タイムライン全体の時間(秒)
// inPoint: AEの内部変数、このレイヤーが始まる時間(秒)
var current_time = start_time - (time - inPoint); // 現在のカウントダウン時間

// 最初のフレームに3が表示されてしまうため2に書き換える
if (Math.abs(time - inPoint) < 1/30) {  // 30fps
    current_time = 2; // 最初のフレームでは"2"を強制表示
}

// カウントダウン終了後の処理
if (current_time <= end_time) {
    current_time = end_time;
}

// 時間を表示形式にフォーマット
const minutes = Math.floor(current_time / 60);
const seconds = Math.floor(current_time % 60);

// 10未満(0〜9秒)の場合に前に "0" を追加
const formattedSeconds = (seconds < 10) ? "0" + seconds : seconds;

`${minutes}:${formattedSeconds}`

0:02から0:00に変化するスクリプトです。

単純なものですけど、どうしても最初の1フレームだけ0:03という数字が表示されてしまうのが困ったため、少し対応を入れました。constも使えるようです。

あとはMathの意味がわかれば楽勝です。

秒ベースの文字の切り替え

const alphabets = "abcdefghijklmnopqrstuvwxyz".split("");
const duration = 1;  // 1秒ごとに切り替え
const index = Math.floor(time / duration) % alphabets.length;
alphabets[index];
  • .split("")メソッドで1文字ずつの配列に変換しています。結果としてalphabetsには["a", "b", "c", ..., "z"]という26文字の配列が格納されます。
  • timeduration(1秒)で割り、経過した間隔の数を計算
  • Math.floor()で小数点以下を切り捨てて整数化

フレームベースの文字の切り替え

const alphabets = "abcdefghijklmnopqrstuvwxyz".split("");
const frameCount = time / thisComp.frameDuration;
let frameIndex = Math.floor(frameCount / 10); // 10フレームごとに切り替え
frameIndex = frameIndex % alphabets.length;
alphabets[frameIndex];
  • thisComp.frameDurationは1フレームの時間(秒数)を表しており、例えば30fpsの場合は約0.033秒です。この計算により、経過したフレーム数が得られます。
  • フレーム数を10で割って小数点以下を切り捨てることで、10フレームごとに1増加する値を生成しています。これにより文字の切り替えが10フレームごとに行われるようになります。
  • アルファベットは26文字なので、10フレーム単位なら、3(1秒あたり3文字)*8(秒)=24 +20フレーム必要。8分20秒となる。

Y回転

アルファベットのアニメーションにプチアニメーションを追加するとしましょう。

  • 3Dレイヤーのチェック
  • プリコンポーズしてアンカーポイントを中央あわせする

上記は前提条件です。

// Y回転プロパティに適用するエクスプレッション
const frameCount = time / thisComp.frameDuration;
const frameDuration = 10; // 各アルファベットが表示されるフレーム数
const cycleFrame = frameCount % frameDuration; // 現在のサイクル内のフレーム
const rotationDegree = (cycleFrame / frameDuration) * 360; // 0〜360度
rotationDegree;

cycleFrameは値は常に0〜9の範囲になります 例:frameCountが23なら、cycleFrameは3(23÷10=2余り3

うずまき(@)みたいなアイコンピックウィップ

うずまきみたいなアイコンをおす。うずまき(@)みたいなアイコンはウィップつまり、鞭を表現しているようです。ピックウィップはプロパティとプロパティを鞭のように繋いでいくこと、すなわちプログラミングでいう参照する仕組みです。

AdobeのJavaScriptおすすめ本

本もでているんですね。

著:古籏 一浩, 著:あかつきみさき
¥4,257 (2023/09/02 22:35時点 | Amazon調べ)
著:古籏 一浩
¥3,168 (2023/09/02 22:26時点 | Amazon調べ)

Kindle Unlimitedなら本自体は0円です。月額980円ですが、たまに2ヵ月99円です。

もしくは普通のJavaScriptを学べば理解が早いです。

参考になれば幸いです。

コメント

タイトルとURLをコピーしました