動画編集

【Adobe Animate CC】モーショントゥイーンを使ったアニメーション作成

Adobe Animate Illustrator Photoshop アニメーション
【Adobe Animate CC】モーショントゥイーンを使ったアニメーション作成

 

 

今回はキャラクターがうちわを扇いでいるアニメーションのAdobe Animateを使った作成方法をご紹介します。

完成イメージは以下の通りです。

 

Photoshopなどを使ってもgifアニメーションの作成はできますが、Adobe Animateのモーショントゥイーンを使えば、変化するポイントだけを設定することで間のフレームも自動で動かすことができるので便利です。 

作成の工程は以下の通りです。

  1. パーツ作り
  2. animateのライブラリへ読み込み
  3. レイヤーの作成
  4. モーショントゥイーンの作成
  5. 基準点の設定
  6. キーフレームの設定

 

それでは手順に沿って進めていきましょう。

 

 

Illustratorでパーツの作成

 

今回はAdobe Illustratorでキャラクターのパーツを作成します。Photoshopや他の画像ソフトで作成したjpgpngでも動かすことはできますが、animateが対応していないファイル形式は読み込むことができませんので事前に確認するようにしてください。

 

 

レイヤー分け

 

今回はうちわの部分だけを動かしたいので、うちわとそうでない部分とにレイヤー分けをします。

 

 

もし瞬きや会話、身体に動きをつけたい場合は、可動部分をそれぞれレイヤーに分配してください。aiデータはanimateへ読み込んでからでも分解することができますが、事前にレイヤー分けしておくと楽に進めることができます。

 もしIlustratorPhotoshop以外で作成してpngjpg形式の画像を使う場合は、パーツごとに画像を書き出しておくようにしましょう。

 

 

Animateでアニメーションの作成

 

パーツを作り終えたら、Animateでの作業に移ります。起動したらドキュメントを作成します。ボードのサイズは後ほど設定できるので、今回は1920x1080で作成します。

 

 

データを読み込み

 

ドキュメントを用意したら、ライブラリに先程作ったaiデータを読み込みます。Photoshopであればpsdや画像ファイルを読み込んでください。

【ファイル】→【読み込み】→【ライブラリに読み込み】

 

 

もし他のパーツも同じai内で作成している場合は、必要なパーツだけにチェックを入れて読み込むようにしましょう。変換は【Animateレイヤー】にします。

 

 

読み込みを押すと、ライブラリにaiデータが読み込まれます。ライブラリは以下の手順で表示します。

【ウィンドウ】→【ライブラリ】

 

ボードへ配置

 

正常にライブラリへ読み込まれたら、次はボードにパーツを配置します。ライブラリに読み込んだアイテムをボードへドラッグすれば配置できます。

  

・ちょっと一言

aiで作成したパーツの場合、一度ライブラリへ読み込んで配置するという手順を踏まなくても、Illustratorでコピー(ctrl + c maccommand + c)してAnimateで貼り付け(ctrl + v maccommand + v)をするだけでも配置できます。互換があるソフトを使うと大幅に作業時間が短縮できるので便利です。

 

 

パーツを分解

 

ボード内に配置直後は、1つのレイヤーとみなされますので、分解してレイヤー分けする必要があります。

アイテムを選択して、以下の手順で分解します。

【修正】→【分解】

 

 

レイヤーに配分

 

分解したら、動かしたいパーツをレイヤー分けします。今回はうちわを動かしたいので、うちわを選択して以下の手順でレイヤーに配分をします。

【修正】→【タイムライン】→【レイヤーに配分】

 

 

配分後はタイムラインに表示されますので、それぞれ判別するために名称をつけておきましょう。今回はIllustratorのレイヤー名と同様に「身体」「うちわ」と設定しました。

 

 

 

タイムラインの設定

 

animate上でレイヤー分けができれば、次にタイムラインの設定をします。配分したパーツは下に作成されます。もし重ね順が異なる場合は、ドラッグして正しい重ね順へ入れ替えましょう。

 

今回はうちわでパタパタと仰ぐ動きをつけるため、うちわを左右に振る動作を繰り返しさせるだけです。なので、以下の流れでループさせます。

  1. 基準位置(作成したイラストの状態)
  2. 団扇を左(手前)に振った位置
  3. 基準位置
  4. 団扇を右(奥)に振った位置
  5. 基準位置

 

左から右に移行する際に基準位置を通過することで、より自然な動きになります。ゆっくりになりすぎても不自然なので、今回は各ポイントの間隔を5フレームで設定していきます。

  1. 基準位置(1〜5フレーム)
  2. 団扇を左(6〜10フレーム)
  3. 基準位置(11〜15フレーム)
  4. 団扇を右(16〜20フレーム)
  5. 基準位置(21フレーム)

 

1フレーム目と21フレーム目は同じになるため、最終的に自然にループさせるためには21フレーム目は不要ですが、モーショントゥイーンで自然な20フレーム目を作るためには用意していた方が作成が簡単です。

 

