デザイン

Adobe Character Animator 【アニメーション作ってみた】1.知る

北野敦子
北野敦子
2019/12/01 14:49

はじめに

今回から、Adobeのキャラクターをアニメーションとして動かすアプリケーション、Adobe Character Animatorを使ってみて、なにができるのか、どんな動作になるのかを4回にわたって一緒に試していきたいと思います。

1.Adobe Character Animatorとは

簡単に言えば、Illustrator CCやPhotoshop CCで作成したイラストをCharacter Animatorを用いて動かすことのできるアプリケーションです。
また、webカメラを使用することで人間の動きに合わせたアクションを実行することも可能です。
これにより、自身で作成したイラストを感覚的に動かすことができます。

2.やってみる

Adobeが提供しているパペット例(アニメーションで動かす対象物)を使って実際に動かして見てみましょう。

1.App起動

Character Animatorを起動します。

2.PC機能を許可する

App起動時にカメラとマイクの使用をOKにします。
これをすることで、顔の動きでキャラクターの動き、音で口の動きを拾うことができます。

3.パペットの選択

パペットのダウンロードは、Adobe Character Animatorを開いたところでダウンロードすることができます。
任意のパペットを選びます。
ここではTullを選択しました。

4.動かす

すでに、顔の動きとキャラクターの動きが連携されているので、この時点で頭を動かすだけでキャラクターが動き、音を出すことで口を動かすことができました。
プロパティパネル内のパペットトラックビヘイビアーで何をどの様に操作するか(自分の顔と連動させるか、マウスやタッチコントロールかや滑らかさ、強度など)の詳細を選択することができました。

まとめ

今回は、Character Animatorを使って、実際に何ができるのを確認しました。
Appを開いた際のトップページにあるチュートリアルは実際にCharacter Animatorで作られ、途中に実際に操作をして内容を把握できるので初回に確認することをお勧めします。
一度触って見たイメージとしては、自作のパペットの場合は設定はそれなりに細かそうですが、一度動きを紐づけて設定さえしてしまえば後は感覚的に操作ができそうな感じがしました。
これをふまえて、次回は実際にAdobe Illustratorで実際にパペット作りにチャレンジしようと思います。

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

kitano

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

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

納品物クオリティーのアクセス解析レポートを1分で。

Google Analytics・Search Consoleから
わかりやすいPowerPoint・Excelレポートを生成

report
HOMEKOBITブログWEBマーケティングデザインAdobe Character Animator 【アニメーション作ってみた】1.知る