ＩＣＴメディア編集Ⅱ 2025年11月7日
アニメーション作成演習：物体の動きの変化
Adobe Animateによる作成演習：
以下の資料は， Adobe Ｆｌａｓｈ CS4
Professional (教室のPCには現在Adobe
Animate 2024が入っています)の画面などを用いての説明となっております．操作などについては，講義中に説明をしていきます．
次に，以下のファイルにあるような物体の動きと位置の移動を組み合わせたアニメーションを実現するための機能と操作を順に見ていきましょう．ここでは，画像内にある物体の動きの変化とこの前に行った位置の移動の変化について，Adobe Animateの機能を活かしてアニメーションを作成していくことにします．
frog1.mp4 （ファイルをダウンロードして再生して見ましょう．Mp4ムービー形式のファイル）
１）さらに起動しているAdobe Animateで新しいファイルで作成していきます．
·
新規にファイルを作成していくため，メニューバーの「ファイル」から「新規」で，Flashファイルを選択し「OK」を押して，あらたなフレームを表示させます．
２）まずは，新規にシンボルを作成します．今回は，シンボルをムービークリップとして，シンボルそのものがフレームアニメーションとして動きを持ったものを作成します．
今回はフレーム4枚で，「かえる」が泳いでいる様子を表現します．
- 以下の図に示すように，まずシンボルを作成します．今回のシンボルは，フレームアニメーションとして作成します．レイヤーをうまく使用し，動きの無い部分と動きのある部分などを分けて作成すると効率的です．
A. メニューバーの「挿入」から「新規シンボル」選択して，シンボルを新たに作成します．
B. 新規シンボルの作成ウインドウで，名前（かえる１）とタイプ（ムービークリップ）をチェックし，OKボタンをクリックする．
C. シンボルをあらわすフレームとして「かえる１」が左上に，「シーン1」の横に表示されている状態で，ブラシツールを用いて絵を書いていく．
D. まず，レイヤー１に頭と胴体の部分を書きます．この絵は，動きの無い部分として他の絵にも共通のものとします．
E. タイムラインウインドウのレイヤーの追加ボタンで，手と足を描くためのレイヤーを追加します．
F. 追加されたレイヤー２に手と足を描いていきます．
G. 手足の動きを表現するため，まず，縮んだ状態の手と足を書き入れます．ここでは，左右対称とするため，左の手足を書いた後，それぞれを選択して，コピーし，同じ画面にペーストします．
H. ペーストした左の手足は，向きが違うので，メニューバーの「修正」の中の「変形」の下の「横反転」を使って，右の手足になるように向きを修正します．
I. 位置をそれぞれ合わせて，まず，1フレームの出来上がりです．
３）今回は，4枚のフレームで泳ぎを表しますので，頭と胴体を描いたレイヤー1を４フレーム目まで延長させます．
- 以下の図に示すように，レイヤー１は動きの無い部分として，４フレーム目まで延長します．
J.
タイムラインウインドウのレイヤー１の４フレームを選択し，マウスの右ボタンを押して，フレームの挿入を行います．
K. 4フレームまで，頭と胴体の絵となります．
４）レイヤー2の２フレーム，3フレームに，「かえる」が泳ぐように手足の動きを描いていきます．
- タイムラインウインドウ上で2フレームを選択し，空白キーフレームを挿入し，絵を描きます．同じように3フレーム目も，空白キーフレームを挿入し，絵を描きます．左右対称であれば，コピーや反転などの機能をうまく使います．
L. タイムラインウインドウでレイヤー２の2フレーム目を選択し，マウスの右ボタンを押して，空白のキーフレームを挿入します．
M. レイヤー２の2フレームの手足には，上記のような少し手を開いて，足を少し伸ばしたものを書きます．オニオンスキンを使うと前の画像をみて比較できます．
N. レイヤー２の3フレームも同じように空白のキーフレームを挿入し，手足には，上記のように手を開いて，足を伸ばしたものを書きます．
O. 4フレームは，2フレームのコピーを使います．2フレームをコピーします．
P. コピーした2フレームを4フレームにペーストします．
Q. これで一連の動きが完成です．オニオンスキンで全体の画像を見てみましょう．
R. 今回作成したものは，シンボルとして，「かえる」の泳ぎを作成しています．これは，ライブラリの中に入っていますので，ライブラリをウインドウから開いて見ましょう．メニューバーの「ウインドウ」の「ライブラリ」選択します．
S. 画面の右にライブラリウインドウが表示されたと思います．名前のリストにある「かえる１」を選択し．シンボルを呼び出します．右上のボタンは，ムービークリップの再生ボタンですから，クリックしてみましょう．
５）作成したシンボルを使って，動きのあるアニメーションを作成しています．
- 以下の図に示すように，先ほど行った物体の位置移動などの機能を用いて，シンボルを移動させます．シンボル自体がフレームアニメーションとして動きを持っているため，組み合わせで，「かえるの泳ぎ」が実現されます．
T. シンボルのフレームウインドウからアニメーションを作成するための「シーン1」のフレームウインドウに切り替えます．左上の「シーン１」をクリックします．
U. 白紙のフレームが表示されます．
V. ライブラリのウインドウから，「かえる１」の画像をシーン１のフレームへドラッグし，適当な位置でドロップします．
W. このシンボルの大きさを調整し，適当な大きさにします．フレーム上の絵の上でマウスの右ボタンをクリックし，プルダウンのメニューから「自由変形」を選択します．
X. 絵の枠にある四隅の四角形をクリックし，適当な大きさに縮小します．
Y. タイムラインウインドウで，40フレームにキーフレームを挿入します．
Z. タイムラインのウインドウ上のレイヤー１の表示部分を左クリックして，プルアップのメニューを表示させ，「クラシックモーションガイドを追加」を選択し，レイヤー１のモーションガイドを追加します．
A1. タイムラインウインドウ上で，モーションガイドのレイヤー１をクリックします．
B1. そのガイドレイヤーにガイドとなる線を「鉛筆ツール」などで描きます．このとき，始点と終点は必ず離しておきます．
C1. ガイドラインのパスの始点に１フレームの絵の位置と，終点に40フレームの絵の位置を配置します．
この時，基準点がガイドラインの上にないと正しく沿った動きになりません．確認してください．
D1. レイヤー1の1フレームを選択し，クラシックトゥイーンを作成します．
E1. １フレームから40フレームまでが，矢印で示されます．完成したらパスに沿った動きを確認しましょう．このとき，Enterなどで動きを確認しても，シンボルの動きは反映されません．
F1. １フレームのモーショントゥイーンの設定で，プロパティウインドウで，「パスに沿って回転」をチェックします．ここでもパスに沿った動きを確認しましょう．
G1. 途中の20フレームをキーフレームに変換します．
H1. 変換したキーフレームの絵を拡大します．
できあがりましたら，再生してみましょう．オニオンスキンでも動きを確認してみましょう．シンボル自体の動きは反映されていませんので，位置が移動しているようにしか見えませんが，これはシンボルの位置の移動を示しています．
６）最後に完成したアニメーションの実際の動きを見てみましょう．
- 通常の再生方法では，シンボルのフレームアニメーションが再生されませんが，以下の方法でムービーファイルと同様のプレビューを見ることができます．
I1. メニューバーの「ファイル」の中の「パブリッシュプレビュー」の「Flash」を選択します．ウィンドウが開いて，プレビューを見ることができます．
J1. プレビューで動きが早い場合などはフレームレートで調整します．
７）アニメーションファイルとして保存して見ましょう．アニメーションGIFとFlashムービー形式で比較します.
- 出来上がったものをファイル（アニメーションGIF，ビデオ形式）として保存し，Webブラウザで確認してみましょう．アニメーションGIFでは，シンボルの動きはアニメーション化されないことがわかります．
- ビデオ/メディアを書き出しで作成したものでは、シンボルの動きもアニメーション化されていることがわかります。しかし、mp4のファイルはサイズが大きく、繰り返しはされません。
アニメーションGIFのファイル
frog1.mp4（完成したmp4ビデオ形式のファイル例）
実習課題：
・
Animateでのアニメーションの作成として，2週にわたり基礎的な機能を使ってみました．Animateに慣れるためにも，より複雑な図形のモーフィング，物体の移動や動きの実現に挑戦してみましょう．