土曜日, 4月 13, 2024

How to use Trangram 08 
IllustratorデータはSVGで

今回は、Illustratorなどで作成したデータを読み込んでアニメーションを作成する流れを整理してみます。


この連載は以下で確認できます。

まず今回はIllustratorで作成したデータで解説しますが、Drawkeinara SVG形式であれば問題なく読み込めます。なお、Illustratorの場合は上図のようにレイヤー名をしっかり設定しておくとTrangramに読み込んだときにそのまま反映されます。

読み込みは[Menu]>[Import]で行います。

読み込んだ直後の状態です、データの左上がTrangramの左上に合致した状態で読み込まれます。

後は全体を選択してスタート位置とサイズを調整します。なお、例のように複数のパーツで構成されている場合はmこの段階でパーツ毎に動く場合の始点を調整します。作例では腕や足の付けのですね。

そのまま次の移動位置(キーフレーム)のコピーして手足の動きを設定します。

ゴール地点での処理も同様です。

上はこの段階のアニメーションです。

最低限の動きが設定できたら、キーフレームを設定した3箇所のサイズと位置を調整すれば・・・

こんな感じのアニメーションになります。

キーフレームを設定した5箇所のサイズと位置を調整して遊んでみました。