バリアブルフォント軸のスクリプトサポート

After Effects でバリアブルフォント軸にアクセスして制御する ExtendScript の一部について説明します。

After Effects では、ExtendScript を使用してバリアブルフォント軸にアクセスして制御できます。 つまり、テキストレイヤー全体で線幅傾斜などのプロパティの変更を自動化できるので、各設定を手動で調整することなく、動的なアニメーションを簡単に作成できます。

Font Object API

フォント軸へのアクセス

// テキストレイヤーからフォントオブジェクトを取得
var textLayer = comp.layer("My Text");
var sourceText = textLayer.property("Source Text");
var textDocument = sourceText.value;
var fontObject = textDocument.fontObject;

// フォントにバリアブル軸があるかチェック
if (fontObject && fontObject.designAxesData) {
    var axes = fontObject.designAxesData;

    for (var i = 0; i < axes.length; i++) {
        var axis = axes[i];
        $.writeln(&quot;Axis: &quot; + axis.name);
        $.writeln(&quot;  Tag: &quot; + axis.tag);
        $.writeln(&quot;  Min: &quot; + axis.minValue);
        $.writeln(&quot;  Max: &quot; + axis.maxValue);
        $.writeln(&quot;  Default: &quot; + axis.defaultValue);
    }
}

スクリプトによる軸アニメーターの追加

コンポジションとテキストレイヤーを作成

// コンポジションとテキストレイヤーを作成
var comp = app.project.items.addComp(&quot;Variable Font Demo&quot;, 1920, 1080, 1, 30, 30);
var textLayer = comp.layers.addText(&quot;Hello World&quot;);

バリアブルフォントにフォントを設定

// バリアブルフォントにフォントを設定
var textDocument = textLayer.property(&quot;Source Text&quot;).value;
textDocument.font = &quot;ShantellSans&quot;;  // または任意のバリアブルフォント名
textLayer.property(&quot;Source Text&quot;).setValue(textDocument);

テキストプロパティとアニメーターグループを取得

// テキストプロパティとアニメーターグループを取得
var textProp = textLayer.property(&quot;Text&quot;);
var animators = textProp.property(&quot;Animators&quot;);

新しいアニメーターを追加

// 新しいアニメーターを追加
var animator = animators.addProperty(&quot;ADBE Text Animator&quot;);
var animatorProps = animator.property(&quot;ADBE Text Animator Properties&quot;);

4 文字のタグを使用してバリアブルフォント軸を追加

// 4 文字のタグを使用してバリアブルフォント軸を追加
// 一般的なタグ:&quot;wght&quot;(線幅)、&quot;wdth&quot;(幅)、&quot;ital&quot;(斜体)、&quot;slnt&quot;(傾斜)
var weightAxis = animatorProps.addVariableFontAxis(&quot;wght&quot;);

キーフレームなしで値を設定

// 値を設定(キーフレームなし)
weightAxis.setValue(700);

キーフレームを作成

// またはキーフレームを作成
var italicAxis = animatorProps.addVariableFontAxis(&quot;ital&quot;);
italicAxis.setValueAtTime(0, 0);
italicAxis.setValueAtTime(2, 1);

利用可能な軸の確認

function getAvailableAxes(textLayer) {
    var sourceText = textLayer.property(&quot;Source Text&quot;);
    var textDoc = sourceText.value;
    var fontObj = textDoc.fontObject;

    if (!fontObj || !fontObj.designAxesData) {
        return [];
    }

    var axisInfo = [];
    for (var i = 0; i < fontObj.designAxesData.length; i++) {
        var axis = fontObj.designAxesData[i];
        axisInfo.push({
            name: axis.name,
            tag: axis.tag,
            min: axis.minValue,
            max: axis.maxValue,
            default: axis.defaultValue
        });
    }

    return axisInfo;
}

Adobe, Inc.

ヘルプをすばやく簡単に入手

新規ユーザーの場合