AnimateCCの使い方を動画で解説!【アニメ作成~出力まで】

animate cc 使い方

初心者向けに作った解説記事です!動画も作りました!


Animate CCの使い方を解説!

アニメーションを作るのは簡単です!

Animate CCは中学生でも簡単に使えるソフトです。

何故そんなことが言えるかというと…?

私自身、中学生の頃に独学でFLASHアニメを作ってHPに公開していたからです。

今はFLASHという名からAnimate CCに変わりましたが、使い方自体は何も変わっていません。

当記事では私が中学生の頃に作ったアニメレベルの技術を習得てきる内容になっています。

中学生の頃に作ったFLASHアニメ

「ダ・カーポ」ネタなので時代を感じますね…!

面白いかは別として、なんか頑張ってる感は伝わるかと思います。

プロが作ったFLASHアニメ「夜明け告げるルーのうた」

「本当にFLASHアニメなの!?」と思ってしまうほどビックリな作画レベルです…!

Animate CCは高いポテンシャルを秘めている事が分かりますね!

スネゲゾンビ
すげええええええ!早く教えてくれええ!

学習サービスは色々ありますが、とりあえずは当記事を読み進めてみてください。

Adobe学習サービスまとめ

↓ Adobeの公式サイトはコチラ ↓

追記:アニメのOPができました

スネゲゾンビ
おれもアニメつくりてぇ!
ハシモ
とりあえずUIを知ろう!

Animate CC のUIをざっくりと知ろう

とりあえず今回は[HD 1280 × 720]を選んで[作成]を押しましょう。

animete cc ui
  • 【ステージ】アニメを動かすメインとなる画面
  • 【タイムライン】描いた絵の動きをフレーム単位で設定できる
  • 【プロパティ・ライブラリ】その他詳細な情報
  • 【ツール】絵を描くためのツール

上記画像はAnimate CCの初期状態のUI(ユーザーインターフェース)の配置です。

ザックリ4つの領域ごとに説明していきます。

スポンサードサーチ

Animate CC のUI【ステージ】

ステージは実際に絵を描く画面であり、動画の確認をする画面でもあります。

画像ではブラシツールで適当に絵を描いています。

右上のボタンを左から解説
  • シーンの編集
    ⇒作ったアニメをシーンごとに管理できる
  • シンボルの編集
    ⇒今まで描いた絵を編集できる
  • ステージの中央を表示
    ⇒ステージの真ん中を表示してくれる
  • ステージの外側のコンテンツをクリップ
    ⇒ステージ外の絵を非表示にする

シーンとシンボルについては後の項目で解説します。

Animate CC のUI【タイムライン】

レイヤーについて

タイムラインではフレーム単位で、絵を配置や動き・サウンドなどを管理していきます。

レイヤー階層になっていて、上のレイヤーの絵が下のレイヤーの絵を隠す仕様になっています。

レイヤーに関しては普段から絵を描いている人は、馴染み深いものですよね。

レイヤーは『右クリック>レイヤーを挿入』で増やすことができます。

フレームについて

タイムライン内ではフレーム単位で絵を描いていきます。

絵を描いたフレームは灰色で表示され、何も書いてないフレームは黒色で表示されます。

赤く表示されている線は、ステージで描画しているフレームの位置を示します。

タイムラインの操作について

画像で行っていること
  1. フレームを挿入  :フレームを伸ばす
  2. フレームを削除  :フレームを消す
  3. キーフレームを挿入:フレーム内で分割する
  4. キーフレームを削除:フレーム内で結合する

画像で行っているのは基本的なタイムラインの操作です。

フレームを伸ばしたり消したり、フレーム内で分割・結合をしています。

animate cc キーフレーム 操作

この操作はタイムライン上で、右クリックから選択することができます。

animate cc キーボードショートカット

ショートカットをマウスに設定したりすると、直観的に操作できるようになります。

ショートカットの設定の使い方は、ショートカットの項目で解説します。

スポンサードサーチ

Animate CCのUI【プロパティ】

プロパティでは描いた絵やタイムラインのフレーム等の詳細な情報を表示します。

薄くする・ぼかし・などの編集も可能です。

Animate CCのUI【ツール】

よく使うツール
  • 選択ツール
  • 鉛筆ツール
  • ブラシツール
  • バケツツール

「選択ツール」は絵の選択・移動をする際によく使います。

「鉛筆ツール」「ブラシツール」を使っていても、Ctrlキーを押してる間は「選択ツール」に切り替えられます。

「鉛筆ツール」は細い線を描く際に使い、「ブラシツール」は太い線を描く際に使います。

「バケツツール」は色を塗る際に使います。

