10.応用アニメ【パスに沿った回転と加速減速】

f:id:AdobeAnimateFunya:20160302165254p:plain
う〜ん… にゃんだか不自然な動きふにゃ〜

www.youtube.com トロッコに乗ったふにゃもらけが山を走っていくアニメーション。

f:id:AdobeAnimateFunya:20160302165304p:plain
フフフフ… 傾斜のある山に対してトロッコは傾きが変わらずに動いて確かに違和感があるね。 こういう時は「パスに沿って回転」にチェックを入れるといいよ

youtu.be

f:id:AdobeAnimateFunya:20160302184715p:plain
わ〜! トロッコのインスタンスが移動に合わせて傾くようになったふにゃ〜〜!
f:id:AdobeAnimateFunya:20160302165304p:plain
さらに「イージング」機能を使えば減速や加速も表現できるよ。

減速 youtu.be

加速 youtu.be

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

やってみよう!

パスに沿った回転と加速減速

1.準備

何かイラストを描いてモーションに沿ったアニメを作ろう。
5.基本のトゥイーンアニメ(モーションガイドに沿って動かす) で使ったファイルを使うといいよ

2.

f:id:AdobeAnimateFunya:20170624161528p:plain トゥイーンの最初のキーフレームを選ぶ。 f:id:AdobeAnimateFunya:20170624161601p:plain プロパティが「トゥイーン」になる。「パスに沿って回転」にチェックを入れよう。

3.再生してみよう

youtu.be インスタンスがモーションガイドに沿って角度が変化するアニメになったよ。

いい感じにアニメしない場合はキーフレームの角度を変えてみよう。 f:id:AdobeAnimateFunya:20170624163024p:plain ガイドラインに対してインスタンスは垂直だと上手く見えるよ。

4.「イージング」を使って加速を表現してみよう

f:id:AdobeAnimateFunya:20170624164211p:plain トゥイーンプロパティにある「イージング」の数値を「-100」にする。

f:id:AdobeAnimateFunya:20170624164205p:plain 最初はゆっくりと動き出し徐々に加速するアニメになるよ。

5.「イージング」を使って減速を表現してみよう

f:id:AdobeAnimateFunya:20170624164227p:plain トゥイーンプロパティにある「イージング」の数値を「100」にする。

f:id:AdobeAnimateFunya:20170624164217p:plain 早いスピードで動き出して徐々に減速するアニメになるよ。

イージングの数値を変えると速さが変わるからイメージ通りになるように調整しよう。

9.応用アニメ【回転】

f:id:AdobeAnimateFunya:20160302182108p:plain
あれ〜〜?? うまく回転しないふにゃ〜なんでにゃ!?

f:id:AdobeAnimateFunya:20170420172359p:plain ただまっすぐに横移動するアニメが出来上がっている…

f:id:AdobeAnimateFunya:20160302165304p:plain
回転していないね。 ふにゃクンはどんなアニメが作りたいのかい?
f:id:AdobeAnimateFunya:20160302165254p:plain
おヒゲふにゃが宇宙空間をくるっと一回転しながら 横に移動するアニメが作りたいのにゃ!

youtu.be ↑ふにゃが作りたいアニメ

f:id:AdobeAnimateFunya:20160302165304p:plain
なるほどね。 とりあえず試しに最後のキーフレームのインスタンスを270度回転させてアニメさせてごらん。

f:id:AdobeAnimateFunya:20170420173829p:plain

f:id:AdobeAnimateFunya:20160302182108p:plain
あれっ!?270度じゃなくて反時計回りに90度回転したふにゃ〜〜〜!? なぜにゃ…不具合かにゃ〜?
f:id:AdobeAnimateFunya:20160302165304p:plain
いつものトゥイーンアニメの設定だと【回転:】が「自動」になっているんだよ。 これだと近い方へアニメするんだ。 ここを「時計回り」か「反時計回り」に設定すれば意図した方向へ回転するよ。 回転数も変えられるよ。
f:id:AdobeAnimateFunya:20160302165254p:plain
ふむふむ…なるほどふにゃ〜。 早速やってみるふにゃ〜!!

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

やってみよう!

くるっと回転させよう

1.準備

