LoginSignup
1
3

More than 5 years have passed since last update.

AE テキストの色や線幅をjsonで一括管理

Last updated at Posted at 2018-12-07

※2019/01/10記事最後に更新あり

やりたい事

今回大量のテキストがあるのでテキストの管理をjsonで行う。

管理する内容は
テキストの塗り
テキストの線の塗り
テキストの線幅
レイヤースタイル等々

内容

①jsonファイルに設定パラメーターを書いておく。内容はこんな感じ↓

{
    "dropShadowSetting":{
        "spred":20,
        "size":20
    },
    "textSetting":{
        "fill":"f0f8ff",
        "stroke":"f0f8ff",
        "LineWidth":0
    }
}

②テキストレイヤーにアニメーターを追加。
・塗りのカラー
・線のカラー
・線幅
今回はこの3つ

③アニメーターにエクスプレッションを書く。
まず色のエクスプレッション

//まずはjsonのデータを受け取る。
stroke = footage("common.json").sourceData.textSetting.stroke;
//↑これでjsonファイルのstrokeに格納された「f0f8ff」を取ってくる。

//次にRGBに変換するメソッド
function colorSetToRgb(set){
        var bigint = parseInt (set, 16);
        var r = (bigint >> 16) & 255;
        var g = (bigint >> 8) & 255;
        var b = bigint & 255;

        return [r/255,g/255,b/255];
   }

//メソッドを呼び出してjsonのデータを処理する
myClolor = colorSetToRgb(stroke);
//↑これでaの中にはRGBの3次元の配列が格納されている。
//ただこれではまたRGBの3次元配列なのでAEでは使えない。AEでは4次元が必要で、[R,G,B,Alph]のAlphが必要。

//ここでAlphを配列にプッシュする。
myClolor.push(0);

//これで完了mycolorが[r,g,b,a]の4次元になっています
myClolor 

線幅に関しては簡単でそのままjsonのデータを取ってくるだけです。
アニメーター線幅にエクスプレッションを書く。

footage("common.json").sourceData.textSetting.LineWidth

このような感じで残りのレイヤースタイルのパラメーター等も設定できます。
jsonで行うとすごーく便利ですね。

あとからちょっとドロップシャドウちょっと変えてなどと言われてコンポジション開けて
テキストレイヤー選択してパラメーター開いて・・・
そんなのを何十・何百もあった日には・・・

#最後に
いまだにAEはテキストパネルのパラメータはextendscriptからしかいじらしてもらえないですね。
これもExpressionで可能になれば、便利になるんですけどね。

今回の内容はjsonの使い方で以前にも似たような記事で紹介しましたが、今回はカラー設定で少し工夫が必要だったので
記事を書いてみました。
ぜひ参考にしてみてください。

2019/01/10追記内容

エクスプレッションのリファレンスを見たのですが、このような記事を発見

16 進数から RGB へのカラー変換メソッド(エクスプレッションのリファレンス)
この hexToRgb() カラー変換メソッドは 16 進カラー値(例: #FF00FF)を RGBA カラー値に変換します。これは、カラーパラメータを JSON や CSV/TSV データソースでは 16 進文字列として表現されるカラー値にリンクするのに役立ちます。

エクスプレッションメソッド:

hexToRgb(hexString) は 16 進トリプレットスペースのカラーを RGB に、または 16 進カルテットスペースを RGBA スペースに変換します。16 進トリプレットでは、アルファはデフォルトで 1.0 になります。

パラメーター:

hexString 数字または A~F の文字のみを含む 16 進トリプレット(6 桁、アルファチャンネルなし)またはカルテット(8 桁、アルファチャネルを含む)を表現する文字列。オプションの先頭文字の 0x、0X、または # は無視されます。8 桁を超えた文字は無視されます。
戻り値:

RGBA カラー値の配列。

例:

次のいずれもが [1.0, 0.0, 1.0, 1.0] を返します。

hexToRgb("FF00FF")
hexToRgb("#FF00FF")
hexToRgb("0xFF00FF")
hexToRgb("0XFF00FFFF") 注意:8 桁の 16 進カルテット:最後の 2 桁はアルファを 1.0 に設定します。

試してはないけど

環境がwindows7なのでAfter Effects CC (16.0)にアップデート出来ないため(泣)
After Effects CC (16.0)からhexToRgb()のメソッドが追加されたのですね。

なのでもっと簡単になりますね。
この記事は遠回りの方法として見てください(笑)
試しては無いのですがjsonから値を取ってきたとして
hexToRgb(stroke)でいけるかと。。。

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3