2012-12-30

シェイプレイヤーとエクスプレッション オーディオと連動するバーpart2

part1からの続きです。
前回の記事はこちら。

5:音声レイヤーとの連携

前回の続きからもし複製して『G_02』を作ってる場合は『G_02』を消してください。
ここまできてようやく音声との連携の話になります。
  • 連携したい音声ファイルをコンポジション内に読み込みます。
  • 音声ファイルを右クリック->キーフレーム補助->オーディオをキーフレームに変換
    • 『オーディオ振幅』というレイヤーができ、エフェクトに『左チャンネル』『右チャンネル』『両方のチャンネル』という情報が入っています。
    • 今回使うのは『両方のチャンネル』のみなので『左チャンネル』と『右チャンネル』は消してしまってかまいません。
  • シェイプレイヤー->コンテンツ->G_01->長方形パス 1のサイズを[0, 任意の数]にしてからエクスプレッションを記述します。
tParam = thisComp.layer(“オーディオ振幅”).effect(“両方のチャンネル”)(“スライダ”)
thisProperty + [tParam * 10, 0]

これで簡単にオーディオと連携して動くようになりました。
『tParam』は参照した情報を入れる変数です。
2行目のtParamを『* 10』としているのは入力された値だと変化量が小さいので大きくしています。(欲しい絵によって任意の数に置き換えてください)
この状態で複製をすると全てのレイヤーが同じ横幅になってしまうので次は変化を加えたいと思います。

6:エクスプレッションにおける時間の参照

まずは時間を参照できるエクスプレッションに書き換えます。
tParam = thisComp.layer(“オーディオ振幅”).effect(“両方のチャンネル”)(“スライダ”)
thisProperty + [tParam * 10, 0]

これを
tParam = thisComp.layer(“オーディオ振幅”).effect(“両方のチャンネル”)(“スライダ”)
thisProperty + [tParam.valueAtTime(time) * 10, 0]

と書き換えます。
『valueAtTime』とはそのパラメータの時間を指定して、その時間における値を参照する関数になります。
timeとは現在の時間を表す固定の変数です。
このまま複製をしても、横幅が一緒になるので次はバーによってtimeが変わるようにしていきます。

7:グループ名からのパラメータの取得

バーごとに参照する時間を変える為には、バーごとに固有の数字を得る必要があります。
そこでようやくグループ名を『G_01』とした意味が出てきます。
エクスプレッション内でグループ名を参照して『G_01』の『1』という数字を抽出したいと思います。
tID = propertyGroup(3).name.slice(2, 4)
tParam = thisComp.layer(“オーディオ振幅”).effect(“両方のチャンネル”)(“スライダ”)
thisProperty + [tParam.valueAtTime(time) * 10, 0]

『name.slice』はそのパラメータ(もしくはレイヤー)の名前から特定の部位を抽出する関数です。
この場合(2, 4)とする事で『01』が抽出され、数字的には『1』として扱われます。
ここで注意すべきはpropertyGroupの値は2ではなく3です。
これで『tID』『1』という数字が抽出されます。
これを用いて参照する時間を変えたいと思います。
tID = propertyGroup(3).name.slice(2, 4)
tDeltaTime = time – framesToTime(tID – 1)
tParam = thisComp.layer(“オーディオ振幅”).effect(“両方のチャンネル”)(“スライダ”)
thisProperty + [tParam.valueAtTime(tDeltaTime) * 10, 0]

2行目にて『tID』を用いて参照する時間を作ります。
framesToTimeはフレーム数を指定すると時間に変換してくれる関数です。
『tID – 1』としているのは『G_01』においては現在の時間を参照してもらいたいからです。
4行目の指定していた時間を2行目で作った変数に置き換えて完成です。
これで複製を行うことで自動的に参照する時間が変わってくれます。
ここでついでに『G_01』のトランスフォームの位置にもエクスプレッションを追加して
tID = propertyGroup(2).name.slice(2, 4)
tParam = (tID -1) * 100
thisProperty + [0, tParam]

このようにすると複製した際に自動で位置が変わってくれます。
ここで注意すべきは1行目のpropertyGroupの値は先ほどと違い3ではなく2です。ややこしいです。

8:複製と全体の調整

7にて複製元は完成したので、『G_01』を必要な数だけ複製して全体の座標や色などを調節すると完成です。
本筋とはずれていて長くなるので今回はしませんでしたが
エクスプレッション内の定数などを
シェイプレイヤーにエフェクト->エクスプレッション制御->スライダ制御等で
コントロールできるように参照させておくと後々に調整が楽になります。

9:アイディア小ネタ

今回は左揃えにしたバーが広がる音声にあわせて動くというのをやりましたが、
同じようにしてバーが広がるではなくバー自体が動く。
左右の音声を別にして広がったり動いたり。
回転させたり。
色々ネタはあると思います。
シェイプレイヤーとエクスプレッションを絡ませると出来る事は増えていくと思います。

10:反省+おまけ(ここ読む必要はないですよ)

ある程度補足しながら書きましたが長すぎてあまり初心者向けにならなかった気がしますorz
その2を書くことがあるのかはわかりませんが、書いた時はよろしくお願いします。
おまけに今回作ったAEPおいておきます。
エクスプレッション制御などを使ってこういう風にしておくと調節はしやすくなりますというサンプルとして。



タグ : [タグを追加する]


この記事の投稿者について:創志
ボカロPVとか作ってるかもしれません。

フィードバック

1 Star2 Stars3 Stars4 Stars5 Stars
(評価回数:1 , 平均:5.00)
Loading...Loading...

この記事に対する 3 の反応があります


  1. 1 AEUSERS(AEP Project) 12月 30th, 2012 at 13:42

    新着記事 : シェイプレイヤーとエクスプレッション オーディオと連動するバーpart2 http://t.co/hy6XFOyW

  2. 2 higematsu 1月 7th, 2013 at 17:22

    投稿されているエクスプレッションはCS4以降では、エラーになります。
    propertyGroupの前にthisProperty.を追記すればOKです。
    例:[propertyGroup(1).size[0]/2, 0]
      [thisProperty.propertyGroup(1).size[0]/2, 0]

    CS5以降は”スライダ”も”スライダー”に書き換える必要がありますね。

  1. 1 シェイプレイヤーとエクスプレッション オーディオと連動するバーpart1 | AEP Project Pingback on 12月 30th, 2012 at 22:46

特集