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%にしてみよう。


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