ＩＣＴメディア編集Ⅱ 2025年10月24日
アニメーション作成演習：形状，色などの変化（１）
Ａｄｏｂｅ Ａｎｉｍａｔｅによる作成演習（教室または自習室での演習用）：
現在は，Ａｄｏｂｅ Ａｎｉｍａｔｅがインストールされており，これを使用していきます．講義は以下の説明にそって作業を行っていきます。以下の画面説明は，Adobe
Flash CS6 Professionalのものであるため，多少の違いがあります．講義中に補足説明をいたします．
１） Ａｄｏｂｅ Ａｎｉｍａｔｅを起動します．
·
スタートメニューから「Adobe Ａｎｉｍａｔｅ 2024」のフォルダメニューを開き，Ａｄｏｂｅ Ａｎｉｍａｔｅを立ち上げてみましょう． 画面は古いバージョンのものです
２）まずは，初期画面を確認してみましょう．
- Ａｄｏｂｅ Ａｎｉｍａｔｅでは，切り換えていく１つ１つの画像の画面をフレームと呼びます．中央の灰色の部分がフレームです．
- そのフレームの属性が右の「プロパティ」のウインドウに表示されています．
- 右の端のツールのウインドウには，ペン，鉛筆，ブラシ，消しゴムなどの描画のツールが用意されています．
- 中央の下には，「タイムライン」のウインドウがありますが，これは，フレームを時間と共にどのように配置し，制御するのかを表しているものです．
- メニューバーの「ウィンドウ」で、各ツールなどの表示、非表示を選択できます。
３）まずは、新規にファイルを作成し、フレーム上に絵を描いてみましょう．
- メニューバーの「ファイル」の「新規」で新規ドキュメントを開くウインドウから、プリセットとして、キャラクターアニメーションの大きさをSVG（640×480）として、フレームレートは「30.0」、プラットフォームを「ActionScript 3.0」を選択します．
以下のような640×480ピクセルのキャンバス（以下の例は５５０ｘ４００pixel）が開きます。
４）では，ツールを使ってフレーム上に絵を描いてみましょう．
- 以下の図に示すように，ブラシツールを選択し，描く色をカラーパレットなどで選択し，フレーム上の適当な位置に四角形を描いてみてください．1フレーム目（キーフレーム）に四角形が描かれたでしょうか．キーフレームとは画像の内容が変化するキーとなるものをすることになります．第１フレームは，初めからキーフレームとなっています．
A.ブラシツールの選択
B.色の選択（赤色）
C.フレームへ四角形を描画（第１フレームのタイムライン上の小さい中抜きの丸印が，描画すると黒丸になる）
５）第5フレーム目を選択し，キーフレームを挿入します．単にキーフレームを挿入すると，手前のキーフレームの画像がコピーされて表示されます．
- 以下の図に示すように，タイムラインのウインドウ上で第5フレームを選択し，メニューバーの「挿入」から「キーフレーム」を選択し，第5フレームも第1フレームと同じ画像をコピーします．さらに，カラーパレットを用いて第5フレームの四角形の色を赤色から青色に変化させます．
D.タイムラインの第5フレームを選択
E.キーフレームの挿入．（メニューバーの“タイムライン”の中に“キーフレーム”があります。
（または、5フレーム目を選択してマウスの右ボタンからのプルアップのメニューからも選択できます。）
F.第5フレームがキーフレームとして，第1フレームと同じ画像が挿入される
G.カラーパレットを用いて色を青色に変える
６）第15フレーム目を選択し，空白キーフレームを挿入します．この白紙の空白キーフレームに黄色い丸を描いてみてください．
完成したら，再生してみてください．
- 以下の図に示すように，タイムラインのウインドウ上で第15フレームを選択し，メニューバーの「挿入」から今度は「空白キーフレーム」を選択し，第15フレームには白紙のフレームを準備します．そのフレームにブラシツールとカラーパレットを用いて黄色い円を書きます．出来上がりを再生してみます．
H.タイムラインの第15フレームを選択し空白キーフレームを挿入します。（ “タイムライン”の中に“空白キーフレーム”があります）
I.空白キーフレームを挿入します．（マウスの右ボタンを押してメニューからも選択できます）
J.白紙のキーフレームが表示されるはずです．
K.白紙のキーフレームにブラシのツールを用いて黄色い丸を書き入れます．
L.タイムラインで第1フレームを選択し，「Enter」キーを押します．アニメーションが再生されるはずです．メニューバーの「制御」から，「再生」を選択しても，再生が可能です．また，同じプルダウンのメニューの「ムービーのプレビュー」でも見ることができます．
結果は，5フレーム，15フレームで画像が切り換わるアニメーションが出来上がったと思います．表示は，タイムラインのウインドウの下部に，「３０ｆｐｓ」とあるように1秒あたり３０フレームを表示するような設定となっています．右にあるウインドウのドキュメントのタブの中からFPSで、１２ｆｐｓに変えてみましょう。
７）タイムラインのウインドウの第5フレーム目を選択し，このフレームから次のキーフレームまでにＡｄｏｂｅ Ａｎｉｍａｔｅの「トゥイーン」機能を用いて，5フレームの青い四角形と15フレームの黄色い円のモーフィングをさせてみましょう．ここでは，シェイプトゥイーンの機能を用いて，5フレームと15フレームのキーフレームの間を埋める画像をＡｄｏｂｅ Ａｎｉｍａｔｅ（Flash）に自動的に生成させます．トゥイーン（Tween）とは，“in-between” (アニメーション制作でキーとなる原画を補間した動画を作成していく工程) を短縮した表現です．前回までのPhoto Shopでも使った機能です．
- 以下の図に示すように，タイムラインのウインドウ上で第5フレームを選択し，メニューバーの「挿入」の「シェイプトゥイーン」を選択し、モーフィングを自動的に生成させます．
M.タイムラインの第5フレームを選択し，メニューバーの「挿入」の「シェイプトゥイーン」を選択します．
N.プロパティの中に「トゥイーン」の設定が表示されたことを確認します．
O.タイムラインの5～15のフレームを示す部分が薄い緑色に変わり，矢印が示されたと思います．これが「シェイプトゥイーン」が設定されたことを示します．うまくいかない場合には，矢印の部分が，点線となります．
出来上がりを再生してきてください．うまく，形状と色の変化がモーフィングされているでしょうか．
P.図にあるように，タイムラインのウインドウ上の「オニオンスキンボタン」で，変化の全体像を見ることができます．タイムラインのフレームのどこからどこまでをフレーム番号上の〔〕で調整して，「シェイプトゥイーン」の部分を見てみましょう．
８）さらに，以下の図のように空白のキーフレームを25フレーム目に挿入し，図形を2つ描いて，シェ－プトゥイーンを設定し，再生してみましょう．
- これまでと同じように，空白のキーフレームを挿入し，図形をブラシツールで描いて，シェイプトゥイーンの設定をします．出来上がりをオニオンスキンでも見てみましょう．
Q.タイムラインの第25フレームに空白キーフレームをいれ，図形を書きます．
R. 15から25フレームをオニオンスキン機能で見たところです．1つの図形から，2つの図形へ変化させることができています．
タイムウインドウの25フレームを選択し，ドラッグして，横に35フレームまで持っていき，ドロップすると，表示フレーム数を増加させることが簡単にできます．再生してみましょう．
またもとの25フレームに終了位置をもどしてみましょう．不要なフレームは，ｓｈｉｆｔキーを押しながらフレームを選択し，マウスの右ボタンでプルダウンのメニューから「フレーム削除」で消去可能です．間のフレームの削除や挿入も、このプルダウンのメニューからできます。
８）出来上がったアニメーションをファイルに保存しましょう．保存の形式が以下のように様々にあります．ファイルの特徴や大きさを把握しておきましょう．
- Ａｄｏｂｅ Ａｎｉｍａｔｅで編集可能なファイルの保存（*.fla）：Ａｄｏｂｅ Ａｎｉｍａｔｅを使って編集を行うことができるファイルとして保存するには，メニューバーの「ファイル」から「名前を付けて保存」で，Ａｎｉｍａｔｅドキュメントという，拡張子が「*.fla」のファイルとして保存します．
- Flash形式のアニメーションファイルの保存（*.swf）：Flash形式のアニメーションファイルを作成するには，メニューバーの「ファイル」の「書き出し」から「ムービーの書き出し」を選択し，ファイルの種類を「SWF
ムービー（*.swf）」という，拡張子が「*.swf」のファイルとして保存します．この形式のアニメーションは，WebブラウザにFlash Playerなどのプラグインがあれば再生可能で，ファイルサイズも小さくなるものでした．ただし、現在、Flash
Playerのサポートは終了しており、「＊．ｓｗｆ」のファイルを書き出しても、再生ができないかと思います。残念ながら、Flashのサービスがは2020年12月30日でサポート終了してしまいました。これは、スマホなどが対応していないことが影響しており、時代遅れになったこともあり、惜しまれながらではありますが、現在、ブラウザでの再生ができなくなってきます。
https://www.adobe.com/jp/products/flashplayer/end-of-life.html
- 上記のため、以下に示す、ムービーとしての書き出しの中の、アニメーションＧＩＦとしての書き出しなどもありますので、試してみてください。
- アニメーションGIF形式のアニメーションファイルの保存（*.gif）：これまでと同じようにアニメーションGIF形式のファイルを作成するには，メニューバーの「ファイル」の「書き出し」から「ムービーの書き出し」を選択し，ファイルの種類を「アニメーションGIF（*.gif）」という，拡張子が「*.gif」のファイルとして保存します．（ファイルサイズは大きくなり，画質もFlash形式からは悪くなります．）
S. アニメーションとしてファイルを作成する場合は，ムービーの書き出しを使います．（メニューバーの“書き出し”の中に“ムービーの書き出し”があります）
- 「sample1」などの名前を付けて保存し，ファイルの大きさやWebブラウザ上での動きなどを確認してみてください．