動画編集

【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つを押さえておくだけで、作業効率は格段にアップするので、これからソフトの使い方を覚...

注目の記事

システムエンジニアとプログラマーの違いって?仕事内容や必要スキルについてわかりやすく解説します【SE・PG】
プログラミング
システムエンジニアとプログラマーの違いって?仕事内容や必要スキルについてわかりやすく解説します【SE・PG】

  システムエンジニアってどんな仕事? プログラマーとどう違うの?   プログラミング教育が必修化になり、SEやPGの職業が注目された今、この違いについてわからない、教えて欲しいという質問が後を絶ちません。 今回はそういった人たちのために、システムエンジニア(SE)とプログラマー(PG)という職業に...

捕獲処理実装編 PHPポケモン 80
プログラミング
PHP,PHPポケモン,ポケモン
捕獲処理実装編 PHPポケモン 80

捕獲処理の作成 前回モンスターボールのクラスを作成したので、今回は捕獲判定までの一連の処理を仕上げていきます。サービス自体は他のアイテムと一緒にするためItemServiceを呼び出し、その中で使用されたアイテムを判断して分岐を作ります。   バトル中のアイテムサービス(/App/Services/Battle/ItemService.ph...

挫折してしまう人に共通する3つの要因〜解決方法を紹介します〜
雑記
挫折してしまう人に共通する3つの要因〜解決方法を紹介します〜

  仕事が上手くいかない 思ったように学習成果がでない   こういった理由で挫折してしまう人は、意外にも考え方や行動が共通しています。 それが何かを知り、考え方や環境、対応方法を少し変えるだけで、劇的に余裕が生まれて自己肯定ができるようになります。その結果、強い人になれるのです。   今...

バトルステータス可視化編 PHPポケモン 70
プログラミング
PHP,PHPポケモン,ポケモン
バトルステータス可視化編 PHPポケモン 70

バトルステータスの可視化 現在のポケモンでは、バトルステータスの現状を可視化できるようになっており、どれぐらいのランク補正がかかっているか、フィールドがどういう状態になっているかがわかるようになっています。 初代、第2世代等では確認できなかった内容ではありますが、システムとしては便利な要素でも...

20代起業家が教える「やっといて良かった」3つのコト
雑記
起業
20代起業家が教える「やっといて良かった」3つのコト

  「起業するために何を準備すべき?」 「やっておいて良かったことはありますか?」   独立や起業をしようと志している人のほとんどが、こういった質問を投げかけてきます。自分も同じような悩みを持った立場の時には似た質問をしていたので、その真意はよくわかります。   今回はそんな悩みを抱えて...

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

  ※前回(第6回)で意味不明な場所に空変数が入っており、ステータスが一部しか出力できないという問題がありました。修正しています。犯人は「$stats = [];」です。(GetTrait.php)   今回はポケモンのゲームでは欠かせない、楽しみの一つとなる「進化システム」を導入していきます。これからPHPポ...

アーカイブのディスクリプションを管理画面で設定する方法【SEOに強いWordPressブログ・サイト作り】
プログラミング
PHP,SEO,WordPress
アーカイブのディスクリプションを管理画面で設定する方法【SEOに強いWordPressブログ・サイト作り】

  WordPressで作ったサイトやブログはSEO対策がしやすいという利点があり、より検索に強いサイトへ仕上げることができます。 ですが、SEO対策に特化しているテーマでもアーカイブページのディスクリプション設定ができないものは多く、別で設定する必要があるものがほとんどです。   今回は、より検索で強く...

Laravelで生成したCookie情報をjQueryで取得する方法【JavaScript】
プログラミング
ajax,api,JavaScript,jQuery,Laravel,PHP
Laravelで生成したCookie情報をjQueryで取得する方法【JavaScript】

  今回はLaravel開発備忘録です。 ajaxでapi認証してviewに記述したhtmlデータを取得するために、cookieを使ったapi_tokenの受け渡し手順をまとめてみました。   Laravelを使った開発をしている人は、ぜひ参考にしてくださいね。     Laravel側の処理   まずはcookieにデータをセットする必要があり...

カテゴリ

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

タグ

5G Adobe AfterEffects AI ajax amazon Animate api artisan atom Automator AWS Bluetooth CSS CVR description EC-CUBE4 ECショップ ESLint Facebook feedly foreach fortify function Google Google AdSense Honeycode htaccess HTML IEEE 802.11ax Illustrator Instagram IoT JavaScript jetstream jQuery jQuery UI keyword LAN Laravel Linux MacBook MAMP meta MLM MySQL NoCode note OS OSI参照モデル Paypal Photoshop PHP phpMyAdmin PHPポケモン PremierePro rss 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 独立 神戸 福祉 秘密鍵 翻訳 自己啓発 英語 見積書 計算機 認証 読書 起業 迷惑メール 配列 銀の弾丸 集客 雑学力