今回は21フレーム必要だということがわかったので、各レイヤーにフレームを追加します。

[追加するフレームを選択]→[右クリック]→【フレームを挿入】

 

 

これでタイムラインの準備は完了です。

 

 

モーショントゥイーンの作成

 

タイムラインが作成できたら、次にモーショントゥイーンを作成します。今回はうちわを動かすので、うちわのキーフレームを選択してモーショントゥイーンを作成します。

[キーフレーム選択]→[右クリック]→【モーショントゥイーンの作成】

 

 

モーショントゥイーンが作成されたら、対象のキーフレームが黄土色になります

 

 

基準点の移動

 

モーショントゥイーンを作成したら、アイテムの基準点を決定します。今回動かすうちわの場合は、持ち手部分が基準点になります。

基準点を移動するには、自由変形ツールを使います。

 

もし腕を動かす場合は、基準点は肩や肘になります。頭を動かす場合は首ですね。基準点が間違っていれば、動きをつけても思ったような動きになりませんので注意しましょう。

 

 

キーフレームを挿入

 

アイテムの基準点が決まれば、各ポイントに対してキーフレームを挿入します。。今回は5フレームごとなので、6・11・16・21の地点です。

[フレーム選択]→[右クリック]→【キーフレームの挿入】→【すべて】

 

 

各ポイントの動きを決める

 

キーフレームが打ち終わったら、各ポイントの動きをつけていきます。11・21フレーム目は基準点と一緒になるので、そのままにしておきます。

奥行きを出すために、横サイズを小さくして上下へのシアーをしています。たったこれだけの動きでも、つなげれば十分うちわの動きになってくれます。

 

・6フレーム目

 

・16フレーム目

 

 

完成したら、動きを確認するために再生してみましょう。エンターキーを押せば再生されます。もしループ再生で確認したい人は、以下の手順で設定できます。

【制御】→【ループ再生】

 

再生して動きが自然であれば、最後に21フレームを削除します。20フレーム目の動きは残しておきたいので、20フレーム目にキーフレームを挿入して、21フレーム目を削除してください。

※20フレーム目にキーフレームを挿入する前に削除すると、最後の動きが失われてしまので、手順を間違わないように気をつけてください

[フレーム選択]→[右クリック]→【フレームを削除】

 

 

これでループ再生をすれば、自然なうちわの動きになります。あとは、必要に応じて書き出しすれば完了です。今回はgifに書き出しました。

 

 

まとめ

 

いかがだったでしょうか。

今回は、Adobe Animate CCのモーショントゥイーンを使ったアニメーションの作り方をご紹介しました。動画コンテンツが増えている中、アニメーションを簡単に作れるようになると、コンテンツはよりクオリティがアップしますし、些細な動きがあるだけでもユーザー側からすると飽きずに楽しめるようになります。

 

これから動画編集にチャレンジしようと考えている方や、IllustratorやPhotoshopを使ったデザインはできても動きは苦手と考えている人は、ぜひ参考にしてくださいね。

初心者必見!仕事がデキる人のIllustrator活用術3選 初心者必見!仕事がデキる人のIllustrator活用術3選

  仕事の速い人の大半は、「効率の良い方法」や「便利な使い方」を知っていて使いこなしています。これは、デザインの現場でも同じです。 今回はその中でもIllustratorで知っておくと便利な機能を3つご紹介します。この3つを押さえておくだけで、作業効率は格段にアップするので、これからソフトの使い方を覚...

注目の記事

PHPポケモン「バトルシステム編〜経験値の獲得〜」29
プログラミング
PHP,PHPポケモン,ポケモン
PHPポケモン「バトルシステム編〜経験値の獲得〜」29

経験値の獲得 今まではポケモンに直接経験値を与えるというチートびっくりの仕様でしたが、バトルシステムも終盤に差し掛かってきたので「倒したポケモンから経験値を取得する」というごく当たりまえの仕様を導入していきます。   基礎経験値の設定 では、経験値の計算式に入る前に、必要なパラメーターを1つ用...

HPバーアニメーション前編 サーバー側の対応 PHPポケモン 43
プログラミング
PHP,PHPポケモン,ポケモン
HPバーアニメーション前編 サーバー側の対応 PHPポケモン 43

動きのあるHPバーづくり それではデモ公開に先立ち、HPバーの作り込みをしていきたいと思います。 現在のPHPポケモンは、ダメージ計算などが終わった結果をすべて返却しているため、技選択をして次の画面に移行すると、HPが減った状態でスタートしていました。これでは、どの技でどれぐらいのダメージを与え、状態変...

グローバル&ヘルパー関数編 PHPポケモン 61
プログラミング
PHP,PHPポケモン,ポケモン
グローバル&ヘルパー関数編 PHPポケモン 61

進化や技習得、HPバーや経験値バーの演出ができているのに、なぜ状態異常の演出はされていないの?   そう感じている方が少なからずいるはずです。 現段階では、状態異常になっても次の画面に移管しなければ表示されません。これは、PHP側で内部処理は行われているが、メッセージに合わせた動的な変更がされていな...

