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

はじめまして、この記事は

エクスプレッションを普段使わない人に少しでも興味を持ってもらう
ある程度エクスプレッションを使う人にシェイプレイヤー上でのエクスプレッションに便利な関数を紹介

このふたつを目的にしております。
したがって、シェイプレイヤーとエクスプレッションを使えばこんな映像が作れるようになる！
といった事をメインとして紹介する記事ではありません。

エクスプレッションをバリバリ（死語）使うという人は
propertyGroup関数を知らない人意外はあまり読む意味が無いかとは思います。

この記事における最終目標

vimeo
この記事ではこのような映像を最終的に作る事を目標にしております。
音声は切って書き出してありますが音声（音量）に応じてバーが自動で動きます。

長くなってしまいましたので記事を分割して説明してあります。

1:左揃えで動くバー

まずは左揃えで動くバーを作ります。

新規->シェイプレイヤー
まずは空のグループ作ります。
そしてグループ名を『G_01』とします。
- グループ名は何でも良いのですが、グループを複製した際に数字が02もしくは002となるようにつけます。
グループ内に長方形パス、グループの外に塗りを追加します。
長方形パスの位置にエクスプレッションを設定します。

content(“G_01″).content(“長方形パス 1″).position
と元からあるのでそれに追記して
content(“G_01″).content(“長方形パス 1″).position + [content("G_01").content("長方形パス 1").size[0]/2, 0]
とします。追記する際はエクスプレッションピックウイップを使用すると便利です。

左揃えになってることを確認します。
- この状態で長方形パスのサイズのXパラメータをいじると左端の位置が変わらずに横幅だけが動くことが確認出来ます。

これで左揃えで動くバーはひとまず完成です。

2:グループの複製（問題提起）

先ほどのグループを複製して数をバーの数を増やしていこうと思います。

『G_01』を選択した状態でCtrl+D（複製）
『G_02』が出来上がると思いますが、何かおかしい状態になっています。
『G_02』のトランスフォームの位置をずらして観察してみるとこのようになっています。

このように位置がずれています。

今回欲しい絵はこのように左端がそろっている絵です。

この状態で『G_01』と『G_02』の長方形パスのサイズのXパラメータをそれぞれいじるとさらに変な動作をします。

3:エクスプレッションにおける、絶対パス（問題解説）

何故上記のような問題が起きたのかというと、答えは先ほどのエクスプレッションにあります。
G_01->長方形パス 1->位置
content(“G_01″).content(“長方形パス 1″).position + [content("G_01").content("長方形パス 1").size[0]/2, 0]
G_02->長方形パス 1->位置
content(“G_01″).content(“長方形パス 1″).position + [content("G_01").content("長方形パス 1").size[0]/2, 0]

複製元のエクスプレッションと複製後を見比べてみるとわかるのですが
G_01とG_02の両方ともcontent(“G_01″)となっております。
なのでG_02を左揃えにしたくても、計算に必要な値をG_01の方から参照しようとしているのでおかしな事になってしまいます。

それではG_02のエクスプレッションを書き換えれば問題解決するのか？
と言うとそういうわけではありません。
正直な所、複製の数が2～3個ほどであればそれでも良いのですが、
複製するたびに書き換えると言う事を10個、100個単位でやるとなると大変です。

なのでエクスプレッションにおいて参照するパラメータを現在のような絶対パスではなく

絶対パスイメージ

相対パスイメージ

このような相対パスで指定してしまうことにより複製した際に書き換える必要性が無くなります。

4:エクスプレッションにおける、相対パス（問題解決）

まずG_02を消してG_01のエクスプレッションを書き換えて行きます。
G_01->長方形パス 1->位置
content(“G_01″).content(“長方形パス 1″).position + [content("G_01").content("長方形パス 1").size[0]/2, 0]
まずは前半部分の
content(“G_01″).content(“長方形パス 1″).position
を
thisProperty
と書き換えます。ずいぶんとすっきりしました。
『thisProperty』とはそのエクスプレッションが記述されているパラメータを参照する変数です。

そして後半部分の
+ [content("G_01").content("長方形パス 1").size[0]/2, 0]
を
+ [propertyGroup(1).size[0]/2, 0]
と書き換えます。
『propertyGroup』とはそのエクスプレッションが記述されているパラメータから相対値でいくつ前のパラメータの値を参照するかを指定する関数になります。

変更前
content(“G_01″).content(“長方形パス 1″).position + [content("G_01").content("長方形パス 1").size[0]/2, 0]
変更後
thisProperty + [propertyGroup(1).size[0]/2, 0]
このようにすっきりしました。これでこのエクスプレッションは絶対パスでの参照ではなく相対パスでの参照に変わりました。
これでG_01を複製してもG_02はG_02のパラメータを参照して左揃えになっています。

part1はここまでになっています。
続きはpart2で説明していきます。
ようやくオーディオレイヤーの出番です。
続きはこちら。

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

この記事の投稿者について：創志

ボカロPVとか作ってるかもしれません。

創志のウェブサイト

創志の投稿一覧

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

この投稿への反応のRSS トラックバックURL Twitterでつぶやく（URLを挿入して投稿画面に飛びます）

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

新着記事 : シェイプレイヤーとエクスプレッション　オーディオと連動するバーpart1 http://t.co/2oUlgSz5
2 めいろ（だいたいニート） 12月 30th, 2012 at 13:43

シェイプレイヤーとエクスプレッション　オーディオと連動するバーpart1 | AEP Project http://t.co/aD44yD2i
3 もう、ダメ 12月 30th, 2012 at 13:44

【AEチュートリアル】シェイプレイヤーとエクスプレッションオーディオと連動するバーpart1 http://t.co/eOJE5GKv
4 CGWORLD.jp 12月 30th, 2012 at 16:00

新着記事 : シェイプレイヤーとエクスプレッション　オーディオと連動するバーpart1 http://t.co/2oUlgSz5
5 コン@Ship1 12月 30th, 2012 at 16:13

新着記事 : シェイプレイヤーとエクスプレッション　オーディオと連動するバーpart1 http://t.co/2oUlgSz5
6 古橋宏 12月 31st, 2012 at 02:25

シェイプレイヤーとエクスプレッション　オーディオと連動するバーpart1 http://t.co/f4iYl6ZJ #aejp via @AEUSERS
7 masatchi51 1月 1st, 2013 at 12:58

http://t.co/M4JJd8x3　memo
8 かれをばな 1月 1st, 2013 at 21:31

NowBrowsing: シェイプレイヤーとエクスプレッション　オーディオと連動するバーpart1 | AEP Project – http://t.co/izfNK9DT
9 Creators' Heads 1月 7th, 2013 at 01:50

AEP ProjectのAE事例紹介で、「シェイプレイヤーとエクスプレッションオーディオと連動するバーpart1」が紹介されています。エクスプレッションに少しでも興味を持ってもらうこと、便利な関数を紹介することを目的としています。
http://t.co/jztyWyvg
10 小澤昭彦 1月 7th, 2013 at 04:02

AEP ProjectのAE事例紹介で、「シェイプレイヤーとエクスプレッションオーディオと連動するバーpart1」が紹介されています。エクスプレッションに少しでも興味を持ってもらうこと、便利な関数を紹介することを目的としています。
http://t.co/jztyWyvg
11 Janay 11月 17th, 2016 at 11:03

I told my greamdothnr how you helped. She said, “bake them a cake!”

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