シェイプレイヤーを大量に配置した場合など、動いているレイヤーの色を変えたいこと、ありますよね。えぇ。
では、まずは言葉にしてから、ExtendScriptに翻訳していきます。
- レイヤーの動きのスピードを取得する
- スピードが速いほど色を変えたい
いってみましょう。
言葉を式に変換していく
シェイプレイヤーの塗りにエクスプレッションです。
var minSpeed=0;// 色の変わり始める速度
var maxSpeed=2000;// この速度以上は色が完全に変わる
var maxSpeedColor=hexToRgb("ec0061");// [RRGGBB]
var posSpd=position.speed;
colorFromSpeed=linear(posSpd, minSpeed, maxSpeed, value, maxSpeedColor);レイヤーの動きが5行目のプロパティ.speedで取得できます。
そして、これまでもフェードイン・アウトをエクスプレッションで自動化するなどで登場したlinear()で「スピードがminSpeedからmaxSpeedにかけて、元の値からmaxSpeedColorに色を変化」させます。
色が変わり始める速度をminSpeedに格納しますので、ある程度スピードが乗ってから色を変えたい場合は0以外にしてください。最高速は上記では2000にしてあります。スピードが上限値以上はもう変化しません。
塗りの色に戻す値の指定は、本来[R,G,B,A]で0～1で指定しないといけませんが、やりにくいですから、普段使い慣れてる16進数のRRGGBBで指定したいです。ちょうどhexToRgb()というメソッドが準備されています。ここに文字列としてRRGGBBを入れれば、自動で[R,G,B,A]に変換してくれます。Aのアルファは省略できます。どの道塗りではアルファは無視されます。不透明度を指定したい場合はシェイプ>トランスフォーム>不透明度や、レイヤー>トランスフォーム>不透明度に似たエクスプレッションを入れてアルファを返さなくてはなりません。
これでレイヤーが移動した場合はスピードに応じて色が変わるようになりましたが、レイヤーの動きは位置だけではないですね。
アンカーポイントやスケール、回転も変化するなら色を変えたいと思います。
↓スケールに書き換えたパターン
var minSpeed=0;// 色の変わり始める速度
var maxSpeed=2000;// この速度以上は色が完全に変わる
var maxSpeedColor=hexToRgb("ec0061");// [RRGGBB]
var sclSpd=scale.speed;
colorFromSpeed=linear(sclSpd, minSpeed, maxSpeed, value, maxSpeedColor);ここで問題がおきます。scale.speedは動かないのです。
anchorPoint.speed;
rotation.speed;これはきちんと取得できます。アンカーポイント、位置、回転はキーフレームでアニメーションさせれば、速度に応じて1次元の数値をくれます。
それもそのはず、.speedは「キーフレームの速度」を取得するものですから、パーセントで扱われるスケールからは、スピードが取れないのですね。
スケールは別の手段を考えます。エクスプレッションのリファレンスを漁ると、移動量を取得するvelocityというものがありました。
scale.velocity;こうします。ただし、speedと比較してみると、
position.speed;
position.velocity;これで真っ直ぐ右に移動するキーフレームを打ってみたところ、speedのほうは100、となるのですが、velocityのほうは[100,0]と2次元で返ってきます。
velocityではx,yの2つを配列で返してくるので、分離して扱う必要がありますが、どちらも同じ数値なので都合がいいです。まぜこぜで計算できることがわかりました。なぜ配列を返すかは後述しています。
また注意点が、rotation.speedは反時計回りの場合、負のスピードになります。今回の指定速度の範囲で色を変えたい場合に都合が悪いので、Math.abs()で強制的にマイナスを取っ払い、符号を正に変えてしまいます。
Math.abs(rotation.speed);完成
では、全部を詰め込みましょう。
シェイプレイヤーの塗りに記述するエクスプレッション
var minSpeed=0;// 色の変わり始める速度
var maxSpeed=2000;// この速度以上は色が完全に変わる
var maxSpeedColor=hexToRgb("ec0061");// [RRGGBB]
var ancSpd=anchorPoint.speed;
var posSpd=position.speed;
var sclSpdX=scale.velocity[0];
var sclSpdY=scale.velocity[1];
var spnSpd=Math.abs(rotation.speed);
var lyrSpd=Math.max(ancSpd, posSpd, sclSpdX,sclSpdY, spnSpd);
colorFromSpeed=linear(lyrSpd, minSpeed, maxSpeed, value, maxSpeedColor);5～9行目まで、一旦アンカーポイント、位置、スケール、回転のスピードを取得します。
10行目でこれらの一番大きなものを見つけます。位置のスピードが落ち着いても、回転していればスピードの大きいものでトリガーを上書きしたいですよね。
これで、シェイプレイヤーのトランスフォームにキーフレームが打たれている場合は、アニメーションのスピードに応じて色が変わるエクスプレッション完成です。もし、他のプロパティに変化量に応じてエフェクトの値を大きくしたい、などの場合も、エクスプレッションを打つプロパティと、取得したいプロパティに書き換えるだけでOKです。
今回覚えるエクスプレッション
speedとvelocityです。speedは「どれだけ速いか」、velocityは「どの方向にどれだけ速いか」つまり「speed+方向」です。
どちらもプロパティの現在の時間と次のフレームの移動量に応じたスピードを取得する目的では大体同じです。微妙に違うのは、2点。
1点目、speedは次のフレームで値が変わるか、前のフレームから値が変わっているか、も含めて数値を上げるので、キーフレームがあるフレームで数値が上がります。velocityは動いている最中だけ数値が上がるので、動き始めと動き終わりのキーフレームがあるフレームでは0。
2点目、position.speedであれば、斜めに動いた場合も、その直線の移動スピードが出ます。xだけ、yだけより距離が伸びますので、スピードは高く出ます。position.valueはxかyで取得するので斜めに動いた場合はspeedより若干低く出ます。
今回のエクスプレッションでは、スケールにのみvelocityを使っていますので、問題になることはないでしょう。
この記事へのコメントはありません。