ハシモ
とりあえずUIに関してはこんな感じかな…?
スネゲゾンビ
さっそく絵を描かせてくれ
ハシモ
そのまえに基本的な概念を教えるね

スポンサードサーチ

シンボルについて【基本的な概念】

絵を動かすには「シンボル」にする必要がある

「シェイプ」と「描画オブジェクト」のままでは動かせない

動かせない
  • シェイプ    :同じレイヤーに重ねて描いたら結合する
  • 描画オブジェクト:同じレイヤーに重ねて描いても結合しない

基本的に「ブラシ」や「鉛筆ツール」で書いた絵は「シェイプ」か「描画オブジェクト」という概念になります。

「シェイプ」か「描画オブジェクト」のままでは、まだ動かすことができません。

「シンボル」に変換する必要があります。

ここでいう”動く”については、絵を”左から右へと動く”の様なアニメーションを指します。

絵を「シンボル」に変換して動かせるようにする

シンボルの変換方法

シェイプ、描画オブジェクトに対して…
  • 「右クリック>シンボルに変換」
  • 「クリック>F8キー」

「シェイプ」「描画オブジェクト」に対して、「右クリック>シンボルに変換」か「クリック>F8キー」を行うことで「シンボル」に変換できます。

「シンボル」に変換すると、画像のように「ライブラリ」に保存されます。

「ライブラリ」からいつでもステージ上に「シンボル」を呼び出せます。

「シンボル」をダブルクリックすると編集ができる

シンボルの中にもタイムラインがある

「シンボル」をステージ上でダブルクリック、または「ライブラリ」からダブルクリックをすると、編集することができます。

「シンボル」内で絵を描き直せるだけでなく、タイムラインも存在しています。

ループ再生をOFFにすることもできる

「シンボル」はステージ上で、「シンボル」内のアニメーションをループ再生し続ける仕組みになっています。

1回再生にしたい場合は、「シンボル>プロパティ>ループ」から操作できます。

シンボルは3種類!アニメならグラフィックでOK!

主にゲームで使う
  • ムービークリップ:タイムラインに依存しない
  • ボタン     :ボタンの動作をする
アニメで使う
  • グラフィック  :タイムラインに依存して描写される
    *1フレームごとに1描写

「ムービークリップ」と「ボタン」はゲーム・メニュー画面等のリッチなUIを作る際に使います。

なので、基本的に「グラフィックシンボル」に変換することになります。

スネゲゾンビ
とりあえず「グラフィックシンボル」を使えばいいんだな!
ハシモ
じゃあさっそく絵を描こう!

Animate CCの使い方【絵を描く】

線を描く

「鉛筆ツール」か「ブラシツール」で絵を描くことになると思います。

では、実際に描いてみましょう。

線を修正する

animate cc 鉛筆 ブラシ
画像でやっている動作
  1. 鉛筆ツールで線を描く
  2. 選択ツールで線を変形
  3. ブラシツールで線を描く
  4. 選択ツールで線を変形

「鉛筆ツール」と「ブラシツール」はどちらも「選択ツール」で線を修正することができます。

「選択ツール」での線の修正はかなり優秀なので、ペン入れ作業で重宝します。

線をスムーズにする

描いた線は選択した状態から「選択ツール>スムーズ」で、線をキレイにすることができます。

画像ではやりすぎですが、1段階目は歪みのないきれいな線へと補正してくれています。

「シェイプ」と「描画オブジェクト」について

「シェイプ」か「描画オブジェクト」かの確認方法

「シェイプ」か「描画オブジェクト」かについては、描いた絵を「選択ツール」の状態でクリックすると、プロパティで確認できます。

基本的にステージ上で描いた絵は「シェイプ」になります。

描いた絵が「描画オブジェクト」となる場合は、「鉛筆ツール」か「ブラシ」の「オブジェクトの描画モード」がオンになっている状態です。

「描画オブジェクト」は重ねて絵を描いても結合しない

「オブジェクトの描画モード」をオンにすると、同じレイヤーに重ねて描いたとしても絵が結合されなくなります。

「描画オブジェクト」を結合したくなったら、Shiftを押しながら複数選択後に「Ctrl+B」か、右クリックからの「分解」でくっつけられます。

髪・輪郭・目などの絵が重なる時に使うと重宝する機能ですね。

トレス作業中に絵が吸着してうまく絵が描けない場合の対処法

animate cc 磁石 マグネット

トレス作業中に線を修正しようと思ったら、「後ろの絵に磁石のように吸着して自由に修正できない!」って事があると思います。

その場合は「表示>吸着」から吸着するオプションを減らしましょう。

ペイントブラシツールもある

「ペイントブラシツール」でリアルなインクっぽい線や、矢印・雲・旗・模様・等々を描くことができます。

