ハレとケ

システム、インフラ、AI、デザイン

【ExtendScript】After Effectsでテキストを変更、横幅に合わせてフォントサイズを変える





最終的なコードはこちら

// updateTextAndFontSize.jsx

#include "./TextLayerHandler.js";

var text_layer1 = new TextLayerHandler(4, 1);
var text_layer2 = new TextLayerHandler(5, 1);
var text_layer3 = new TextLayerHandler(6, 1);

text_layer1.updateText("first. shortest!");
text_layer2.updateText("second. little bit longer");
text_layer3.updateText("third. longest! very small characters");

text_layer1.changeFontSizeBasedOnWidth(32, 92, 980);
text_layer2.changeFontSizeBasedOnWidth(32, 92, 980);
text_layer3.changeFontSizeBasedOnWidth(32, 92, 980);
// TextLayerHandler.js

function TextLayerHandler(item_index, layer_index) {
    this.item_index  = item_index;
    this.layer_index = layer_index;

    this.__init__();
}

TextLayerHandler.prototype.__init__ = function() {
     this.compo     = app.project.item(this.item_index);
     this.layer     = this.compo.layers[this.layer_index];
     this.tprop     = this.layer.property("Source Text");
     this.tdocument = this.tprop.value;
}

TextLayerHandler.prototype.updateText = function(new_text) {
    this.tdocument.text = new_text;
    this.tprop.setValue(this.tdocument);
}

TextLayerHandler.prototype.updateFontSize = function(new_size) {
    this.tdocument.fontSize = new_size;
    this.tprop.setValue(this.tdocument);
}

TextLayerHandler.prototype.changeFontSizeBasedOnWidth = function(size_min, size_max, limit_width) {
    var self = this;

    // 文字サイズを size_max にセット
    this.updateFontSize(size_max);

    fitFontSize();

    // 文字サイズを size_max から1pxずつ、
    // textレイヤーの横幅が limit_width 以下になるか、
    // size_min まで引いていく再帰関数
    function fitFontSize() {
        if (self.tdocument.fontSize <= size_min) return;
        if (self.layer.sourceRectAtTime(0, false).width < limit_width) return;

        // 文字サイズを1px引く
        self.updateFontSize(self.tdocument.fontSize - 1);

        fitFontSize();
    }
}



スクリプトを起動してから、文字を変更、文字サイズも横幅に合わせて変更されるまで。




テキストレイヤー周りの基本

TextDocument オブジェクトのプロパティで色々と設定できます。
TextDocument はテキストレイヤーの "Source Text" プロパティオブジェクトのvalueから取得できます。

var tprop     = app.project.item(index).layer[index].property("Source Text");
var tdocument = tprop.value;

property() - After Effects スクリプトリファレンス

TextDocument object - After Effects スクリプトリファレンス




テキストの更新

TextLayerHandler.prototype.updateText = function(new_text) {
    this.tdocument.text = new_text;
    this.tprop.setValue(this.tdocument);
}

text - After Effects スクリプトリファレンス





フォントサイズの更新

TextLayerHandler.prototype.updateFontSize = function(new_size) {
    this.tdocument.fontSize = new_size;
    this.tprop.setValue(this.tdocument);
}

fontSize - After Effects スクリプトリファレンス




フォントサイズをテキストレイヤーの横幅に合わせて変更

テキストのサイズも、文字数(というより、テキストレイヤーの横幅)に合わせて、動的に変更させる。


テキストレイヤーの横幅は sourceRectAtTime(0, false).width で取得できます。
sourceRectAtTime(timeT, extents) はタイムインデックス(timeT)での矩形を取得するので、キーフレームを特に打ってない場合は 0 とかで。
extentsはテキストレイヤーの場合は特に関係ないのでfalseにしています。

TextLayerHandler.prototype.changeFontSizeBasedOnWidth = function(size_min, size_max, limit_width) {
    var self = this;

    // 文字サイズを size_max にセット
    this.updateFontSize(size_max);

    fitFontSize();

    // 文字サイズを size_max から1pxずつ、
    // textレイヤーの横幅が limit_width 以下になるか、
    // size_min まで引いていく再帰関数
    function fitFontSize() {
        if (self.tdocument.fontSize <= size_min) return;
        if (self.layer.sourceRectAtTime(0, false).width < limit_width) return;

        // 文字サイズを1px引く
        self.updateFontSize(self.tdocument.fontSize - 1);

        fitFontSize();
    }
}

sourceRectAtTime() - After Effects スクリプトリファレンス



THAT'S IT !



f:id:kijnmb-1110:20170709175637p:plain