designlog●AfterEffects(AE)こんにちは、イマジカデジタルスケープの伊藤和博です。2019から、「エクスプレッションを使った点灯・点滅」をご紹介します。点灯・点滅するレイヤーは何でも構いませんが、点灯・点滅は「表示」に依存するため、考え方としては「点灯・点滅」したいタイミングで、レイヤー(ビデオスイッチ)かソロのONOFF、不透明度の0%と100%、マスクやトラックマットなどのONOFF、などが行えればよい、ということになります。今回は、不透明度の数値をエクスプレッションで操作することで、点灯・点滅したいと思います。点灯・点滅したい箇所に、ただキーフレームを追加するだけで、追加した箇所のみ点灯する、というのをご紹介します。いくつかのメソッドを組みわせて行いますが、それぞれのメソッドの説明も含めてご紹介したいと思います。●Math.abs(value)まずは、空のテキストレイヤーを使って、いくつかのメソッドをご紹介したいと思いますが、目的は「点灯したいタイミングで不透明度の数値を上げ、それ以外の時は、不透明度を0%にしておく」ようにしたいと思います。この「点灯したいタイミング」の箇所を、「任意にキーフレームを設定した箇所」にすれば、任意にキーフレームを設定した箇所でランダムに点灯できるようになります。最初にご紹介するのは、Math.abs()メソッドになりますが、そもそもMathとは、数値計算で扱うJavaScriptの組み込みオブジェクトで、Stringは文字、Numberは数字、Booleanはtrueやfalseなどの真偽値、などと同じような組み込み関数になり、数値の計算を目的としたものになります。absとは、アブソリュート(Absolute)を略したもので、プラスやマイナスなどを除いた数値の絶対値のことを指します。Math.abs(value)は、()の中にある値の絶対値を取得します。Number=数字じゃない)を返します。これによって、不透明度のトランスフォームは0~100まででマイナス値は無いため、仮にマイナスの値を取得した場合でも、正の値を返すことが可能になります。●nearestKey(t)ニアレストキー(nearestKey)は、そのまんま「近くのキー」の意味で、「()内に指定した値の最も近くのキー」のことを指します。そのため、このメソッドはキーフレームがないと何の値も返しません。キーフレームを入れただけでは、エラーは表示しませんが何の値も返しません。以下は、nearestKey(1)と書いていますが、これは「1番目のキーフレーム」のことを指しているだけです(このキーフレームは1秒ちょうどに停止キーを設定してます。)次に「()内に指定した値の最も近くのキー」の「何?」を指定しないと何も返ってきませんので、nearestKey(1).time、と時間を指定します。これで、「1番目のキーフレームの近くのキー時間」=「1番目のキーの時間」がテキストとして返ってきます。2秒ちょうど、3秒ちょうどなど、たとえ複数のキーフレームを設定しても、nearestKey(1).timeの場合は「1番目のキーフレームの近くのキー時間」を返します。この時、nearestKey(time).timeのように、()の中にtimeを入れると「現在の時間」となるため、「現在時間の近くのキー時間」を返すことになり、1秒ごとにキーフレームを設定すると、各秒15フレーム前後(1.5秒、2.5秒、3.5秒・・)を境に、次のキーフレームに再生ヘッドが近づくにつれて数値も上がっていきます。空のテキストレイヤーに、nearestKey(time).timeとだけ書き、レンダリングすると以下のようになります。現在の時間の近くのキーを表示するため、1、2、3・・となり、デュレーションは5秒で作っていますが29.97フレームのため、正確には4.97・・が表示されます(約5秒。単純に1秒ごとに1、2、3・・と数字が上がっているように見えますが、あくまでも、ニアレストキーですので、現在時間の近くのキーの値を取得しています。そこで、変動する何かの数値から、このニアレストキーの数値を足し算や引き算すれば、どの程度近づいたり遠ざかったりしているのか、変動している様子が数値でわかります。そこで今回は、このnearestKey(time).timeで得られる値を「現在の時間」から引き算し、現在の時間と近くのキーとの差分を取得します。エクスプレッションには、以下のように書きます。nearestKey(time).time;これを書きだすと以下のようになります(約5秒。キーから離れている時はマイナス値ですが、キーに近づくと徐々に0に近くなり、再生ヘッドとキーが合致すると0になります。そのキーから遠ざかっていくとプラス値になり、次のキーに近づくと(ちょうどキーとキーの中間付近で)マイナス値に転じ、また次のキーと合致すると0になる、というのを繰り返します。この数値の変化を不透明度のトランスフォームに利用しますが、不透明度にはマイナス値はありませんので、ニアレストキーで取得した値のうち、絶対値だけを利用するため、ここで得られる値を、Math.abs()メソッドの値として設定します。エクスプレッションには、以下のように書きます。nearestKey(time).time);これを書きだすと以下のようになります。マイナスが取れ、絶対値のみが取得できます。今回の場合は、およそ0から0.4程度の範囲を行ったり来たりする数値が取得できます(約5秒。2019】linearメソッドの記事内にある「linearメソッド」の見出し下を参照していただきたいのですが、ここで記載しているlinearメソッドと使い方が同じです。意訳としては、【何らかの値(この場合「t」の箇所)の最小値(この場合「tMin」の箇所)をvalue1に、最大値(この場合「tMax」の箇所)をvalue2に変換し、イーズアウト(運動の最後に向かってだんだんゆっくりに)する】になります。同様の使い方をするメソッドは、linearを含め以下の通りです。value2の箇所)は全て同じになります。今回はこのテキストレイヤーの不透明度に、以下のエクスプレッションを設定します。0);意訳としては、【現在の時間から、再生ヘッドに一番近い(不透明度に設定した任意の)キーフレームの値を引き算し、その値を絶対値に変換したものを変数aに入れ(ここまで1行目)、そのaの値が0だった場合は100を、0.1より大きければ0を返し、イーズアウトする】になります。不透明度にキーフレームを設定しないと、nearestKeyが値を取得してこないため、不透明度にキーフレームを設定しないと動きませんが、このエクスプレッションで、不透明度の任意の箇所にキーフレームを入れるだけで、そのキーの箇所だけ不透明度100になり、直後にすぐ不透明度0になることで、点灯しては消灯し・・というアニメーションにすることができます。レンダリングしたものが以下のものになります(約5秒。このエクスプレッションは、キーフレームさえ設定すれば、そのキーの箇所だけ特定の動作を連続させることができるため、例えばシェイプレイヤーを作成し、回転と不透明度に全く同じエクプレッションを適用し、任意の箇所にキーフレームを設定したとします。キーフレームの箇所のみ、100度回転して不透明度100%になり、キーフレームを過ぎると回転角度が0度に戻り、不透明度も0%になる、という動作を繰り返します。書き出すと以下のようになります(約5秒。同じことをキーフレームのみで行うと、最初不透明度0%の状態からスタートし、表示させたい箇所のみ不透明度100%のキーを入れてすぐ不透明度0%のキーフレームを設定し、そのキーをコピペしてアニメーションを量産する、という形になるかと思いますが、このエクスプレッションを使えば、任意の箇所にキーを入れるだけでピンポイントで動作を設定することが可能になりますので、ぜひ使ってみてください。コメントを受け付けていません。コメントを受け付けていません。コメントを受け付けていません。(3)@dezaroguさんのツイートデザログこのサイトについてデザログは、株式会社ボーンデジタルが運営する、デザインに関する様々な情報を発信するサイトです。雑誌『DTPWORLD』の流れをくむスタッフが、グラフィックデザイン、印刷、Webなど、デザインに関わる皆さんが気になる情報を発信します。本サイトについてのお問い合わせ、記事掲載の依頼は以下にご連絡ください。電話:03-5215-8663mail:designlog★borndigital.jp※メールをお送り頂く際は★を@に変更して下さい。WordPress.。