パターンは「ウィンドウ>ブラシライブラリ」から選ぶことができます。

スネゲゾンビ
早く色を塗ろうぜ
ハシモ
バケツツールは優秀だよ

スポンサードサーチ

Animate CCの使い方【絵に色を塗る】

線と線が閉じてなくても塗る方法がある

「バケツツール」での色塗りもとても優秀です!

理由は線と線が閉じていなくても塗れるから!

やり方は簡単で「バケツツール>大きい間隔を閉じる」を選択するだけです。

クリックしてくるくる回すだけでOK

画像で行っている動作
  1. 「間隔を閉じない」でクリックしながらぐるぐる
  2. 「大きい間隔を閉じる」でクリックしながらぐるぐる

「バケツツール」でクリックしっぱなしで、適当にぐるぐるカーソルを回すだけで塗れます。

何度もクリックしなくて済むので、かなり便利な機能です。

塗った部分は「消しゴムツール」で消せる

塗った部分は「消しゴムツール」で消せます。

線だけを消したり、塗りだけを消したりできます。

画像では隠れてますが、横に蛇口マークがあり、それで塗り部分だけを消すこともできます。

スネゲゾンビ
うおおおお!そろそろ動かしてぇえ!
ハシモ
トゥイーンっていう機能を使うと動かせるよ!

Animate CCの使い方【絵を動かす】

3つのトゥイーンを使い分けよう

トゥイーンは3つある
  • モーショントゥイーン:加速・カーブをつけて動かせる
  • シェイプトゥイーン :動くというか絵が変化する
  • クラシックトゥイーン:まっすぐ動く

フレームを右クリックしてトゥイーンを選択すると「シンボル」を動かせます。

「トゥイーン」を作成できるのは「シンボル」だけ

「シンボル」にしてないものを「トゥイーン」を作成しようとすると、上の画像のように「シンボルに変換するぞ?」と言われます。

とりあえず動かしたいなら「シンボル」に変換しましょう。

変換した「シンボル」はライブラリに保管されます。

モーショントゥイーン

カーブ・加速をつけて始点から終点まで移動します。

加速度を表現できるので、自然なモーションができあがります。

シェイプトゥイーン

始点から終点までの絵にあわせて、絵が徐々に変化していきます。

クラシックトゥイーン

まっすぐに始点から終点まで移動します。

シンプルなので一番使いやすいです。

スネゲゾンビ
1コマ1コマ作りてぇ…
ハシモ
それもできるよ!

パラパラアニメを作る

画像のボタンを押すと、前後のコマを薄く表示してくれます。

この機能を使うことで、パラパラアニメも簡単に作れます。

他にも「アセットワープツール」「ボーンツール」というのもありますが、正直あまり使ったことないので、説明はまたの機会にします。

とりあえず、これで簡単なアニメができました。

スネゲゾンビ
音がないと寂しいな…!
ハシモ
じゃあ音を付けるか!

Animate CCの使い方【音を付ける】

音を読み込む

音をフレームに入れる

サウンドファイルを「ステージ」か「ライブラリ」にドラッグ&ドロップすると、「ライブラリ」にサウンドが追加されます。

「ライブラリ」から「ステージ」上にドラッグ&ドロップすると、フレームに波形が現れます。

これで、再生をすると音が出るようになりました。

アニメであればストリーミングでOK

「プロパティ>サウンド>同期」で音の出力方法を選べます。

