ＩＣＴメディア編集�U　2025年10月24日

アニメーション作成演習：形状，色などの変化（２）

Ａｄｏｂｅ　Ａｎｉｍａｔｅによる作成演習（教室または自習室での演習用）：

現在は，Adobe Animate 2024がインストールされており，これを使用していきます．講義中に説明をして行きます．画面の説明は，Flash Professional CS6のものがあるため，Ａｄｏｂｅ　Ａｎｉｍａｔｅと読みかえをし、講義中に補足説明をします．

１） さらに形状の変化の設定についての機能を試していきましょう．

· 新規にファイルを作成していくため，メニューバーの「ファイル」から「新規」であらたなフレームを表示させます．（プリセットのSVGを選択して、 “ActionScript 3.0”を選択します）

２）テキストツールを用いて，文字をフレーム上に入力してみましょう．文字のままでは，シェイプトゥイーンなどの設定ができないので，文字を「シェイプ（形）」として分解しておきます．

• 以下の図に示すように，テキストツールを選択し，描く色をカラーパレットなどで選択し，フレーム上の適当な位置に文字（ここでは1）を入力してみてください．プロパティウインドウで，文字の大きさ，色などが調整できます．さらに，文字から形として認識させるために，メニューバーの「修正」から「分解」を選択して入力した文字を「シェイプ」とします．

　A.テキストツールの選択

　B.文字の調整はプロパティで行います．

　C.文字を形として分解しておきます．（Animate 2024では、上から4番目にあります）

　　D.文字の入力枠が消え，このようになったでしょうか．

　

３）10フレーム目に，空白のキーフレームを挿入し，テキストツールで文字を同じように入力し，形として分解しておきます．

• 以下の図に示すように，10フレーム目に「２」の文字を赤色で入力し，分解まで行っておきます．

　E.空白のキーフレームの挿入，文字入力，分解まで行います．

４）「シェイプトゥイーン」の機能を使って，1フレームから10フレームまでの画像のモーフィングの画像を生成させます．

• タイムラインウインドウ上で1フレームを選択し，メニューバーの挿入で「シェイプトゥイーン」に選択します．

　F.シェイプトゥイーンを設定します．出来上がりを再生して見てみましょう．

　G.オニオンスキンで見てみると補間された形状の変化がよくわかりますが，この場合の形状の変化は，かなり強引でしょう．

５）形状の変化に対し，形状変形のヒントを与えることで，より滑らかな変化の画像を生成することが可能です．

• 以下の図に示すように，タイムラインのウインドウ上で第1フレームを選択し，メニューバーの「修正」から「シェイプ」，さらに「シェイプヒントの追加」を選択し，変形のためのヒント図形に与えます．
• この作業を第1フレームと第10フレームで対応付けてシェイプヒントを配置することで，滑らかな形状変化を得ることができます．
• オニオンスキン機能で先ほどと比較してみましょう．

　H.タイムラインの第1フレームを選択

　I.修正で，変形のためのシェイプのヒントを追加させます．

　J.フレーム上の赤いaの印が，2つの画像間における形状の対応させるマークになります．

　K.このマークを形状変化に対応する位置に適当に配置します．

　L.この形状変化のヒントをさらに追加していきます．赤いａのマークの上で，マウスの右ボタンをクリックし，プルダウンのメニューから，ヒントの追加を選択します．また，先ほどと同じように「修正」，「シェイプ」，「シェイプヒントの追加」でも可能です．

　M. さらに追加のシェイプヒントを形状変化に対応する位置に適当に配置します．

　N.第１フレームでの設定が終わりましたら，第10フレームを選択し，図形に配置されているシェイプヒントを形状変化に対応する位置に適当に配置します．

　O.この場合，第１フレームでのａ，ｂ，ｃに対応して，うまく配置していきます．

　P.設定し終えましたら，再生してみましょう．オニオンスキンで見ると，先ほどよりも滑らかな形状変化となっています．シェイプヒントを多くすれば，より滑らかな形状変化を得ることが可能となります．

６）1つの画像に2つ以上の図形を表示し，シェイプトゥイーンをうまく指定する場合には，レイヤーを追加し，図形をレイヤーごとに分けて対応付けしていきます．

• まず新たにレイヤーの追加を行い，そのレイヤーの第1フレームにブラシツールで図形を書き込みます．第10フレームには空白のキーフレームを挿入し，図形を描いて，シェイプトゥイーンの設定をします．出来上がりをオニオンスキンでも見てみましょう．

　Q.タイムラインウインドウの左下にあるレイヤーの追加ボタンで，レイヤーを図のように追加します．

　R. タイムラインウインドウで，追加された「レイヤー2」を選択し，フレームに図形を書き込みます．ここでは，第1フレームの左下に赤い円をブラシツールで描いています．さらに第10フレームに「空白のキーフレーム」を挿入し，第10フレームの右上に青い四角形を描いています．

　S. さらに，シェイプトゥイーンを設定して，再生してみましょう．オニオンスキンで見るとそれぞれが対応して変化していることがわかります．

　

• 出来上がったものをファイル（アニメーションGIF、ビデオ/メディア形式など）として保存し，Webブラウザで確認してみましょう．

　

実習課題：

・ Adobe Animateでのアニメーションの作成，今回は特に形状や色の変化について行いました．Adobe Animateに慣れるためにも，より複雑な図形のモーフィングに挑戦してみましょう．シェイプヒントを活用し，滑らかな変化を実現しましょう．

・ 例えば，漢字の成り立ちについて，モーフィングをしてみましょう．変形のヒントを与えてみましょう．ただし，ヒントは形状によりうまくいかない場合もあります．

　　：　鳥　　，　　：　馬

---

加藤晋のページへ　|　ＩＣＴメディア編集�U　|　10月24日の講義資料の先頭へ