KOBITブログ

ベクター画像を動画化する(前編:オブジェクトを動かす) Adobe Animate CC 2

この記事は約 4分 で読めます。


はじめに

第一回はビットマップの写真を使用したシネマグラフの製作をしました。
今回はアニメーション製作として、ベクター画像を使用したGIFアニメーションの制作をご紹介していきます。
今回はステージ内をバウンドするてんとう虫を作ってみました。

1.イラストの作成

まず初めに、Adobe Illustrator CCを使用してイラストを制作します。
その際、パスデータをアウトライン化しておくと後々楽です。

2.イラストを貼り付ける

次にAdobe Animate CCを起動し、新規ファイルを作成、ステージにコピーペーストで貼り付けることができます。
この際、ai上でグループ化していなければ、commnd+Gでグループ化をすることができます。

3.大きさと位置

オブジェクトの位置とサイズで大きさを調整し、command + Kで整列パネルを表示させ、ステージを基準にチェックを入れて中央揃えの垂直と水平をクリックすることで、ステージのセンターにオブジェクトを置くことができます。
今回は中央でなくステージの上部に設置するようにオブジェクトを設置しました。

4.キーフレームの挿入

まずは最終フレームに右クリックからキーフレームを挿入し、スタートから少し先のフレームをクリック、さらにキーフレームの挿入を行います。

5.オニオンスキン

挿入したフレームで、タイムライン上部にあるオニオンスキンを適応させ、オブジェクトクトを移動させます。

6.キーフレームの挿入と変形

5のキーフレームと最初のフレームとの間にさらにキーフレームを追加し、オプションを押しながら設置面とは逆位置を変形させます。

7.繰り返し

4(途中キーフレームの挿入)~6を繰り返します。

8.確認

タイムライン上部に位置するループ(円を描いた矢印)をクリックし、ループのバーを全てのフレームを覆うように設置し、再生ボタンでタイムラインの再生を行い動くを確認します。
カクカクした状態ではありますが、この段階ではそれ以外に動きに違和感がなければ問題ないです。

9.クラシックトゥイーン

同一レイヤー内の全てのフレームを選択し、右クリックでクラシックトゥイーンを作成します。

10.トゥイーンの調整

プロパティパネル内のトゥイーンから、イージングを【プロパティをまとめて】、エフェクトを【Ease-In】、【Quad】にします。

まとめ

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

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

kitano

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

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


まずは無料ユーザー登録。
すぐに始められます。