トゥイーンアニメーションの仕組み - Adobe Animateのチュートリアル

このレッスンでは、タイムラインの フレームとフレームの間の グラフィックスのプロパティを 計算してアニメーションを作るという トゥイーンアニメーションの 仕組みについてご説明します。 現在開いている HTML5 Canvas の コンテンツなんですが、 このペンギンにアニメーションが 仕込んであります。 確認しましょう。 「制御」＞「ムービープレビュー」で 「ブラウザーを使用」します。 ♪（音楽）♪ ♪（以後 音楽継続）♪ サウンドが流れて ペンギンが歩いています。 この歩いているペンギンは フレームアニメーションで 作っているのですが もう１つアニメーションがあります。 このペンギンをクリックします。 そうすると上から落ちてきて バウンドするという インタラクティブな アニメーションなんですが、 クリックしたあと 上から落ちてくる、これが実は トゥイーンアニメーションという仕組みで アニメーションが作られています。 （音楽停止） アニメと CG で使われている素材は 多くがライブラリに入っています。 ここに２つのアニメーションが ありますが、 この pen_walk というのが 歩く方ですね。 このアニメーションです。 それからもう１つ、上から落ちてくる方 pen_bounce とありますが、 これは落ちるので 下に隠れてしまいますけれども、 落ちるアニメーションがあります。 pen_walk の方はフレーム アニメーションという仕組みです。 こちらを先に確認しておきましょう。 ダブルクリックをすると アニメーションの中の タイムラインを見ることができます。 １フレーム目、２フレーム目、 ここは絵が動きません。 というのは同じ絵が配置してあるからです。 ３フレーム目に行くと絵が変わります。 縦線が入ったということは 絵が変わったということなんですけれども 少し動きましたね。 次に行くとまた縦線がありますので またちょっと動くんですが その次のフレーム、５フレーム目の間には 縦線がありませんから 同じ状態になっています。 次また少し動く、これを繰り返すことによって 歩くアニメーションになるわけですね。 ちょっと再生して確認しましょう。 「ループ再生」をオンにして、 オンになりましたね。 「再生」をすると こういう歩くアニメーションに なるということです。…