WEB制作・開発

ベクター絵を動画化する(後編:オブジェクトを編集/書き出し) Adobe Animate CC 3

北野敦子
北野敦子
2020/03/12 10:57

はじめに

前編はステージ内をバウンドするてんとう虫のアニメーションを作成しました。
今回は、てんとう虫の表情の変化を追加し、最終的な書き出しを行っていきます。

1.オブジェクトを選択

編集したいキーフレームを選択し、オブジェクトをダブルクリックします。

2.グループ内を選択

オブジェクをはグループ化されているので、そのオブジェクトをさらにタブルクリックし、グループ化さてたここのオブジェクトを選択できるようにします。

3.画像を編集

ベクターデータで読み込まれているのでそれぞれのパスのオブジェクトを個々に編集できます。
ここでは白目、黒目の部分を細くし、目のハイライトのカラーを削除、開いていた口を閉じました。

4.繰り返す

その他の画像も同様の編集をお行います。
他の、壁にぶつかって変形しているてんとう虫のキーフレームに関しても同様の編集を行います。

5.確認

再生ボタンでタイムラインの再生を行い動くを確認します。
ぶつかる毎に瞬きし、話しているように口が動くようになりました。

6.書き出し

今回は、アニメーションGIFとして書き出します。
ファイル>書き出し>アニメーションGIFとして書き出しを選択します。

7.アニメーションGIFの確認

ブラウザにドラッグ&ドロップすることで動くの確認をすることができます。

まとめ

今回は複雑な動きを加えていませんが、より動きのあるアニメーションを作る場合は、第一回目ののシネマグラフのようにバーツ毎にレイヤーを分け動きを加えていくことで、さらに細かなアクションを加えることができます。

まとめ

これで、ステージ内をバウンドするてんとう虫が完成しました。
さらに次回はこのアニメーションの追加の動作として、てんとう虫の表情の切り替えを加え、アニメーションの書き出しまでを行っていきたいと思います。

著者:MainYard Design(メーンヤードデザイン) 北野敦子

kitano

1987年大阪出身。
生活する上で必ず目にするデザインされたものたち。 街を歩くだけでも無限の魅力があふれています。 ある日ふとそれらに魅了され別業界からデザイナーへ転身。 関西を中心にグラフィックデザインからブランド戦略提案などを展開中。
2012年タイポグラフィ作品展「OKU-2」出展。第31回読売広告大賞協賛社賞受賞。

※KOBITブログでは、定期的に北野敦子さんに記事を寄稿していただいております。
デザインに関するものを中心に、役立つ記事を数多く提供していただいておりますので、ぜひ他の記事もご覧ください。
北野敦子さんによる寄稿記事を読む

納品物クオリティーのアクセス解析レポートを1分で。

Google Analytics・Search Consoleから
わかりやすいPowerPoint・Excelレポートを生成

report
HOMEKOBITブログWEB制作・開発ベクター絵を動画化する(後編:オブジェクトを編集/書き出し) Adobe Animate CC 3