ＩＣＴメディア編集Ⅱ 2025年11月7日
アニメーション作成演習：画像内の位置などの変化
画像内の物体の変化：
前回にも示したように，画像内にある物体に対する変化には，画面上での位置を動かすこと，違う物体に形状や色などを変化させることなどが考えられます．これらは，アニメーション作成用のソフトウェアには，キーとなる画像から自動的に補間する画像を生成する機能を持っているものもあり，それらを用いることで，作画作業の大幅に短縮することができます．
前回は，モーフィングと呼ばれる，２つの画像間における物体の形状や色の変化をAnimateの機能である「シェイプトゥイーン」機能で実現しました．
今回は，画像内の物体の変化として，画像上で，物体の位置を動かすこと，物体の方向などを変化させること，物体の大きさを変化させること，物体の動きを表現するように形状を変化させること，それらの組み合わせを使った表現などについて，Animateの機能を利用して実現していきます．実際にAdobe Animateをもちいて，下記の説明にしたがって，演習を行っていきましょう．
Animateによる作成演習：
Animateについては，ここをクリック．ソフトのバージョンによる注意事項有り
以下の資料は， Adobe Ｆｌａｓｈ CS4（現在，教室のPCにはAdobe Animate 2024が入っています）の画面などを用いています．操作などについては，ほぼ同様ですが、類推して進めていただくようお願いいたします．
※明治大学12号館のメディア教室、自習室、教員用端末室でAdobe
Creative Cloudを利用する場合、 AdobeIDが必須となります。以下のPDFをよく読んで、対応ください。
https://www.meiji.ac.jp/ksys/it/6t5h7p00000i4mht-att/a1641975028762.pdf
前回に引き続き，アニメーションの作成には，Adobe Animate 2024を用います．まずは，以下の例に示すようなアニメーションを実現するための機能と操作を順に見ていきましょう．ここでは，画像上で，物体の位置を動かすこと，物体の方向などを変化させること，物体の大きさを変化させることなどを行うことになります．
１） Adobe Animate 2024を起動します．
·
スタートメニューから「Adobe Animate 2024」を立ち上げてみましょう． 画面は古いバージョンのものです
はじめに，メニューバーの「ファイル」の「新規」で新規ドキュメントを開くウインドウから、プリセットとして、キャラクターアニメーションの大きさをSVG（640×480）として、フレームレートは「30.0」、プラットフォームを「ActionScript 3.0」を選択します．
以下のような640×480ピクセルのキャンバス（以下の例は５５０ｘ４００pixel）が開きます。
２）前回と同様に，テキストツールを用いて，文字をフレーム上に入力してみましょう．文字のままでは，トゥイーンなどの設定ができないので，文字を「シェイプ（形）」として分解しておきます．ここでは，2文字以上の文字を入力しますので，2回分解作業をします．
- 以下の図に示すように，テキストツールを選択し，描く色をカラーパレットなどで選択し，フレーム上の適当な位置に文字（ここでは明治）を入力してみてください．プロパティウインドウで，文字の大きさ（72ポイント），色（青）などが調整できます．さらに，文字から形として認識させるために，メニューバーの「修正」から「分解」を選択して，入力した文字を「シェイプ」とします．ここでは，2回の分解が必要です．
A. テキストツールの選択
B. 文字の調整はプロパティで行います．
C. 文字を形として分解しておきます．文字枠がなくなるまで，2回行います．
D. 文字の入力枠が消え，このようになったでしょうか．
３）入力した文字をさらにシンボル化します．シンボルには名前をつけておきます．シンボル化されたものは，ライブラリの中に入ります．
- 形として分解した文字をさらにシンボル化します．マウスの右ボタンで，プルダウンのメニューから，「シンボルに変換」を選択します．シンボルに名前を付け，グラフィックとして登録します．シンボル化されたものは，シーンの上（フレーム上）で変形させても，元の形状は変わらず再利用可能であり，
効率的に用いることでファイルを小さくできます．
(もしくは，メニューバーの「修正」の中のシンボルに変換）
E. 分解を行った文字をマウスの右ボタンでプルダウンのメニューを出し，「シンボルに変換」します．
F. シンボルに変換のウインドウ上で，名前（明治1）を入力し，タイプ（グラフィック）を選択します．
G.
名前（明治1）とタイプ（グラフィック）を入力し，基準点を中心部分に変えましたら，OKを入力します．
H. 入力した文字に枠がつき，中に丸い印がつきます．シンボルの情報は，メニューバーの「ウインドウ」の「ライブラリ」で確認できます．
４）15フレーム目に，キーフレームを挿入します．1フレームと同じものが15フレームに入ります．「クラシックトゥイーン」の機能を使って，1フレームから15フレームまでの移動の画像を生成させます．
- 以下の図に示すように，15フレーム目にキーフレームを挿入します．次にタイムラインウインドウ上で1フレームを選択し，マウスの右ボタンのプルアップメニューで「クラシックトゥイーン」を選択するか，メニューバーの挿入で「クラシックトゥイーン」を選択します．
I. タイムラインのウインドウ上で15フレームを選択し，マウスの右ボタンで，プルダウンのメニューから「キーフレームの挿入」を行います．（メニューバーの「修正」のプルダウンのメニューからでも選択できます．）
J. 第１フレームを選択し，メニューバーの挿入からクラシックトゥイーンを選択します．
（K. もしくはタイムラインのレイヤー１の１から１４フレーム上で，マウスの右ボタンを押し，プルアップのメニューから「クラシックトゥイーンを作成」を選択することでも可能です）
L. クラシックトゥイーンの設定（プロパティウインドウ部分）を上の図のようにします．
M. クラシックトゥイーンが設定されると，タイムラインウインドウの1フレームから15フレームまでが矢印と薄い空色になります．失敗すると，点線となります．失敗した場合には，シンボル化されているかなどを確認してください．
N. モーショントゥイーンが設定されましたが，15フレームは，1フレームと同じであるため，位置を移動します．ツールの中の矢印のアイコンの「選択ツール」を使用します．
O. 15フレームのシーンで，位置を右に動かします．
P. オニオンスキンで見てみると補間された文字の画像が表示されるため，移動位置の変化がよくわかります．
５）次は，移動後の文字の大きさを拡大してみましょう．
- タイムラインウインドウ上で15フレームを選択し，フレーム上の文字を選択し，マウスの右ボタンでプルダウンのメニューを出し，変形をさせます．
Q. 15フレームの文字の上で，マウスの右ボタンを押して，プルダウンのメニューから「自由変形」を選択します．
（自由変形ツールも使用できます）
R. 文字の周囲に枠と小さな黒い四角形が表示されたことを確認します．
S. 自由変形では，小さな黒い四角形のいずれかをクリックしたまま，変形したい方向に移動し，クリックを放すと変形が行われます．文字の中央の丸印が，変形の中心点になります．この丸印の位置を変えると，変形されるときの中心が変化します．
T. ここでは，文字の左端をクリックし，文字を拡大しています．
U. キーフレームを拡大するだけで，途中の画像もそれに合わせて，大きさが自動的に調整されます．オニオンスキンで見てみると補間された形状の変化がよくわかります．
６）次は，移動後の文字を斜めにしてみましょう．
- タイムラインウインドウ上で15フレームを選択し，先ほどと同じようにフレーム上の文字を選択し，マウスの右ボタンでプルダウンのメニューを出し，回転を行います．
V. 15フレームの文字の上で，マウスの右ボタンを押して，プルダウンのメニューから「自由変形」を選択します．
W. 文字の周囲に枠と小さな黒い四角形が表示されたことを確認します．マウスのカーソルを文字枠の四隅に持って行き，右図のようにカーソルを変化させます．
X. マウスのカーソルが，回転をあらわす円形の矢印になりますので，その状態で四隅の小さな黒い四角形をクリックし，回転させます．
Y. キーフレームの文字を回転し斜めにするだけで，途中の画像もそれに合わせて，回転し斜めの傾斜が自動的に調整されます．オニオンスキンで見てみると補間された形状の変化がよくわかります．
７）次は，途中のフレームの画像をキーフレームに変換し，その画像位置を動かすことで，さらに物体の動作を加えて見ましょう．
- タイムラインウインドウ上で7フレーム目に新しい文字の移動位置を設定し，途中の文字の動きを追加します．
A1. タイムラインの7フレームを選択します．
B1. 7フレーム目を選択した位置で，マウスの右ボタンを押し，プルダウンのメニューから，「キーフレームに変換」を選択します．
C1. タイムラインのウインドウ上で７フレーム目がキーフレームの印となります．
D1. 文字を選択し，マウスのカーソルが縦横に十字の小さい矢印に変わりましたら，ドラッグで移動したい位置まで，文字を動かします．
E1. 移動位置まできたら，ドロップします．
F1. 動きを見てみましょう．オニオンスキンを用いて，移動の全体象を見てましょう．補間された形状の変化がよくわかります．
９）さらに，７レーム以降の画像の動きをガイド線に沿うように複雑にする動作を加えて見ましょう．
- タイムラインウインドウ上でレイヤー１を選択し，「クラシックモーションガイドの追加」によって，レイヤー１に対するガイドレイヤーを表示させます．そのガイドレイヤーにガイドとなる線を「鉛筆ツール」などで描き，7フレーム，15フレームの文字をガイドに吸着させます（プロパティの設定によって場所により，自動的に1フレームも吸着しています．）．
G1. タイムラインのウインドウ上のレイヤー１の表示部分を左クリックして，プルアップのメニューを表示させ，「クラシックモーションガイドを追加」を選択し，レイヤー１のモーションガイドを追加します．
H１. レイヤー1に対するガイド：レイヤー１が，タイムライン上に表示されましたでしょうか．
I1. タイムラインウインドウのガイド：レイヤー１のフレーム部分をダブルクリックで選択します．
J1. ガイド：レイヤー1の上に，「鉛筆ツール」を用いて，移動のガイドとなる線を，文字の中央から描きます．
K1. タイムラインウインドウで15フレームを選択し，文字を先ほど描いたガイドラインの終点の位置に持っていきます．文字の中央の丸印を終点に合わせます．この時，基準点がガイドラインの上にないと正しく沿った動きになりません．確認してください．
L1. ガイドラインの終点に，文字の中央の丸印を終点に合わせます．
もしもフレーム1がガイドラインに沿っていたら，プロパティウインドウの「吸着」をはずし，位置を変えてみましょう．
M1. 設定が完了したら，動きを見てみましょう．Enterキーを押して，全体の動きをみて見ましょう．オニオンスキンで見てみると補間された動きが，ガイドラインに沿って複雑に変化していることがよくわかります．
アニメーションとしたときには，このガイドラインは，表示されません．
１０）最後に，単にガイドラインに沿った移動だけではなく，このガイドラインのパスに沿った回転を行うように設定してみましょう．
- パスに沿って回転するように，7フレームを選択し，プロパティウインドウにある回転の設定において，「パスに沿って回転」をチェックします．
N1. タイムラインのウインドウで，パスに沿って回転させたい7フレームを選択します．
フレームのプロパティの設定において，「パスに沿って回転」をチェックします．
P1. 動きを見てみましょう．オニオンスキンを用いてみると，ガイドラインのパスに沿って回転しながらパスの終点に移動していくことがよくわかります．
１１）前回と同じように，出来上がったアニメーションをファイルに保存しましょう．保存の形式（*.fla：Animateでの編集可能形式，*.gif：アニメーションGIF形式，さらに、*.mp4：ビデオ/メディアを書き出し（mp4のビデオ形式の動画））がありますので，用途で使い分けましょう．
以下は、Adobe Animate 2024のファイル保存形式に沿って解説しています。
- Flashを使って編集を行うことができるファイルとして保存するには，メニューバーの「ファイル」から「名前を付けて保存」で，Animateドキュメントという，拡張子が「*.fla」のファイルとして保存します．
- アニメメーションGIF形式のファイルを作成するには，メニューバーの「ファイル」から「書き出し」を選択し，さらに「アニメーションGIFを書き出し」を選択します。「イメージを書き出し」というウインドウが新たに表示されますので、サイズやループの修正などをしてみてください。ファイルの種類「アニメーションGIF（*.gif）」で，拡張子が「*.gif」のファイルとして保存されます。ファイルサイズは大きくなり，画質は次のビデオ形式よりは良いです．
- MP4ビデオ形式の動画ファイルを作成するには，メニューバーの「ファイル」から「書き出し」を選択し，さらに、「ビデオ/メディアを書き出し」を選択し、開いたウインドウの書き出しボタンを押す（しばらくするとAdobe Media Encoder 2024が開いて、正常に保存されるはずです。失敗した場合は、以下を参照して、再度行ってください。）。
大学のPCにおいて、初期状態では、Adobe
Media Encoder 2024を使用するためのファイルが1つ不足している可能性があり、エラーがでることがあります。その場合には、エラーの表示に従って、メモ帳などで、不足しているとされるファイル名で空の状態のファイルを作成し、指定のフォルダに置いてください。このファイルが無いとエラーが表示され、ビデオファイルが作成できません。
ファイルの種類「mp4
ムービー（*.mp4）」で、拡張子が「*.mp4」のファイルとして保存されます。この形式のアニメーションは，ビデオ映像としての再生可能で，ファイルサイズはかなり大きいものとなります．
Q1.
アニメーションとしてファイルを作成する場合は，ムービーの書き出しを使います．（Adobe
Animate 2024では、「書き出し」を選択し、さらに、各書き出しを選択することになります。）
- それぞれ「sample3」などの名前を付けて保存し，ファイルの大きさやWebブラウザで確認してみてください．
- Webブラウザによってはセキュリティの関係ですぐには再生できないもののあります。再生を許可するようにしてみてください。
実習課題：
時間があれば，Adobe Animateに慣れるためにも，より複雑な図形の動き，さらにシンボルと，前回行ったレイヤーを追加した複数の物体の移動に挑戦してみましょう．
