べたな事例だが、jsonによる字幕（テロップ）表示をスクラッチでやってみる。
やりたい事と事前知識
やりたい事
- 外部jsonファイルにテロップの表示時間と表示内容を記載する。
- 字幕の表示処理は外部javascriptによるエクスプレッション処理。
- いろいろなAEプロジェクトで使いまわせる仕組みにする。
- 今回は字幕のアニメーション演出なしで、出たり消えたりするだけ 。
※ 次の記事で文字が表示されたり消えていく演出まで対応した。
技術的な事前知識
- 外部javascriptは歴史的経緯によりjson形式のjsxファイルに書く ややこしい。
- どうやらaerenerコマンドやメディアエンコーダーでの動画書き出しではjsonなどを読み込んだ処理は無視されてしまうらしい 。
- AEから直接書き出すか、afterfxコマンドを使う必要がある。
- テロップの記述はcsv経由だと処理が面倒なのでjsonを使う。
- jsonは（一般的な例とは異なり）タイムラインに配置しない。expressionから直接フッテージにアクセスする。
メディアエンコーダーでもダメなのは最近気づいた。
関連記事
実装例
以下のjsxファイルとjsonを用意する。
{
get_telop: function(telops, time=null) {
if(time === null){
time = thisLayer.time;
}
for(i in telops) {
var o = telops[i];
var start = o[0];
var duration = o[1];
var message = o[2];
if(start <= time && time < start + duration){
return message;
}
}
return "";
}
}{
"telops":[
[2, 3, "Hello world"],
[7, 3, "Hello computer"],
[12, 3, "Hello tommorow"],
[17, 3, "fin"]
]
}jsonの記述内容はメッセージ表示開始時間(数)、表示秒数、表示メッセージ、の配列。
これらをライブラリに読み込む。もしそれらをタイムラインに配置したコンプが自動作成されても使わないので無視するか削除する。
メインコンプ上にテキストを適当に配置し、テキストの内容として下記のエクスプレッションを記述する。
footage('telop.jsx').sourceData.get_telop(footage('telop.json').sourceData.telops);これだけで指定した秒数でテロップが画面に表示されるようになる。
注意点
- 先にも書いたが2022/12現在、メディアエンコーダーでのエンコードやaerenderコマンドでのエンコードにはjsonの動的な内容は反映されないので、AE内でレンダリングするかafterfxコマンドを使う。
- jsonファイルのバリデーションが結構厳しいので、厳格な記述をする必要がある。なんならもう全部jsxファイル内に書くとよいのではないか？
ダウンロード
ファイルはgitにも上げておいた。aeプロジェクトも上がっている。
今回は以上。地味記事このうえない。続きは演出がつくのでちょっとましになる予定。
Related Posts
Houdini(python)：マテリアルの割り振りを頂点カラーに移し替える。
Houdini(vex):ある軸方向に対する最大最小のポイントを取得する。
AfterEffectsのExpressionに関するweb上の情報の新旧を見分ける
2022年度版AfterEffectsのスクリプトログ操作
データ駆動型動アニメのバッチレンダリング時はaerender.exeじゃなくafterfx.exeを使おう
AfterEffectsのスクリプトリファレンスは2つある。
Houdini：バックアップフォルダの一覧を作るpython script
AfterEffects：読み込んだcsvの行数を得る
