動画編集

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

注目の記事

フリーランスになるなら知っておきたい!無料サービス3選
フリーランス
フリーランスになるなら知っておきたい!無料サービス3選

  「フリーランスになる前に何を準備すればいいの?」 「フリーランス向けの便利なサービスが知りたい」   今回はそんな悩みを抱えた人へ向けて「フリーランスになるなら知っておきたい!無料サービス3選」をご紹介します。 この記事を読んで、フリーランスにとっての悩みである以下の3つの問題を一緒...

なぜ、お金を配るの?悪質メール・SNSを利用した詐欺的手法への対処法とは
ネットワーク
amazon,SNS,Twitter,お金配り,楽天,迷惑メール
なぜ、お金を配るの?悪質メール・SNSを利用した詐欺的手法への対処法とは

定期的に書きたくなるコラムのコーナー! 今回は、迷惑メールやSNSのDMを活用した悪質な勧誘、巷で流行っているお金配りを隠れ蓑のした巧妙な詐欺的手法などをいくつかご紹介、その対策・リクス回避の方法をまとめました。   まず結論からお伝えすると 「怪しいと思うなら手を出すな」 です。その詳細を知りたい...

Zoomも飲み屋もなくならない 〜コロナ収束後の本当の世界〜
雑記
YouTube,Zoom,コロナ,テレワーク,リモートワーク
Zoomも飲み屋もなくならない 〜コロナ収束後の本当の世界〜

  新型コロナウイルスのニュースが絶えない毎日を過ごす中、コロナの内容に一度も触れていませんでしたがそろそろ触れておこうと思います。   マイナスな内容は不安を煽るような推測はSNSやニュースでイヤというほど目にしているので、可能性を感じられる内容と現実をお届けします。   コロナが収束した時、この...

PHPポケモン「技ポイント(PP)編」36
プログラミング
PHP,PHPポケモン,ポケモン
PHPポケモン「技ポイント(PP)編」36

技ポイント(PP)とは ポケモンではそれそれの技に使用回数が定められています。それが技ポイント(PP)と呼ばれているものです。 PP(ポケモンwiki) https://wiki.ポケモン.com/wiki/PP   技のクラスを実装した際に、それぞれにppというプロパティをもたせて回数をセットしています。これが、対象の技...

【脱初心者向けプログラミング学習】処理を追え!「今、変数には何が入ってる?」
プログラミング
HTML,PHP,プログラミング学習
【脱初心者向けプログラミング学習】処理を追え!「今、変数には何が入ってる?」

  初心者から中々抜け出せない 1から処理をかけない   そんな悩みを抱えたプログラミング学習者に向けて、「脱初心者のためのプログラミング学習」についてPHPを例にまとめました。 やり方自体は同じですので、他の言語をメインとしている人は自分の環境に置き換えながら学習して、初心者から抜け出しましょ...

経験値分配編 PHPポケモン 89
プログラミング
PHP,PHPポケモン,ポケモン
経験値分配編 PHPポケモン 89

経験値の分配とは 大型アップデート後、最初の追加機能は「経験値の分配」についてです。 ポケモンの入れ替えができるようになりましたが、経験値をもらえるのは現在フィニッシャーのみとなっており、レベルの低いポケモンを育てるのが困難な状態です。なので、ゲームバランスを整えるためにも、まず経験値周りの処...

具体的にフリーランスで生きていくには -独立してからの働き方を徹底解説-
フリーランス
フリーランス,独立
具体的にフリーランスで生きていくには -独立してからの働き方を徹底解説-

  安定した仕事に就きたい。。。   多くの人がそう思っていた時代はどんどんと変化して、今やフリーランスでいることの方が安定しているのではないかと言えるような時代です。 そう、もはや会社員でいる人の大半が安定ではなくなってきているのです。 フリーランスでいる人も、根本的に安定という...

ポケモン図鑑編 PHPポケモン 88
プログラミング
PHP,PHPポケモン,ポケモン
ポケモン図鑑編 PHPポケモン 88

ポケモン図鑑とは ポケモンに出会ったり、仲間にしたりすると、ポケモン図鑑のデータがどんどんと埋まっていきます。PHPポケモンでもこの仕組みを実現させるために、ポケモン図鑑を作成していきましょう。   クラスによる管理 ポケモン図鑑はクラス管理をしていきます。プレイヤー1人に対して1つのポケモン図...

カテゴリ

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 独立 神戸 福祉 秘密鍵 翻訳 自己啓発 英語 見積書 計算機 読書 起業 迷惑メール 配列 銀の弾丸 集客 雑学力