After Effects、エクスプレッション、テキストの下に画像

謎のプリン語る。
プログラミングの役立つ情報とか、どうでもいい雑談とか書いてます。
一人書く人増えました。

After Effects、エクスプレッション、テキストの下に画像

2014年01月30日

みやびプリン 140 87

144 144

※この記事は6年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。

さて、また、今回もAEです。
多分今回が最後のAEになると思う。

なぜなら、映像の仕事は今週いっぱいで、
来週からはなんとiPhoneアプリの勉強に入るからです。
僕がiPhoneアプリやることになるとは、夢にも思わなかったw
でも、勉強する時間もらえるなら、チャレンジしようじゃぁないか。若いんだから。

と、まぁ、前置き長いね。
本題に入ります。

題号の通り。
ようは、テキストの行が増えても、それに追従して下に画像を自動で配置するってやつ。

最初簡単だと思ったら、テキストの高さが取ってこれなくて四苦八苦した(泣)

今回はソースを書くだけでは、解決しないので、
技も交えながら解説したい。

まずは、新規適当なコンポジションを作る。
(サイズ、ワークエリア、その他全部適当でいいです)
そのコンポジションに新規テキストレイヤーを追加。
レイヤー名を、なんか関数っぽい名前にする。
(今回は、テキストの下に画像を配置するので、textUnderImageとでもしておこう)
んで、そのレイヤーの、ソーステキストのエクスプレッションに、下記を記載する。

'//テキスト下何px空けるか指定\
textPropaty.UnderP = 0;\
\
//対象テキストを取得\
textPropaty.targetText = thisComp. layer(targetLayer).text.sourceText.value;\
\
function imagePositioning(lineH,textCont,underP){\
var targetLine = textCont.split("\\r");\
\
var xPos = thisComp.width/2;\
var FixPosition = targetLine.length*lineH + underP;\
\
return [xPos,FixPosition];\
}'

次に、テキストと画像を配置するコンポジションに移り、
テキストを用意し、適当なレイヤー名にする。
そして、下に配置したい画像の、位置プロパティに、下記エクスプレッションを入れる。

//対象テキストレイヤーの名前を記入
var targetLayer = "画像の上のテキストレイヤー名";

var textPropaty = {
//行送りを指定
lineHeight : 30
}

eval(comp('先ほど作ったコンポジションの名前').layer('先ほど作ったテキストレイヤー名').text.sourceText.value);

imagePositioning(textPropaty.lineHeight,textPropaty.textCont,textPropaty.UnderP);

これで、テキストレイヤーの下に画像がぴったりつくはず。
ただ、何個か指定しなきゃいけない部分がある。

まず、行送りの指定。
"lineHeight : 30"の30の部分を変える。
これはテキストレイヤーに指定した行送りと同じ数値を入れる。
これは、自動でとってくることはできなかった・・・残念。

あと、テキスト下なんpxに画像がくるかの指定。
"textPropaty.UnderP = 0;\"の0の部分の数値を変えるとできる。

仕組みとしては、テキストの行数を取ってきて、
それ×行送り=画像の縦位置、となるようにしている。

今回のスクリプトは、エンドロールのテンプレートとか、文字数がしょっちゅう変わり、一番下に画像を配置したい時などに使えるだろう。

さて、このテキストレイヤーにエクスプレッションを書き、いろんなコンポジションから同じソースを使えるようにする技。
こっちも今回見てほしかった。
下記エントリーで紹介されてる技だ。

外部結合
http://www.da-tools.com/AE/exp/jisen/include.html

これを使えば、エクスプレッションの管理がぐんと楽になる。

めんどくさい動きの設定は、全部エクスプレッションに任せましょう。
映像クリエイターはそれでだいぶ楽になるはず。

ではまた。
次はきっとiPhoneアプリ開発の事書くんだろな~

「ムームードメイン」独自ドメイン - メイン

トラックバック(0)

トラックバックURL:

コメントする

ページトップへ戻る