今回は、Illustratorなどで作成したデータを読み込んでアニメーションを作成する流れを整理してみます。
まず今回はIllustratorで作成したデータで解説しますが、Drawkeinara SVG形式であれば問題なく読み込めます。なお、Illustratorの場合は上図のようにレイヤー名をしっかり設定しておくとTrangramに読み込んだときにそのまま反映されます。
読み込みは[Menu]>[Import]で行います。
読み込んだ直後の状態です、データの左上がTrangramの左上に合致した状態で読み込まれます。
後は全体を選択してスタート位置とサイズを調整します。なお、例のように複数のパーツで構成されている場合はmこの段階でパーツ毎に動く場合の始点を調整します。作例では腕や足の付けのですね。
そのまま次の移動位置(キーフレーム)のコピーして手足の動きを設定します。
ゴール地点での処理も同様です。
上はこの段階のアニメーションです。
最低限の動きが設定できたら、キーフレームを設定した3箇所のサイズと位置を調整すれば・・・
こんな感じのアニメーションになります。
キーフレームを設定した5箇所のサイズと位置を調整して遊んでみました。