16.ビットマップ画像の読み込み・編集など
(デジカメで撮った3648px × 2432pxの画像を読み込もうとする ふにゃもらけ)
[ファイル/読み込み/ステージに読み込み]で画像を読み込むとステージに画像が配置された。
----------------------------------------------------------------------------------------
ステージに分解していないビットマップ画像を配置して選択状態で [修正/ビットマップ/ビットマップのトレース…]を選択しよう。 とりあえずそのままの設定でOKしてみよう。 ビットマップの画像を元にしたベクターデータのイラストに変換されたよ。 なおライブラリには元の画像はそのまま残っているので使えるよ。
[ポイントの数:]と[トレースの精度:]は変換する絵の精密さに影響するよ。
精度の高い絵は写真に近い細かい仕上がりになるけどデータが重くなるから気をつけてね。
[色数:]は何色でトレースするかではなくて色の会長幅のことだよ。
数字が小さいほどたくさん色を使ってトレースするよ。
15.シンボルの入れ替え、複製
----------------------------------------------------------------------------------------
1.
このアニメに使われているくまちゃんシンボルをネコちゃんに入れ替えるよ。
2.
新規シンボル「歩くネコちゃん」を作成したよ。
3.
ムービーシーンの1フレーム目のキーフレームに配置した「歩くくまちゃん」シンボルを選択するか、もしくは[修正/シンボル/シンボルの入れ替え]を選択するとプロパティ画面に入れ替えボタンが表示される。
ライブラリの中にあるシンボルが表示されるので置き換えたいシンボルを選択しよう。
終点のキーフレームに配置したシンボルも同じ要領で置きかえよう。
4.
ネコちゃんのアニメになったよ。 ライブラリにはくまちゃんが残っているよ。
----------------------------------------------------------------------------------------
1.
http://animate.hatenadiary.jp/entry/2019/03/05/112925で使ったバンザイくまちゃんシンボルを複製してネコちゃんシンボルにするよ。
2.ライブラリからシンボルをコピーする
ライブラリのくまちゃんシンボルを選択した状態でパネル右上のボタンをクリックしよう。
複製を選択すると
「くまちゃんコピー」が作られたよ。
3.コピーしたシンボルを編集する
「くまちゃんコピー」を編集してネコちゃんにしよう。
4.
コピーしたシンボルを元に作ったので、画像の座標位置がズレず、シンボルの入れ替えがしやすいよ。
14.シンボルを同じ位置で編集
(アニメを作っているふにゃもらけ。)
ステージに配置されたインスタンスをダブルクリックするとシンボル編集画面に入れる。 ([編集/同じ位置で編集]からでも同じ。) シンボルの中に入るとインスタンス以外が白っぽくなる。
13.インスタンス(グラフィック)の再生モード
----------------------------------------------------------------------------------------
1.
インスタンスの種類を「グラフィック」にした20フレームのくまちゃんがアニメするトゥイーンアニメを作る。
2.
40フレーム目にキーフレームを追加する。
こんな風に、止まって足踏み状態になる。
さらに50フレーム目にキーフレームを追加し、くまちゃんインスタンスを移動させてトゥイーンを作成する。。 歩く→足踏み→歩くというアニメができる。
3.インスタンスを止めろ!
20フレーム目のキーフレームを選択し、ステージに配置したインスタンスを選択する。 プロパティにループという項目が表示されるのでそれのオプション:単一フレーム再生にする。 「開始フレーム」に表示したいシンボルの中のフレーム数を入力する。(この場合は3) このときフレームピッカーを使用するとシンボルの中身を確認しながらフレームが選べるので便利だよ。
・グラフィックのループの種類
ループ:1フレーム目から再生される
一回再生:シンボル内の1フレーム目〜最後まで1回だけ再生され、最後のフレームで止まる。
単一フレーム:シンボル内の指定した1フレームのみ表示する。
歩く→止まる→歩くというアニメが完成したよ。
12.シンボルの中でアニメさせる
----------------------------------------------------------------------------------------
1.
トゥイーンを使ってくまちゃんが横に移動するアニメを作る。 参照:3.基本のトゥイーンアニメ(移動アニメ) - 初心者のためのAdobe Animateブログ
2.
くまちゃんのシンボルを選択して[右クリック/シンボルの編集]で編集画面に入ろう。
3.
キーフレームを挿入してその場で歩いてるパラパラアニメを作ろう。
フレームの長さを調整してアニメができたよ。 ライブラリのくまちゃんシンボルを選択して右上の再生ボタンを押してもアニメを確認することができるよ。
4.
[編集/ドキュメントの編集]でムービー編集画面に戻り、[制御/プレビュー]で再生してみよう。
・著者なごみはゲーム用に使っている都合上、基本的にインスタンスの種類はムービークリップで作っているよ。
これだと[制御/再生]しても1フレーム目の画像しか表示されないから注意してね。
[制御/再生]で確認するにはグラフィックにするとうまくいくよ。
5.
アニメを作る順番は色々あるよ。
最初に新規シンボルを作って、そのシンボル内のタイムラインに足踏みするアニメを作る。
ステージにそのシンボルをドラッグして配置する。
それにトゥイーンアニメをつけてあげれば同じように作れるよ。
【応用】 モーションガイドに沿ってトゥイーンさせたりして色々なアニメを作ってみよう。
11.シンボルとインスタンス
シンボル
ライブラリに入ってるイラストやアニメを管理するもの
インスタンス
ライブラリからステージ上に配置されたもの。シンボルの分身。
常にマスターシンボルの内容を反映する。
----------------------------------------------------------------------------------------
1.
ステージ上にお花のイラストを描こう。
それを選択して右ボタンクリック/シンボルに変換(もしくは修正/シンボルに変換)を選ぶとダイアログが表示される。
今回は基準点は真ん中、種類はムービークリップを選択しよう。
・シンボルの種類について
アクションスクリプトを使うもの(ゲームなど)に使用する場合はムービークリップ、
アニメーションを作る場合はグラフィック。
執筆者のなごみが使わないボタンについてはここでは割愛するよ
タイプは後からでも変更できるよ。変更したいインスタンスを選択してプロパティから変更しよう。
2.ステージにインスタンスをたくさんコピーする。
3.シンボルを編集して色を変えよう。
[編集/シンボルの編集]、もしくはライブラリのお花のシンボルをダブルクリックしても編集画面に入れるよ バケツツールで花を黄色にしよう。 [編集/ドキュメントの編集]かステージの左上にあるステージボタンをクリックしてムービー編集画面に戻ろう。
シンボルを編集するとステージにコピーしたインスタンスも全て変更されるよ。
4.インスタンスの色を変えても他のインスタンスには影響はない。
今度はインスタンスを1つ選択して[プロパティ/カラー効果]で着色してみよう。
選択したシンボル以外の色は変わらないよ。
シンボルの編集:全てのインスタンスに影響する
インスタンスの編集:編集したインスタンスのみに影響する
10.応用アニメ【パスに沿った回転と加速減速】
www.youtube.com トロッコに乗ったふにゃもらけが山を走っていくアニメーション。
減速 youtu.be
加速 youtu.be
----------------------------------------------------------------------------------------
やってみよう!
パスに沿った回転と加速減速
1.準備
何かイラストを描いてモーションに沿ったアニメを作ろう。
5.基本のトゥイーンアニメ(モーションガイドに沿って動かす)
で使ったファイルを使うといいよ
2.
トゥイーンの最初のキーフレームを選ぶ。 プロパティが「トゥイーン」になる。「パスに沿って回転」にチェックを入れよう。
3.再生してみよう
youtu.be インスタンスがモーションガイドに沿って角度が変化するアニメになったよ。
いい感じにアニメしない場合はキーフレームの角度を変えてみよう。 ガイドラインに対してインスタンスは垂直だと上手く見えるよ。
4.「イージング」を使って加速を表現してみよう
トゥイーンプロパティにある「イージング」の数値を「-100」にする。
最初はゆっくりと動き出し徐々に加速するアニメになるよ。
5.「イージング」を使って減速を表現してみよう
トゥイーンプロパティにある「イージング」の数値を「100」にする。
早いスピードで動き出して徐々に減速するアニメになるよ。
イージングの数値を変えると速さが変わるからイメージ通りになるように調整しよう。