3.基本のトゥイーンアニメ(移動アニメ)

f:id:AdobeAnimateFunya:20160302184715p:plain
いよいよAnimateを使ってアニメーションにゃね!! Animateって絵を自動で動かしてくれるって聞いたふにゃよ! すごいふにゃ〜!ふにゃでもカンタンに作れそうな気がするにゃ♪
f:id:AdobeAnimateFunya:20160302165304p:plain
フフフフ…Animateの自動で絵をアニメさせてくれる機能 [トゥイーン]を使えばカンタンにできるよ。
f:id:AdobeAnimateFunya:20160302165254p:plain
さっそく[トゥイーン]を使って描いた絵をアニメさせるふにゃ〜!
f:id:AdobeAnimateFunya:20160302165304p:plain
そのためには絵をシンボルに変換して、フレームを増やして、 [キーフレーム]を挿入して、[トゥイーン]を作成して、 配置したシンボルの位置や大きさなどを変形させるよ。
f:id:AdobeAnimateFunya:20160302182108p:plain
にゃにゃ!?!?!?!?
f:id:AdobeAnimateFunya:20160302165304p:plain
[トゥイーン]させるためには色々設定しないといけないんだ。 ふにゃクンにはちょっと複雑かもしれないから 下のやり方に倣ってやってみるといいよ。

----------------------------------------------------------------------------------------

やってみよう!

ステージに描いたイラストが右から左へ移動するアニメを作るよ

1.ステージに絵を配置しよう

f:id:AdobeAnimateFunya:20160525231756p:plain

2.シンボルに変換しよう

f:id:AdobeAnimateFunya:20160525232056p:plain ①【選択ツール】で描いたイラストを選択

②[修正/シンボルに変換]を選択

f:id:AdobeAnimateFunya:20160525233006p:plain でてきたダイアログに名前をつけて、タイプを[ムービークリップ]にして、 基準点は真ん中を設定してOKをクリックしよう。

f:id:AdobeAnimateFunya:20160526202100p:plain 真ん中に○が現れればシンボル化されてるよ。

3.タイムラインにフレームを挿入

f:id:AdobeAnimateFunya:20160525233425p:plain

①タイムラインの30フレーム目をクリックして選択した状態にする。 ②[挿入/タイムライン/フレーム]を選択しよう。 ([右クリック/フレームから挿入]でもできるよ。) f:id:AdobeAnimateFunya:20160525234109p:plain 30フレームまでコマが増えたよ。
f:id:AdobeAnimateFunya:20160302165304p:plain
これだけじゃまだアニメはしないけど トゥイーンアニメーションの下準備が完了だよ。
4.キーフレームを挿入しよう

f:id:AdobeAnimateFunya:20160526115900p:plain

①30フレーム目をクリックし選択する。 ②[挿入/キーフレームの挿入]を選択 30フレーム目にキーフレームが出来る。
5.イラストを移動させよう

f:id:AdobeAnimateFunya:20160526120134p:plain [選択ツール]で30フレーム目のイラストを左へ移動させる。

6.トゥイーンを設定しよう

f:id:AdobeAnimateFunya:20160527111550p:plain

タイムラインの1~29フレーム上の適当な場所をクリックして選択し [挿入/クラシックトゥイーン](または右クリック/クラシックトゥイーン)を選択する f:id:AdobeAnimateFunya:20160526145123p:plain フレームの色が紫色に変わって矢印が現れたら[トゥイーン]が設定できた状態だよ。 タイムラインの1フレーム目を選択して[制御/再生]を選択するとアニメーションが確認できるよ。 f:id:AdobeAnimateFunya:20160526152719p:plain 30フレーム目を移動しても、ちゃんとその間のアニメーションも移動するよ。 1フレーム目をステージの外に出してみたり、イラストの位置を変えて動かしてみよう。
7.タイムラインを調節してみよう
イラストの位置を変えるとトゥイーンアニメの速度も変わるよ。 イメージより早かったり遅かったりする時はタイムラインの長さを調節しよう。 f:id:AdobeAnimateFunya:20160526161114p:plain トゥイーン部分の1フレームを選択した状態で[フレームを削除]を選択する f:id:AdobeAnimateFunya:20160526161659p:plain すると1フレーム減るよ。 たくさんまとめて変更したい場合は f:id:AdobeAnimateFunya:20160526162940p:plain ①クリックして1フレームを選択する。 f:id:AdobeAnimateFunya:20160526162946p:plain ②Shift+クリックで変更したい範囲を選択する。 f:id:AdobeAnimateFunya:20160526162954p:plain [フレームを削除]を選択する。 f:id:AdobeAnimateFunya:20160526162959p:plain 10フレーム削除できたよ。 フレームを追加したい場合は[フレームを追加]を選ぼう。

----------------------------------------------------------------------------------------

f:id:AdobeAnimateFunya:20160302184715p:plain
やったふにゃ〜!うごいたふにゃよ〜!!
f:id:AdobeAnimateFunya:20160302165304p:plain
フフフフ…トゥイーンを使って移動させるのは基本だからね。 はじめて動かせた感想はどうだい?
f:id:AdobeAnimateFunya:20160302184715p:plain
ちゃんと動いてうれしいふにゃ!! 移動だけじゃなくてもっといろいろな動きを つけたくなってきたふにゃ〜!!
f:id:AdobeAnimateFunya:20160302165304p:plain
フフフフ…その調子だよ。ふにゃクン。