今回は、Illustratorなどで作成したデータを読み込んでアニメーションを作成する流れを整理してみます。
まず今回はIllustratorで作成したデータで解説しますが、Drawkeinara SVG形式であれば問題なく読み込めます。なお、Illustratorの場合は上図のようにレイヤー名をしっかり設定しておくとTrangramに読み込んだときにそのまま反映されます。
読み込みは［Menu］＞［Import］で行います。
読み込んだ直後の状態です、データの左上がTrangramの左上に合致した状態で読み込まれます。
あとは全体を選択してスタート位置とサイズを調整します。なお、例のように複数のパーツで構成されている場合は、この段階でパーツ毎に動く場合の始点を［Setting］＞［Preferences］＞［Show rotation anchor］にチェックを入れて調整します。
作例では腕や足の付けのですね。
そのまま次の移動位置（キーフレーム）のコピーして手足の動きを設定します。
ゴール地点での処理も同様です。
上はこの段階のアニメーションです。
最低限の動きが設定できたら、キーフレームを設定した3箇所のサイズと位置を調整すれば・・・
こんな感じのアニメーションになります。
キーフレームを設定した5箇所のサイズと位置を調整して遊んでみました。
※なお、この書き込み時点ではWebpで書き出して再生されました。しかし、2024/05/23の段階では、Webpで書き出したモノはムービーとはならず制止画になり、Webp形式でのムービー書き出しはWebm（VP9）を指定します。ただし、ブラウザーでは表示で来ますが、このBlogに配置できませんでした。
