はじめまして。入社2年目のミナミです。
フロントエンドの修行をしながら、デザイナーとしても仕事をしています。

最近は弊社プロジェクトの一環として、アニメーション動画を作成しています。「アニメ?なんだか難しそう・・・」と思われるかもしれませんが、最近は優秀なソフトが多く提供されており、手軽に作成できるようになっています。その中でも今回は、adobe animate CCを用いたアニメーション動画の作り方をご紹介したいと思います。

animate CCって?

アドビシステムズが開発・提供しているアニメーション作成ソフトです。
もともとはAdobe Flash Professionalとして提供されていたもので、直感的な操作でアニメーションを作成することができます。

Adobe Creative Cloudにて単体登録、もしくはコンプリートプラン登録で使用できます。無料のお試し期間がありますので、まずはダウンロードして触ってみましょう!
https://www.adobe.com/jp/products/animate.html

キャラを表示してみよう

さっそくanimate CCを起動してみましょう。新規作成からHTML5 Canvasを選択します。

まずは画像を表示してみましょう。左上、白い四角の領域が「ステージ」と呼ばれるもので、ここがアニメの画面になります。お好きなキャラクターの画像ファイルを用意し、ステージへドロップ&ドロップします。

animate2

画面にキャラクターが現れました!ちなみにこのヤギは、スーパーソフトウエア開発のiOSアプリ「ぺったす」のキャラクターです。(少し顔がまるくなりました。笑)
LINEスタンプも配信中ですのでよろしければチェックしてみてくださいね!

キャラを移動させてみよう

ウィンドウの下部分「タイムライン」を見てみましょう。
animate30
ここには「レイヤー」と「フレーム」が表示されています。今、このヤギは「レイヤー1」の1フレーム目に配置されている状態です。
少しずつヤギの位置をずらした「フレーム」を複数作成することで、再生した時にヤギが移動しているように見えるのです。(パラパラまんがの要領ですね。)

ではヤギを右から左へ移動させてみましょう。まず、「レイヤー1」の10フレーム位置を右クリックして「フレームを挿入」を選択します。
animate3
すると2~10フレームが作成され、1フレーム目と同じ場所にヤギが配置されます。
このヤギの位置を少しずつずらしていくのですが、手作業で10フレーム分作業するのは大変ですよね。
「モーショントゥイーン」という機能を使えば、開始位置と終了位置を指定するだけで、中間部分は自動的に配置してくれます!

その前に、ヤギを「シンボル化」しましょう。ヤギを右クリックして「シンボルに変換」を撰択します。分かりやすい名前をつけておきましょう。「種類」は「グラフィック」を撰択します。
animate4

次にモーショントゥイーンの設定をします。タイムライン上の、さきほど作成したフレームのどれでもいいので右クリックします。「モーショントゥイーンを作成」を撰択し、フレームが青色に変化すればOKです。
animate5

いよいよヤギを移動させます!タイムライン上で、10フレーム目をクリックして撰択します。
そのあと、ステージ上のヤギを左へドラッグしてみてください。
animate6
なにやら青い丸のついた線が現れましたね。
線はヤギの軌道、丸は各フレームでのヤギの位置を示しています。

では実際に再生させて、ヤギが移動する様子を見てみましょう!キーボードのエンターキー、もしくはタイムライン下部の再生マークを押してみてください。
animate_movie
ヤギをスィーっと移動させることができました!

応用編:動き方を変えてみよう

ただの水平移動では味気ないので、もっと躍動感のある軌道を与えてみましょう!

まず、タイムライン上のフレームを右クリックして「モーションを削除」を選択し、さきほどの移動を取り消します。

次に、「レイヤー1」と書かれた部分を右クリックして「クラシックモーションガイドを作成」を選択します。すると、レイヤー1の上に新しく「ガイド」というレイヤーが作成されました。このガイドレイヤーに、ペンツールやブラシツールで線を描きましょう。
animate7

描き終わったら、レイヤー1のフレームを先ほどと同じようにトゥイーン設定します。 ただし今回は「クラシックトゥイーンを作成」を選択してください。
フレームが紫色に変化すればOKです。

1フレーム目をセレクトして、「自由変形ツール」でヤギを線の起点へドラッグし、吸着させましょう。(スィッと吸い込まれる感じになります。) 同じように、10フレーム目をセレクトし、線の終点へヤギを吸着させます。
animate8

これで準備完了です。では再生させてみましょう。
animate_movie2
ヤギがぴょんぴょん跳ねるようになりましたね!

ちなみに、10フレームでは動きが早すぎたので、タイムライン上で最終フレームを30フレーム目へドラッグして延長させました。このように途中でフレームを増やしても、トゥイーンがいい感じに各フレームでの配置を作り直してくれるので便利ですね!

おわりに

いかかでしたか。まだ単純な動作ですが、キャラクターを動かすことができましたね!
次回は、手足などのパーツを動かして、より「歩いている」感を出す方法についてお話しします。お楽しみに。

© 2018. SuperSoftware Co., Ltd. All Rights Reserved.