何かイラストを描いてシンボルにしよう。
フレームを増やして最後をキーフレームに変換しインスタンスを右に移動させて
[トゥイーン]を設定するよ。
参照:「3.基本のトゥイーンアニメ(移動アニメ)」

f:id:AdobeAnimateFunya:20170420180901p:plain

2.

1フレーム目のキーフレームを選択するとプロパティがフレーム設定のものになるよ。

f:id:AdobeAnimateFunya:20170420191342p:plain

3.

【回転:】のポップアップルメニューから時計回りを選択する。
右にある回転数は自動で「1」に設定されるよ。
f:id:AdobeAnimateFunya:20170420195946p:plain

4.

再生すると右に移動しながら一回転するよ。 回転数を変えたい時は回数を変えればいいよ。

www.youtube.com

5.

ちなみに270度回転するアニメの作り方。
f:id:AdobeAnimateFunya:20170420195550p:plain 最後のキーフレームに配置したインスタンスを[修正/変形/伸縮と回転]で270度回転させておく。

f:id:AdobeAnimateFunya:20170420195605p:plain 最初のキーフレームを選択しプロパティの回転数を0にする。

6.

再生してみよう。270度回って止まるよ。

youtu.be

回転数を0にしたのは回転が360度未満だからだよ。

回転の途中でカクっとしてしまうときの対処法

同じ場所で一回転するアニメをswfで書き出してループ再生すると
一回転した瞬間に「カクっ」としてしまうよ。
これは最初のフレームと最後のフレームのインスタンスの角度が同じだから。
滑らかにするには後ろから2番目のフレームをキーフレームにして
最後のフレームを削除しよう。滑らかに回転するよ。
ただ、この場合、回転は360度未満なので回転数を0にしないと 2回転してしまうよ。

8.応用アニメ【マスク機能】

f:id:AdobeAnimateFunya:20160302165254p:plain
ねえねえクラゲふにゃ、こういうアニメはどうやって作るのかにゃあ??

youtu.be

f:id:AdobeAnimateFunya:20160302165304p:plain
フフフフ…これは【マスク】という機能を使っているんだよ
f:id:AdobeAnimateFunya:20160302165254p:plain
【マスク】? あ!それってillustratorやphotoshopにもある切り抜き機能ふにゃよね! もしかして、このアニメも忍者を切り抜いてるってことふにゃ?
f:id:AdobeAnimateFunya:20160302165304p:plain
フフフフ…ご名答。 【マスク】は切り抜きたい形で下のレイヤーを切り抜く機能だよ。 このアニメはマスクレイヤーに配置した形をアニメさせることで 忍者が現れるように見せているよ。

レイヤーをマスクに設定すると下のレイヤー1つだけが対象になるけど 上にあるレイヤーやもっと下のレイヤーもドラッグすれば対象になるよ

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

やってみよう!

マスク機能を使ったアニメを作るよ。

1.準備

何かイラストを描こう。(レイヤー「もらふにゃ」)
その上に新規レイヤーを作って切り抜きたい形が移動するトゥイーンアニメ(レイヤー「マスク」)を作ろう。
f:id:AdobeAnimateFunya:20170420114801p:plain

2.レイヤーをマスクに設定する

レイヤー「マスク」を選択した状態で【右クリック/マスク】で【マスク】に設定するよ。 f:id:AdobeAnimateFunya:20170420114856p:plain

f:id:AdobeAnimateFunya:20170420115243p:plain 「もらふにゃ」レイヤーが上の「マスク」レイヤーの形に切り抜かれたよ。
【マスク】はレイヤーがロックされている時だけマスク効果が画面に表示されるんだ。
ロックを解除すると見た目はマスク効果がかかってないようにみえるけど
swfに書き出せばちゃんと表示されるよ。
だから編集する時は安心してロックを解除して作業しよう。
f:id:AdobeAnimateFunya:20170420120042p:plain

3.レイヤーを追加する

このままだとちょっとさびしいから背景を追加してみるよ。
もう1つレイヤーを作って背景を描いたらレイヤーを一番下にドラッグしよう。
f:id:AdobeAnimateFunya:20170420120109p:plain

f:id:AdobeAnimateFunya:20170420120142p:plain

www.youtube.com

