KOBITブログ

シネマグラフを簡単に作るAdobe Animate CC 1

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


はじめに

今回はAdobe Animate CCを使ってシネマグラフを作成していきたいと思います。
Adobe animate CCは元がAdobe Flash Professionalから来ており、こちらの方が聞き覚えのある方も多いかと思います。
操作感覚も似ていて、馴染みやすいものになっています。

1.画像の準備

Photoshop CC を使用して、画像の下準備を行います。
各パーツごとに分ける必要があるのでこの時点で、どのような動画を制作するのか構成をしておく必要があります。
今回は、コーヒーカップから現れる煙を制作していきます。
【背景】【煙】の2つの要素に分けました。
ここでは煙のない画像を準備して、煙自体は別でPhotoshopで制作しています。
煙の作り方は【Adobe CC Photoshop】簡単に合成用の「けむり」を作る方法を参照してください。

2.Adobe animate CCの起動

Adobe animate CCを起動し、ファイル>新規から今回は【HTML5 Canvas】を選択しました。
種類に関しては必要とする任意のデータを選択してください。サイズは後からでも修正できます。

3.画像を読み込む

Photoshop CCで作成したオブジェクトを【ファイル】>【読み込み】>【ステージに読み込み】もしくは、画像を直接ステージへのドラッグ&ドロップで読み込み、位置を調整します。
さらに、画面左下にある+アイコン【新規レイヤー】を選択し、それぞれのオブジェクトを追加し、それぞれのレイヤー名を何の素材か分かるものに変更します。

4.レイヤーの編集

レイヤーを選択した状態でツールバーにある押しピンのような形のアセットワープツールで、ワープのポイントをつけます。

5.キーフレームを挿入する

タイムラインで最終フレームクリックし、キーフレームを挿入します。

6.中間の編集

5で伸ばしたフレームの中にさらにキーフレームを追加し、ワープツールを動かして動きをつけます。
その後、それ以降にもいくつかキーフレームを置いて、さらに動きを追加します。

6.トゥイーンを作成

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

8.確認する

動きを確認するには、タイムライン上部にある再生ボタンをクリックします。
また、その2つ左の円を描いた矢印をクリックし、ループで確認ができます、その際はループ範囲の設定もタイムライン上部のバーで行うことができます。

まとめ

今回は、ビットマップ画像に動きを加える編集を行い、シネマグラフのような動画を制作しました。
次回はAdobe animate CCの書き出しの種類の紹介を行います。
今月は今回から4回にわたって、Adobe Animate CCをご紹介していきます。
Flash時代からある懐かしの操作から新たな要素など、様々な機能の中からベーシックなものを使用していきたいと思います。

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

kitano

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

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


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