ラベル

2015年5月28日木曜日

Edge Animate Tips 5


動的なモーションパスの作成方法。
上級編な内容です。


Edge Animate(長いので以後An)では、動的なタイムラインアニメーションを作ることができません。
例えばモーションパス。
あらかじめシンボルで設定された動き以外はしない設計になっています。
これでは動的なモーションパスアニメを作りたい場合、自前でスクリプトを組む必要があります。

アドビも、その辺は安易にいじられたくないのか情報が見つかりませんでした。

でも、いい解決方法が見つかりました。
モーションパスのデータはprojectPrefix_edge.js内に書き込まれていて、それをedge.5.0.1.min.jsがロードしてプロパティに代入しています。
ということは、その隠されたプロパティさえわかれば、値を書き換えることができるはずです。

というわけで、シンボルのプロパティ探しをしてみました。

JavaScriptではfor inメソッドを使えば、オブジェクトのプロパティ名がわからなくても、すべて見ることができるのでグローバルオブジェクトのAdobeEdgeから一つずつ虱潰しに調べます。
その結果、このプロパティに格納されているのを探し当てました。

AdobeEdge.compositions[compId].sym.シンボル名.timeline.data

このdataプロパティに4次元配列としてベジェ情報が入っています。
詳しいフォーマットは直接_edge.jsを覗いてもらった方が早いです。

例えば始点と終点だけのシンプルなパスなら

data: [
 [
  [[300, 50, 447, -1068, 0, 0,0], [53.5, 343.5, 0, 0, 0, 0,602.18]]
 ]
]

こんな感じで、始点と終点が入っています。
中身は[アンカーX座標、アンカーY座標、ハンドル1X座標、ハンドル1Y座標、ハンドル2…]です。
ハンドルの座標はステージ座標とは無関係なようです。
最後のデータは何に使われているのかわかりませんでした。
アンカーポイントとハンドル二つの座標があればベジェが描けるので、最後のデータは何なんでしょうね?
アンカーのパス上の位置…かも?
でも、めちゃくちゃな数値を入れても特におかしい挙動はしませんでした。
もうちょっと検証が必要なようです。

書き換える時の注意点としては、オブジェクトとして格納されているので、直接操作するほうが間違いがないです。

1からモーションパスを作るのは大変なので、あらかじめシンボルにモーションパスのひな形をつくっておいて、動的に書き換える方法が楽だと思います。




Related Posts Plugin for WordPress, Blogger...