マスクレイヤーの注意点

マスクレイヤーに2つ以上のインスタンスやグループやテキストを配置した場合、
そのうちの1つしかマスクとして認識されないよ。
ただし「ムービークリップ」にすれば複数のインスタンスなどを使ったマスクが可能になるよ。

7.応用アニメ【着色・明度】

f:id:AdobeAnimateFunya:20160302165254p:plain
【カラー効果】でアルファ値を変更すると透過になるにゃね! あ、ちょっと気になったんだけど【カラー効果】横の「スタイル:」の プルダウンメニューには他にも色々あるふにゃよ。 アルファ以外に設定してみたらどうなるのかにゃ〜??

f:id:AdobeAnimateFunya:20170301161240p:plain

f:id:AdobeAnimateFunya:20160302165304p:plain
フフフフ…「着色」はインスタンスに色をつけられるよ。 「明度」はインスタンスを黒っぽくしたり白っぽくにしたりできるよ。

f:id:AdobeAnimateFunya:20170301161254p:plain

f:id:AdobeAnimateFunya:20160302165254p:plain
便利そうにゃね! さっそくふにゃの顔の色を変えてみるふにゃ〜!

f:id:AdobeAnimateFunya:20170301161144p:plain

f:id:AdobeAnimateFunya:20170301160915p:plain

f:id:AdobeAnimateFunya:20160307165023j:plain
にゃにゃっ!? 真っ赤になっちゃったふにゃ…

f:id:AdobeAnimateFunya:20170301161859p:plain (ふにゃが作りたかったインスタンスのイメージ)

f:id:AdobeAnimateFunya:20160302165254p:plain
ふにゃが作りたかったのはこーゆーのにゃんだけど…
f:id:AdobeAnimateFunya:20160302165304p:plain
フフフフ…「着色」はインスタンス全体の色を変えてしまうんだよ。 だから単色で作られたインスタンスのほうが向いてるかもね。

f:id:AdobeAnimateFunya:20170301162114p:plain 「着色」に向いてるインスタンス

f:id:AdobeAnimateFunya:20160302165254p:plain
なるほど〜。
f:id:AdobeAnimateFunya:20160302165304p:plain
「濃淡」スライダーを動かせば着色の濃度も変えられるよ。

f:id:AdobeAnimateFunya:20170301160603p:plain 例えば背景を夜っぽく見せたい時はインスタンスに50%くらいの濃度の紺を着色するとそれっぽくなったりするよ。

f:id:AdobeAnimateFunya:20160302165304p:plain
「着色」で色を変更したあと「詳細」を選べば着色したインスタンスのアルファ値を変更もできるんだ。 今日はこれらを駆使したアニメーションをやってみよう

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

やってみよう!


インスタンスの色が別の色に変化するアニメを作るよ。

1.準備

単色で描いたイラストのシンボルを作ろう。 f:id:AdobeAnimateFunya:20170301171433p:plain そのインスタンスをステージ中央に一つ配置した状態にして60フレーム追加する。 最後のフレームをキーフレームに変換する前にトゥイーンに設定しよう。

2.

15フレーム目をキーフレームにする。 f:id:AdobeAnimateFunya:20170301171453p:plain このフレームのステージ上に配置されたインスタンスを選択してプロパティがインスタンスようになっていることを確認しよう。

3.

f:id:AdobeAnimateFunya:20170301171510p:plain プロパティの【カラー効果】「スタイル:」横のプルダウンから「着色」を選択し、 右にあるカラーチップから変えたい色を選ぼう。

4.

30フレーム目も同様に違う色に着色する。

5.フェードイン

45フレーム目と60フレーム目をキーフレームに変換する。 f:id:AdobeAnimateFunya:20170301171529p:plain 45フレームのインスタンスを選択した状態でプルダウンから「詳細」を選択して「アルファ」を0%にしてみよう。


アニメを再生すると着色したインスタンスが透明になってフェードイン・フェードアウトになるよ。

6.応用アニメ【フェードイン・フェードアウト】