「イベント」はゲーム・リッチなUIを作る時にで使います。(開始・停止も同様

アニメであれば「ストリーミング」でOKです。

「ストリーミング」はフレーム単位で、サウンドの波形に合わせて音を出力してくれます。

音をループさせる

波形が出ているフレームをクリックしてから「プロパティ>サウンド>同期」の繰り返しの数字をいじると、数の分だけ繰り返します。

無限に繰り返したい場合は、ループを選択しましょう。

音をだんだん小さくする

音をだんだん小さくするには「プロパティ>サウンド>効果>カスタム」を選びます。

そして、両方の波形の最後を下げましょう。

左下の再生ボタンで音の確認ができます。

また、効果の中には「フェードイン」「フェードアウト」が入っています。

思った通りにならない場合は「カスタム」を使うと良いでしょう。

スネゲゾンビ
アニメを確認したいぜ!!!
ハシモ
さっそく見てみるか!

Animate CCの使い方【アニメーションを確認する】

【再生】

Enterキーを押すとタイムラインに沿って、ステージ上で作ったアニメーションを描画してくれます。

ステージ上では、ステージ外の描画されるものも確認できます。

【swfで書き出し】

Ctrl+Enterで新しいウィンドウを開いて、映像を確認することができます。

ステージ外の描画されるものは確認できませんが、書き出した際の完成形の映像を見れます。

スネゲゾンビ
アニメのシーンが多くなってきたぞ…
ハシモ
シーンごとに管理できるよ!

Animate CCの使い方【シーンを管理する】

「ウィンドウ>シーン」からシーンを呼び出すことができます。

アニメを作ると、レイヤーが多いシーン・少ないシーンと、カット毎にバラバラになります。

シーン毎に作成すると管理しやすくなります。

書き出した動画はシーンを連続して再生します。

スネゲゾンビ
表現の幅をひろげてぇなぁー
ハシモ
薄くしたり・ピンボケを表現したりできるよ

Animate CCの表現【薄くする・ぼかす、自動口パク等】

絵を薄くする

「シンボル」に対しては「プロパティ>カラー効果」から、アルファ機能を使うと薄くすることができます。

煙を表現するときに重宝します。

絵をぼかす

「フレーム」に対しては、「プロパティ>フィルタ」から「ぼかし」を選び、数字をいじるとぼやかすことができます。

カメラのボケを表現する時に重宝します。

Animate CCの表現【自動で口パクしてもらう】

Animete CCには自動リップシンク機能があります。

↓詳しくは別の記事で書いています。(動画もあります

スネゲゾンビ
いちいちツールとかタイムラインから操作するの面倒だな…
ハシモ
ならショートカットを使おう!

Animate CCを効率化【キーボードショートカット】

ショートカットを駆使して作業を効率化しよう

「編集>キーボードショートカット」からショートカットを設定できます。

「ツール」と「タイムライン」はよく使うのであなた好みに設定してみるといいかもしれません。

  • Q:虫眼鏡
  • A:消しゴム
  • D:バケツ
  • F:なげなわツール
  • Z:スポイト
  • X:鉛筆
  • C:線のサイズを小さくする
  • V:線のサイズを大きくする
  • B:ブラシ

Animate CCでは上記のような設定にしています。SAI・Photoshopでも同じ設定にしてます。

まぁ、ショートカットに関してはお好みですね。

タイムラインの操作

animate cc キーボードショートカット
俺的カスタマイズ
  • キーフレームを削除:F5
  • キーフレームを挿入:F6
  • フレームを削除  :F7
  • フレームを挿入  :F10

完全に好みの問題ですが、上記のようにショートカットを設定しています。

さらに12ボタンマウスに設定して、タイムライン操作の効率化を図っています。

スネゲゾンビ
よーし、アニメできたから書き出すぜ!
ハシモ
簡単な書き出し方を教えるよ~

Animate CCの書き出し【swf、GIF、MOV、MP4】

  • イメージの書き出し:少し編集して出力
    ⇒GIF、JPEG
  • イメージを書き出し:ステージの内容そのまま出力
    ⇒GIF、JPEG、PNG、SVG
  • ムービーの書き出し:独自形式の動画で出力(軽い)
    ⇒SWF
  • ビデオの書き出し :エンコーダーを開いて出力
    ⇒MOV、MP4
  • アニメーションGIFを書き出し:GIFアニメで出力
    ⇒GIF

YOUTUBEに公開するのであれば「ビデオの書き出し」ですね。

AdobeMediaEncoderでビデオを変換にチェックを入れましょう。

しばらく待つと「AdobeMediaEncoder」が開きます。

[H.264] [YouTube 1080p フル HD]を設定したら、右端の緑のエンコードボタンを押しましょう。

これでYouTubeに適した、軽くて高画質な動画が出力されます。

HTML5、SVGに関してはまたの機会で記事にします。

スネゲゾンビ
うおおおおお!これで全世界に公開できるぞ!!!!
ハシモ
おつかれさま!

Animate CCは30日間無料で使える

Animate CCは30日間無料で体験できます。

クレカ登録とかもないので、放置からの自動引き落としの罠もありません。

とりあえず実際に触って、アニメを作ってみましょう!

スネゲゾンビ
無料でアニメ作れるやん
ハシモ
そゆことよ!

まとめ

スネゲゾンビ

Animate CCでアニメ作ろうぜ!

当記事は純粋にAnimate CCユーザーが増えてほしいので書きました。

Animate CCを生かすも殺すも自分次第!

とりあえず気軽にソフトを触るところから始めてみましょう!

>>Adobe Animate CC公式サイト

スネゲゾンビ
これで神アニメ作ろうぜ!
ハシモ
学生さんはとりあえず30日無料で触ってみてね!
Adobe学習サービスまとめ

↓ Adobeの公式サイトはコチラ ↓



YOUTUBEもよろしくお願いします!



YOUTUBE「メイドインハシモ」を見に行く

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です