動画編集で知っておくべき基本的な3工程
動画編集
Adobe,AfterEffects,Illustrator,Photoshop,PremierePro
動画編集で知っておくべき基本的な3工程

  YouTubeに動画を投稿したいけど、動画の基本的な作成手順がわからない・・・   動画作成をするためのソフトは色々ありますが、有料なものであればやはりAdobe製品に軍配が上がります。 しかし準備したは良いものの、いろんなソフトが合ってどれを使えばよいか分からないという悩みを抱えている方は非常...

PHPポケモン「わざ編〜チャージ技の実装〜」34
プログラミング
PHP,PHPポケモン,ポケモン
PHPポケモン「わざ編〜チャージ技の実装〜」34

チャージ技とは ポケモンの技は数多く存在していて、その中でも特別な処理が必要なものがいくつかあります。その1つが「チャージ技」です。 ※チャージ技とはポケモン上で用いられている用語ではありません   現在実装している初代御三家+ピカチュウの初代レベルアップ技の中では以下の2つがあります。 ロ...

ピカチュウから学ぶオブジェクト指向 〜トレイト編〜 4
プログラミング
PHP,PHPポケモン,オブジェクト指向,ポケモン
ピカチュウから学ぶオブジェクト指向 〜トレイト編〜 4

  ピカチュウから学ぶオブジェクト指向の第4弾は「トレイト(trait)の活用」についてです。更に、レベルシステムを導入すれば欠かせない経験値システムも合わせて実装します。 第3回からの続きとなりますので、もし前回をまだ見ていない人は是非ご参考ください。   それでは今回もピカチュウと一緒に、...

フリーランスの仕事の取り方教えます!この3つを押さえておけばOKです【企業も応用可】
フリーランス
フリーランス,独立,起業
フリーランスの仕事の取り方教えます!この3つを押さえておけばOKです【企業も応用可】

  仕事ってどうやってとればいいの?   独立したい、起業したいと考えている人の多くが、仕事はどうやってとればいいのかと悩んで足踏みしています。 実は、基本的な3つのポイントさえ知っていれば、継続して仕事を受注することは簡単です。 今回は自分が実際にやっていることを例に「フリーランスなら...

ブログ収益化の道!挫折ポイントの回避方法を徹底解説【アドセンス合格は通過点、意外な収益ポイントとは】
ライティング
Google AdSense,ブログ
ブログ収益化の道!挫折ポイントの回避方法を徹底解説【アドセンス合格は通過点、意外な収益ポイントとは】

  ノマドワークや副業としてブログ単体で稼げるようになりたいと考えている人は多いですが、その大半は挫折してしまいます。 アドセンスの合格までに辿りつけなかったり、合格したは良いものの思うように伸びずに諦めてしまうというのがほとんどです。 実は、そのアドセンスに対する考え方自体が間違いであり...

カテゴリ

SEO対策 イベント デザイン ネットワーク ビジネスモデル フリーランス プログラミング マーケティング ライティング 動画編集 雑記

タグ

5G Adobe AfterEffects AI ajax amazon Animate api artisan atom Automator AWS Bluetooth CSS CVR description EC-CUBE4 ECショップ ESLint Facebook feedly foreach function Google Google AdSense Honeycode htaccess HTML IEEE 802.11ax Illustrator Instagram IoT JavaScript jQuery jQuery UI keyword LAN Laravel Linux MacBook MAMP meta MLM MySQL NoCode note OS OSI参照モデル Paypal Photoshop PHP phpMyAdmin PHPポケモン PremierePro rss SEO SEO対策 Sequel Pro Skype SNS SSH Symfony TCP/IP title Toastr Trait Twig Twitter UCC V系 WAN WebSub Wi-Fi wiki Windows WordPress XAMPP xml Xserver YouTube YouTuber Zoom アーティスト アウトプット アクセス層 アニメーション アフィリエイト イーブイ インターネット インプット エンジニア オブジェクト指向 お金配り クリック単価 クリック数 コミュニケーション能力 コロナ コンサルティング サムネイル システムエンジニア スタートアップ スタイルシート スパム データベース ディープフェイク デザイナー デザイン テレワーク ナンパ ニュース ネットワークモデル ノマドワーク バナー ピカチュウ ビジネス フィード フリーランス ブロガー ブログ プログラマー プログラミング プログラミング学習 プログラミング教育 プロトコル ホームページ制作 ポケモン マークアップ マーケティング メール リモートワーク レンダリング 三井住友 三宮 仕事依頼 児童デイ 児童デイサービス 児童発達支援 公開鍵 初心者 助成金 勉強法 営業 広告 広告収入 必勝マニュアル 放課後等デイサービス 朝活 楽天 深層学習 無線LAN 独立 神戸 福祉 秘密鍵 翻訳 自己啓発 英語 見積書 計算機 読書 起業 迷惑メール 配列 銀の弾丸 集客 雑学力