f:id:AdobeAnimateFunya:20160302165304p:plain
フフフフ…長くこのブログを更新していなかったね…
f:id:AdobeAnimateFunya:20160302165254p:plain
ホントふにゃよ〜!もう更新されないかと思ったふにゃよっ!
f:id:AdobeAnimateFunya:20160302165304p:plain
FlashやAnimateについて勉強を始めたばかりのみんなにはすまなかったね。 セレブなボクも色々忙しくてね。 それよりふにゃクンは今まで勉強したことを忘れてはいないかい?
f:id:AdobeAnimateFunya:20160307165023j:plain
っ!!!
f:id:AdobeAnimateFunya:20160302165304p:plain
フフフフ…ちゃんと復習しておくんだよ。 今日は「フェードイン・フェードアウト」について教えるよ。
f:id:AdobeAnimateFunya:20160302165254p:plain
フェードイン・フェードアウト…! ひゅ〜って現れたり、ひゅわ〜ん…って消えていくやつふにゃね! にゃんだかかっこいいふにゃ〜♪

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

やってみよう!


キャンバスに配置したシンボルを選択してプロパティの中にある「アルファ」や「カラー」という項目が表示されるよ。 それを変えると透明度やカラーが変えらるよ。

1.準備

f:id:AdobeAnimateFunya:20161223175802p:plain 「3.基本のトゥイーンアニメ(移動アニメ)」のflaファイルを開き ステージ中央にインスタンス(ステージ上に配置したシンボルのこと)を一つ配置した状態にして20フレーム追加する。 最後の20フレーム目をキーフレームにして1フレーム目を「クラシックトゥイーン」を作成しよう。

2.フェードアウト

f:id:AdobeAnimateFunya:20161223181053p:plain 20フレーム目のステージに配置したシンボル(インスタンス)をクリックして選択する。 そうするとプロパティ画面の【カラー効果】設定が「スタイル:なし」と表示されるよ。

3.

f:id:AdobeAnimateFunya:20161223175803p:plain 【カラー効果】「スタイル:」横のプルダウンメニューの「なし」をクリックして「アルファ」を選ぼう。 f:id:AdobeAnimateFunya:20161223175805p:plain すると下にアルファ値を変更できるスライダーが現れるよ。 数値を下げるほど透明になるので今回はそれを0%にしてみよう。

4.


【制御/再生】してみると徐々に消えていくアニメになっているよ。

5.フェードイン

f:id:AdobeAnimateFunya:20161223175806p:plain フェードインさせる場合は1フレーム目のインスタンスの「アルファ」を0%、 最後のフレームのインスタンスはプロパティ画面の【カラー効果】設定を「スタイル:なし」にして再生してみよう。

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.

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

4.基本のトゥイーンアニメ(拡大・縮小)

f:id:AdobeAnimateFunya:20160302165254p:plain
トゥイーンアニメで縦や横の移動はできるようになったふにゃ! でもこれだけじゃちょっともの足りないにょ〜…。 ぐいーんと大きくなるアニメも作ってみたいふにゃ〜。
f:id:AdobeAnimateFunya:20160302165304p:plain
拡大・縮小も回転だってトゥイーンアニメでカンタンにできるよ。
f:id:AdobeAnimateFunya:20160302165254p:plain
わーーー♪
f:id:AdobeAnimateFunya:20160302165304p:plain
「3.基本のトゥイーンアニメ(移動アニメ)」で 作ったflaファイルを使うよ。

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

やってみよう!


ステージに描いたイラストが拡大するアニメを作るよ。

1.

f:id:AdobeAnimateFunya:20160723203239p:plain 「3.基本のトゥイーンアニメ(移動アニメ)」のflaファイルを開く。

2.自由変形ツールで形を変えてみよう

f:id:AdobeAnimateFunya:20160723203238p:plain 30フレーム目の絵を選択した状態のままツールボックスの[自由変形ツール]を選択しよう。 そうすると選択していた絵のまわりにハンドルが表示されるので拡大変形させてみよう。


ハンドルをドラッグすると絵を変形させることができる。


縦横比を固定して拡大・縮小したい時はShiftキーを押しながら角のハンドルを操作しよう。

反転させる場合はメニューの【修正/変形/縦反転・横反転】だよ。

3.


30フレーム目の変形が出来たらメニューの【制御/再生】で動きを確認してみよう。 ぐんぐん大きくなりながら移動していくよ。