5.基本のトゥイーンアニメ(モーションガイドに沿って動かす)

f:id:AdobeAnimateFunya:20160302165254p:plain
トゥイーンアニメって直線で動くだけでちょっと機械的ふにゃね〜 なめらか〜な曲線を描いたりできないのかにゃあ?
f:id:AdobeAnimateFunya:20160302165304p:plain
描いた線に沿って動かすことができるよ。
f:id:AdobeAnimateFunya:20160302165254p:plain
にゃんと!それはカンタンそうにゃ!!
f:id:AdobeAnimateFunya:20160302165304p:plain
「線を描く」と言ってもただ線を描くだけじゃダメだよ、ふにゃクン。 レイヤーを「モーションガイド」というレイヤーに設定する必要があるよ。
f:id:AdobeAnimateFunya:20160302165254p:plain
へー!さっそく教えてふにゃ〜!

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

やってみよう!


モーションガイドに沿ってなめらかにアニメするよ。

1.準備

f:id:AdobeAnimateFunya:20160831192843p:plain 「3.基本のトゥイーンアニメ(移動アニメ)」のflaファイルを開き ステージ中央にインスタンス(ステージ上に配置したシンボルのこと)を一つ配置した状態にしよう。 f:id:AdobeAnimateFunya:20160831192944p:plain 70フレームほど追加しておく。

2.モーションガイドレイヤーを追加する

f:id:AdobeAnimateFunya:20160831192837p:plain くまを配置したレイヤーを選択した状態で【右クリック/クラシックモーションガイドを追加】を選択して モーションガイドレイヤーを追加する。

f:id:AdobeAnimateFunya:20160831192838p:plain うまくモーションガイドレイヤーが追加されると上記のように表示される。

3.モーションガイドを描く

f:id:AdobeAnimateFunya:20160831192839p:plain [モーションガイドレイヤー]を選択し[鉛筆ツール]でうごかしたいルートをステージに描いてみよう。 [鉛筆ツール]を[スムーズモード]にして一筆書きで一気に描こう。 そうでないとアニメがへんになるよ。

4.[トゥイーン]を設定する

f:id:AdobeAnimateFunya:20160831192947p:plain くまレイヤー(モーションガイドレイヤーじゃないほう)を選択して 最後のフレームをキーフレームに変換し[トゥイーン]を設定しよう。 [トゥイーン]の設定方法参照:「3.基本のトゥイーンアニメ(移動アニメ)」

5.インスタンスの位置を調節する

f:id:AdobeAnimateFunya:20160831192840p:plain くまレイヤーの1フレーム目を選択する。 [オブジェクトの吸着]ボタン(磁石のアイコン)をオンにして [選択ツール]でステージに配置したインスタンス の○を[モーションガイド]の右端まで移動させよう。

f:id:AdobeAnimateFunya:20160831192841p:plain [オブジェクトの吸着]ボタンがオンになっていると インスタンス中央の○が[モーションガイド]にピタッと吸着するよ。

f:id:AdobeAnimateFunya:20160831192842p:plain 70フレーム目のインスタンスも同じように[モーションガイド]の左端へ位置を調節しよう。

6.再生してみよう


【制御/再生】で再生してみると[モーションガイド]が見えた状態。


【制御/プレビュー】で再生すれば[モーションガイド]は見えない。 実際アニメを使う場合はこの形式(swf)で書き出すので問題ないよ。

7.

レイヤーをドラッグしてモーションガイドレイヤーの真下から移動させると トゥイーンがガイドレイヤーに沿わなくなってしまう。 (モーションガイドレイヤーのアイコンも変わる) レイヤーの順序を戻してあげれば元の状態に戻るよ。