13.インスタンス(グラフィック)の再生モード
くまちゃんが歩いてきて、一旦止まってからまた歩き出すアニメーションを作りたいふにゃよ〜。
途中で動きを止めるにはどうすればいいのかにゃ？？
そういう時はインスタンスの種類をグラフィックにするといいよ。
マスターシンボルの中に複数フレームが含まれている場合、
再生させたい1フレームを指定して表示することができるんだ。
それは便利にゃね！
----------------------------------------------------------------------------------------
1.
インスタンスの種類を「グラフィック」にした20フレームのくまちゃんがアニメするトゥイーンアニメを作る。
2.
40フレーム目にキーフレームを追加する。
こんな風に、止まって足踏み状態になる。
さらに50フレーム目にキーフレームを追加し、くまちゃんインスタンスを移動させてトゥイーンを作成する。。
歩く→足踏み→歩くというアニメができる。
3.インスタンスを止めろ！
20フレーム目のキーフレームを選択し、ステージに配置したインスタンスを選択する。
プロパティにループという項目が表示されるのでそれのオプション:単一フレーム再生にする。
「開始フレーム」に表示したいシンボルの中のフレーム数を入力する。（この場合は3）
このときフレームピッカーを使用するとシンボルの中身を確認しながらフレームが選べるので便利だよ。
・グラフィックのループの種類
ループ：1フレーム目から再生される
一回再生：シンボル内の1フレーム目〜最後まで1回だけ再生され、最後のフレームで止まる。
単一フレーム：シンボル内の指定した1フレームのみ表示する。
歩く→止まる→歩くというアニメが完成したよ。
12.シンボルの中でアニメさせる
クラゲふにゃ〜。
「アニメーションの基本は全部教えた」って言ってたけど、前に作った
くまちゃんの歩かせ方がわからないふにゃよ〜。
シンボルの中に歩く「くまちゃん」のアニメを作ればいいんじゃないかな。
シンボルの中にアニメが作れちゃうふにゃ！？
フフフ…。実はシンボルの中にアニメが作れるんだよ。
だから足踏みした「くまちゃん」のシンボルをトゥイーンで横に移動させる。
これだけで歩くアニメが完成だよ。
さっそくやってみるふにゃ〜〜！
----------------------------------------------------------------------------------------
1.
2.
3.
4.
・著者なごみはゲーム用に使っている都合上、基本的にインスタンスの種類はムービークリップで作っているよ。
これだと[制御/再生]しても1フレーム目の画像しか表示されないから注意してね。
[制御/再生]で確認するにはグラフィックにするとうまくいくよ。
5.
アニメを作る順番は色々あるよ。
最初に新規シンボルを作って、そのシンボル内のタイムラインに足踏みするアニメを作る。
ステージにそのシンボルをドラッグして配置する。
それにトゥイーンアニメをつけてあげれば同じように作れるよ。
【応用】
モーションガイドに沿ってトゥイーンさせたりして色々なアニメを作ってみよう。
11.シンボルとインスタンス
さて…Animateの基本的なアニメーションの機能は教えたよ。
ふにゃっ！
でも、Animateを使いこなすためにはシンボルについて
詳しく理解する必要があるんだ。
ごくり…！
シンボルとインスタンスの違いはわかるかい？
えっと…
シンボルはライブラリに入ってるもので、
インスタンスはライブラリからステージに配置されたものふにゃっ！
フフフフ…正解だよ。
シンボル
ライブラリに入ってるイラストやアニメを管理するもの
インスタンス
ライブラリからステージ上に配置されたもの。シンボルの分身。
常にマスターシンボルの内容を反映する。
元となったシンボルの中身を変えれば配置したインスタンスもそれと同じものになるよ。
それを利用してステージにたくさん配置したお花の色をカンタンに変えてみよう。
----------------------------------------------------------------------------------------
1.
ステージ上にお花のイラストを描こう。
それを選択して右ボタンクリック/シンボルに変換（もしくは修正/シンボルに変換）を選ぶとダイアログが表示される。
・シンボルの種類について
アクションスクリプトを使うもの(ゲームなど)に使用する場合はムービークリップ、
アニメーションを作る場合はグラフィック。
執筆者のなごみが使わないボタンについてはここでは割愛するよ
タイプは後からでも変更できるよ。変更したいインスタンスを選択してプロパティから変更しよう。
2.ステージにインスタンスをたくさんコピーする。
3.シンボルを編集して色を変えよう。
[編集/シンボルの編集]、もしくはライブラリのお花のシンボルをダブルクリックしても編集画面に入れるよ
バケツツールで花を黄色にしよう。
4.インスタンスの色を変えても他のインスタンスには影響はない。
今度はインスタンスを1つ選択して[プロパティ/カラー効果]で着色してみよう。
シンボルの編集：全てのインスタンスに影響する
インスタンスの編集：編集したインスタンスのみに影響する
10.応用アニメ【パスに沿った回転と加速減速】
う〜ん…
にゃんだか不自然な動きふにゃ〜
www.youtube.com トロッコに乗ったふにゃもらけが山を走っていくアニメーション。
フフフフ…
傾斜のある山に対してトロッコは傾きが変わらずに動いて確かに違和感があるね。
こういう時は「パスに沿って回転」にチェックを入れるといいよ
わ〜！
トロッコのインスタンスが移動に合わせて傾くようになったふにゃ〜〜！
さらに「イージング」機能を使えば減速や加速も表現できるよ。
減速 youtu.be
加速 youtu.be
----------------------------------------------------------------------------------------
やってみよう！
パスに沿った回転と加速減速
1.準備
何かイラストを描いてモーションに沿ったアニメを作ろう。
5.基本のトゥイーンアニメ（モーションガイドに沿って動かす）
で使ったファイルを使うといいよ
2.
トゥイーンの最初のキーフレームを選ぶ。
プロパティが「トゥイーン」になる。「パスに沿って回転」にチェックを入れよう。
3.再生してみよう
youtu.be インスタンスがモーションガイドに沿って角度が変化するアニメになったよ。
いい感じにアニメしない場合はキーフレームの角度を変えてみよう。
ガイドラインに対してインスタンスは垂直だと上手く見えるよ。
4.「イージング」を使って加速を表現してみよう
トゥイーンプロパティにある「イージング」の数値を「-100」にする。
最初はゆっくりと動き出し徐々に加速するアニメになるよ。
5.「イージング」を使って減速を表現してみよう
トゥイーンプロパティにある「イージング」の数値を「100」にする。
早いスピードで動き出して徐々に減速するアニメになるよ。
イージングの数値を変えると速さが変わるからイメージ通りになるように調整しよう。
9.応用アニメ【回転】
あれ〜〜？？
うまく回転しないふにゃ〜なんでにゃ！？
ただまっすぐに横移動するアニメが出来上がっている…
回転していないね。
ふにゃクンはどんなアニメが作りたいのかい？
おヒゲふにゃが宇宙空間をくるっと一回転しながら
横に移動するアニメが作りたいのにゃ！
youtu.be ↑ふにゃが作りたいアニメ
なるほどね。
とりあえず試しに最後のキーフレームのインスタンスを270度回転させてアニメさせてごらん。
あれっ！？270度じゃなくて反時計回りに90度回転したふにゃ〜〜〜！？
なぜにゃ…不具合かにゃ〜？
いつものトゥイーンアニメの設定だと【回転:】が「自動」になっているんだよ。
これだと近い方へアニメするんだ。
ここを「時計回り」か「反時計回り」に設定すれば意図した方向へ回転するよ。
回転数も変えられるよ。
ふむふむ…なるほどふにゃ〜。
早速やってみるふにゃ〜！！
----------------------------------------------------------------------------------------
やってみよう！
くるっと回転させよう
1.準備
何かイラストを描いてシンボルにしよう。
フレームを増やして最後をキーフレームに変換しインスタンスを右に移動させて
[トゥイーン]を設定するよ。
参照:「3.基本のトゥイーンアニメ（移動アニメ）」
2.
1フレーム目のキーフレームを選択するとプロパティがフレーム設定のものになるよ。
3.
【回転:】のポップアップルメニューから時計回りを選択する。
右にある回転数は自動で「１」に設定されるよ。
4.
再生すると右に移動しながら一回転するよ。 回転数を変えたい時は回数を変えればいいよ。
5.
ちなみに270度回転するアニメの作り方。
最後のキーフレームに配置したインスタンスを[修正/変形/伸縮と回転]で270度回転させておく。
最初のキーフレームを選択しプロパティの回転数を0にする。
6.
再生してみよう。270度回って止まるよ。
回転数を0にしたのは回転が360度未満だからだよ。
回転の途中でカクっとしてしまうときの対処法
同じ場所で一回転するアニメをswfで書き出してループ再生すると
一回転した瞬間に「カクっ」としてしまうよ。
これは最初のフレームと最後のフレームのインスタンスの角度が同じだから。
滑らかにするには後ろから2番目のフレームをキーフレームにして
最後のフレームを削除しよう。滑らかに回転するよ。
ただ、この場合、回転は360度未満なので回転数を0にしないと
2回転してしまうよ。
8.応用アニメ【マスク機能】
ねえねえクラゲふにゃ、こういうアニメはどうやって作るのかにゃあ？？
フフフフ…これは【マスク】という機能を使っているんだよ
【マスク】？
あ！それってillustratorやphotoshopにもある切り抜き機能ふにゃよね！
もしかして、このアニメも忍者を切り抜いてるってことふにゃ？
フフフフ…ご名答。
【マスク】は切り抜きたい形で下のレイヤーを切り抜く機能だよ。
このアニメはマスクレイヤーに配置した形をアニメさせることで
忍者が現れるように見せているよ。
レイヤーをマスクに設定すると下のレイヤー1つだけが対象になるけど 上にあるレイヤーやもっと下のレイヤーもドラッグすれば対象になるよ
----------------------------------------------------------------------------------------
やってみよう！
マスク機能を使ったアニメを作るよ。
1.準備
何かイラストを描こう。（レイヤー「もらふにゃ」）
その上に新規レイヤーを作って切り抜きたい形が移動するトゥイーンアニメ（レイヤー「マスク」）を作ろう。
2.レイヤーをマスクに設定する
レイヤー「マスク」を選択した状態で【右クリック/マスク】で【マスク】に設定するよ。
「もらふにゃ」レイヤーが上の「マスク」レイヤーの形に切り抜かれたよ。
【マスク】はレイヤーがロックされている時だけマスク効果が画面に表示されるんだ。
ロックを解除すると見た目はマスク効果がかかってないようにみえるけど
swfに書き出せばちゃんと表示されるよ。
だから編集する時は安心してロックを解除して作業しよう。
3.レイヤーを追加する
このままだとちょっとさびしいから背景を追加してみるよ。
もう１つレイヤーを作って背景を描いたらレイヤーを一番下にドラッグしよう。
マスクレイヤーの注意点
マスクレイヤーに2つ以上のインスタンスやグループやテキストを配置した場合、
そのうちの1つしかマスクとして認識されないよ。
ただし「ムービークリップ」にすれば複数のインスタンスなどを使ったマスクが可能になるよ。
7.応用アニメ【着色・明度】
【カラー効果】でアルファ値を変更すると透過になるにゃね！
あ、ちょっと気になったんだけど【カラー効果】横の「スタイル:」の
プルダウンメニューには他にも色々あるふにゃよ。
アルファ以外に設定してみたらどうなるのかにゃ〜？？
フフフフ…「着色」はインスタンスに色をつけられるよ。
「明度」はインスタンスを黒っぽくしたり白っぽくにしたりできるよ。
便利そうにゃね！
さっそくふにゃの顔の色を変えてみるふにゃ〜！
にゃにゃっ！？
真っ赤になっちゃったふにゃ…
（ふにゃが作りたかったインスタンスのイメージ）
ふにゃが作りたかったのはこーゆーのにゃんだけど…
フフフフ…「着色」はインスタンス全体の色を変えてしまうんだよ。
だから単色で作られたインスタンスのほうが向いてるかもね。
「着色」に向いてるインスタンス
なるほど〜。
「濃淡」スライダーを動かせば着色の濃度も変えられるよ。
例えば背景を夜っぽく見せたい時はインスタンスに50%くらいの濃度の紺を着色するとそれっぽくなったりするよ。
「着色」で色を変更したあと「詳細」を選べば着色したインスタンスのアルファ値を変更もできるんだ。
今日はこれらを駆使したアニメーションをやってみよう
----------------------------------------------------------------------------------------
やってみよう！
インスタンスの色が別の色に変化するアニメを作るよ。
1.準備
単色で描いたイラストのシンボルを作ろう。
そのインスタンスをステージ中央に一つ配置した状態にして60フレーム追加する。
最後のフレームをキーフレームに変換する前にトゥイーンに設定しよう。
2.
15フレーム目をキーフレームにする。
このフレームのステージ上に配置されたインスタンスを選択してプロパティがインスタンスようになっていることを確認しよう。
3.
プロパティの【カラー効果】「スタイル:」横のプルダウンから「着色」を選択し、
右にあるカラーチップから変えたい色を選ぼう。
4.
30フレーム目も同様に違う色に着色する。
5.フェードイン
45フレーム目と60フレーム目をキーフレームに変換する。
45フレームのインスタンスを選択した状態でプルダウンから「詳細」を選択して「アルファ」を0%にしてみよう。
アニメを再生すると着色したインスタンスが透明になってフェードイン・フェードアウトになるよ。
