初心者向けに作った解説記事です！動画も作りました！
もくじ
- 1 Animate CCの使い方を解説！【動画で学べます】
- 2 Animate CC学べる動画シリーズまとめ
- 3 Animate CC のUIをざっくりと知ろう
- 4 Animate CC のUI【ステージ】
- 5 Animate CC のUI【タイムライン】
- 6 Animate CCのUI【プロパティ】
- 7 Animate CCのUI【ツール】
- 8 シンボルについて【基本的な概念】
- 9 Animate CCの使い方【絵を描く】
- 10 Animate CCの使い方【絵に色を塗る】
- 11 Animate CCの使い方【絵を動かす】
- 12 Animate CCの使い方【音を付ける】
- 13 Animate CCの使い方【アニメーションを確認する】
- 14 Animate CCの使い方【シーンを管理する】
- 15 Animate CCの表現【薄くする・ぼかす、自動口パク等】
- 16 Animate CCを効率化【キーボードショートカット】
- 17 Animate CC 最強の「アセットワープツール」を使おう！
- 18 Animate CC で効率的に色を塗ろう！
- 19 Animate CCの書き出し【swf、GIF、MOV、MP4】
- 20 Animate CCは30日間無料で使える
- 21 まとめ
Animate CCの使い方を解説！【動画で学べます】
アニメーションを作るのは簡単です！
Animate CCは中学生でも簡単に使えるソフトです。
何故そんなことが言えるかというと…？
私自身、中学生の頃に独学でFLASHアニメを作ってHPに公開していたからです。
今はFLASHという名からAnimate CCに変わりましたが、使い方自体は何も変わっていません。
当記事では私が中学生の頃に作ったアニメレベルの技術を習得てきる内容になっています。
＞＞無料でAnimate CCを使う（公式サイトの体験版があります）
↓Creative Cloudを始める方はコチラ↓
中学生の頃に作ったFLASHアニメ
「ダ・カーポ」ネタなので時代を感じますね…！
面白いかは別として、なんか頑張ってる感は伝わるかと思います。
同人誌のアニメ化「ミルク・ティー」
プロが作ったFLASHアニメ「夜明け告げるルーのうた」
「本当にFLASHアニメなの！？」と思ってしまうほどビックリな作画レベルです…！
Animate CCは高いポテンシャルを秘めている事が分かりますね！
学習サービスは色々ありますが、とりあえずは当記事を読み進めてみてください。
追記：アニメのOPができました
Animate CC学べる動画シリーズまとめ
線の描き方と伸ばし方を学ぼう
マスクとアセットワープツールを学ぼう
実用的な色の塗り方を学ぼう
ボーンの使い方を学ぼう
リップシンクを学ぼう
アセットワープの色剥げ対策をしよう
簡単なゲームを作ってブログに貼り付けよう
↓Animate CCを始める方はコチラ↓
Animate CC のUIをざっくりと知ろう
とりあえず今回は[HD 1280 × 720]を選んで[作成]を押しましょう。
- 【ステージ】アニメを動かすメインとなる画面
- 【タイムライン】描いた絵の動きをフレーム単位で設定できる
- 【プロパティ・ライブラリ】その他詳細な情報
- 【ツール】絵を描くためのツール
上記画像はAnimate CCの初期状態のUI（ユーザーインターフェース）の配置です。
ザックリ４つの領域ごとに説明していきます。
Animate CC のUI【ステージ】
ステージは実際に絵を描く画面であり、動画の確認をする画面でもあります。
画像ではブラシツールで適当に絵を描いています。
- シーンの編集
⇒作ったアニメをシーンごとに管理できる - シンボルの編集
⇒今まで描いた絵を編集できる - ステージの中央を表示
⇒ステージの真ん中を表示してくれる - ステージの外側のコンテンツをクリップ
⇒ステージ外の絵を非表示にする
シーンとシンボルについては後の項目で解説します。
Animate CC のUI【タイムライン】
レイヤーについて
タイムラインではフレーム単位で、絵を配置や動き・サウンドなどを管理していきます。
レイヤー階層になっていて、上のレイヤーの絵が下のレイヤーの絵を隠す仕様になっています。
レイヤーに関しては普段から絵を描いている人は、馴染み深いものですよね。
レイヤーは『右クリック＞レイヤーを挿入』で増やすことができます。
フレームについて
タイムライン内ではフレーム単位で絵を描いていきます。
絵を描いたフレームは灰色で表示され、何も書いてないフレームは黒色で表示されます。
赤く表示されている線は、ステージで描画しているフレームの位置を示します。
タイムラインの操作について
- フレームを挿入 ：フレームを伸ばす
- フレームを削除 ：フレームを消す
- キーフレームを挿入：フレーム内で分割する
- キーフレームを削除：フレーム内で結合する
画像で行っているのは基本的なタイムラインの操作です。
フレームを伸ばしたり消したり、フレーム内で分割・結合をしています。
この操作はタイムライン上で、右クリックから選択することができます。
ショートカットをマウスに設定したりすると、直観的に操作できるようになります。
ショートカットの設定の使い方は、ショートカットの項目で解説します。
Animate CCのUI【プロパティ】
プロパティでは描いた絵やタイムラインのフレーム等の詳細な情報を表示します。
薄くする・ぼかし・などの編集も可能です。
Animate CCのUI【ツール】
- 選択ツール
- 鉛筆ツール
- ブラシツール
- バケツツール
「選択ツール」は絵の選択・移動をする際によく使います。
「鉛筆ツール」「ブラシツール」を使っていても、Ctrlキーを押してる間は「選択ツール」に切り替えられます。
「鉛筆ツール」は細い線を描く際に使い、「ブラシツール」は太い線を描く際に使います。
「バケツツール」は色を塗る際に使います。
シンボルについて【基本的な概念】
絵を動かすには「シンボル」にする必要がある
「シェイプ」と「描画オブジェクト」のままでは動かせない
- シェイプ ：同じレイヤーに重ねて描いたら結合する
- 描画オブジェクト：同じレイヤーに重ねて描いても結合しない
基本的に「ブラシ」や「鉛筆ツール」で書いた絵は「シェイプ」か「描画オブジェクト」という概念になります。
「シェイプ」か「描画オブジェクト」のままでは、まだ動かすことができません。
「シンボル」に変換する必要があります。
ここでいう”動く”については、絵を”左から右へと動く”の様なアニメーションを指します。
絵を「シンボル」に変換して動かせるようにする
シンボルの変換方法
- 「右クリック＞シンボルに変換」
- 「クリック＞F8キー」
「シェイプ」「描画オブジェクト」に対して、「右クリック＞シンボルに変換」か「クリック＞F8キー」を行うことで「シンボル」に変換できます。
「シンボル」に変換すると、画像のように「ライブラリ」に保存されます。
「ライブラリ」からいつでもステージ上に「シンボル」を呼び出せます。
「シンボル」をダブルクリックすると編集ができる
シンボルの中にもタイムラインがある
「シンボル」をステージ上でダブルクリック、または「ライブラリ」からダブルクリックをすると、編集することができます。
「シンボル」内で絵を描き直せるだけでなく、タイムラインも存在しています。
ループ再生をOFFにすることもできる
「シンボル」はステージ上で、「シンボル」内のアニメーションをループ再生し続ける仕組みになっています。
1回再生にしたい場合は、「シンボル＞プロパティ＞ループ」から操作できます。
シンボルは3種類！アニメならグラフィックでOK！
- ムービークリップ：タイムラインに依存しない
- ボタン ：ボタンの動作をする
- グラフィック ：タイムラインに依存して描写される
＊1フレームごとに1描写
「ムービークリップ」と「ボタン」はゲーム・メニュー画面等のリッチなUIを作る際に使います。
なので、基本的に「グラフィックシンボル」に変換することになります。
↓Animate CCを始める方はコチラ↓
Animate CCの使い方【絵を描く】
線を描く
「鉛筆ツール」か「ブラシツール」で絵を描くことになると思います。
では、実際に描いてみましょう。
線を修正する
- 鉛筆ツールで線を描く
- 選択ツールで線を変形
- ブラシツールで線を描く
- 選択ツールで線を変形
「鉛筆ツール」と「ブラシツール」はどちらも「選択ツール」で線を修正することができます。
「選択ツール」での線の修正はかなり優秀なので、ペン入れ作業で重宝します。
線をスムーズにする
描いた線は選択した状態から「選択ツール＞スムーズ」で、線をキレイにすることができます。
画像ではやりすぎですが、1段階目は歪みのないきれいな線へと補正してくれています。
「シェイプ」と「描画オブジェクト」について
「シェイプ」か「描画オブジェクト」かの確認方法
「シェイプ」か「描画オブジェクト」かについては、描いた絵を「選択ツール」の状態でクリックすると、プロパティで確認できます。
基本的にステージ上で描いた絵は「シェイプ」になります。
描いた絵が「描画オブジェクト」となる場合は、「鉛筆ツール」か「ブラシ」の「オブジェクトの描画モード」がオンになっている状態です。
「描画オブジェクト」は重ねて絵を描いても結合しない
「オブジェクトの描画モード」をオンにすると、同じレイヤーに重ねて描いたとしても絵が結合されなくなります。
「描画オブジェクト」を結合したくなったら、Shiftを押しながら複数選択後に「Ctrl+B」か、右クリックからの「分解」でくっつけられます。
髪・輪郭・目などの絵が重なる時に使うと重宝する機能ですね。
トレス作業中に絵が吸着してうまく絵が描けない場合の対処法
トレス作業中に線を修正しようと思ったら、「後ろの絵に磁石のように吸着して自由に修正できない！」って事があると思います。
その場合は「表示＞吸着」から吸着するオプションを減らしましょう。
ペイントブラシツールもある
「ペイントブラシツール」でリアルなインクっぽい線や、矢印・雲・旗・模様・等々を描くことができます。
パターンは「ウィンドウ＞ブラシライブラリ」から選ぶことができます。
Animate CCの使い方【絵に色を塗る】
線と線が閉じてなくても塗る方法がある
「バケツツール」での色塗りもとても優秀です！
理由は線と線が閉じていなくても塗れるから！
やり方は簡単で「バケツツール＞大きい間隔を閉じる」を選択するだけです。
クリックしてくるくる回すだけでOK
- 「間隔を閉じない」でクリックしながらぐるぐる
- 「大きい間隔を閉じる」でクリックしながらぐるぐる
「バケツツール」でクリックしっぱなしで、適当にぐるぐるカーソルを回すだけで塗れます。
何度もクリックしなくて済むので、かなり便利な機能です。
塗った部分は「消しゴムツール」で消せる
塗った部分は「消しゴムツール」で消せます。
線だけを消したり、塗りだけを消したりできます。
画像では隠れてますが、横に蛇口マークがあり、それで塗り部分だけを消すこともできます。
Animate CCの使い方【絵を動かす】
3つのトゥイーンを使い分けよう
- モーショントゥイーン：加速・カーブをつけて動かせる
- シェイプトゥイーン ：動くというか絵が変化する
- クラシックトゥイーン：まっすぐ動く
フレームを右クリックしてトゥイーンを選択すると「シンボル」を動かせます。
「トゥイーン」を作成できるのは「シンボル」だけ
「シンボル」にしてないものを「トゥイーン」を作成しようとすると、上の画像のように「シンボルに変換するぞ？」と言われます。
とりあえず動かしたいなら「シンボル」に変換しましょう。
変換した「シンボル」はライブラリに保管されます。
モーショントゥイーン
カーブ・加速をつけて始点から終点まで移動します。
加速度を表現できるので、自然なモーションができあがります。
シェイプトゥイーン
始点から終点までの絵にあわせて、絵が徐々に変化していきます。
クラシックトゥイーン
まっすぐに始点から終点まで移動します。
シンプルなので一番使いやすいです。
パラパラアニメを作る
画像のボタンを押すと、前後のコマを薄く表示してくれます。
この機能を使うことで、パラパラアニメも簡単に作れます。
他にも「アセットワープツール」「ボーンツール」というのもありますが、正直あまり使ったことないので、説明はまたの機会にします。
とりあえず、これで簡単なアニメができました。
↓Animate CCを始める方はコチラ↓
Animate CCの使い方【音を付ける】
音を読み込む
音をフレームに入れる
サウンドファイルを「ステージ」か「ライブラリ」にドラッグ＆ドロップすると、「ライブラリ」にサウンドが追加されます。
「ライブラリ」から「ステージ」上にドラッグ＆ドロップすると、フレームに波形が現れます。
これで、再生をすると音が出るようになりました。
アニメであればストリーミングでOK
「プロパティ＞サウンド＞同期」で音の出力方法を選べます。
「イベント」はゲーム・リッチなUIを作る時にで使います。（開始・停止も同様
アニメであれば「ストリーミング」でOKです。
「ストリーミング」はフレーム単位で、サウンドの波形に合わせて音を出力してくれます。
音をループさせる
波形が出ているフレームをクリックしてから「プロパティ＞サウンド＞同期」の繰り返しの数字をいじると、数の分だけ繰り返します。
無限に繰り返したい場合は、ループを選択しましょう。
音をだんだん小さくする
音をだんだん小さくするには「プロパティ＞サウンド＞効果＞カスタム」を選びます。
そして、両方の波形の最後を下げましょう。
左下の再生ボタンで音の確認ができます。
また、効果の中には「フェードイン」「フェードアウト」が入っています。
思った通りにならない場合は「カスタム」を使うと良いでしょう。
Animate CCの使い方【アニメーションを確認する】
【再生】
Enterキーを押すとタイムラインに沿って、ステージ上で作ったアニメーションを描画してくれます。
ステージ上では、ステージ外の描画されるものも確認できます。
【swfで書き出し】
Ctrl+Enterで新しいウィンドウを開いて、映像を確認することができます。
ステージ外の描画されるものは確認できませんが、書き出した際の完成形の映像を見れます。
Animate CCの使い方【シーンを管理する】
「ウィンドウ＞シーン」からシーンを呼び出すことができます。
アニメを作ると、レイヤーが多いシーン・少ないシーンと、カット毎にバラバラになります。
シーン毎に作成すると管理しやすくなります。
書き出した動画はシーンを連続して再生します。
Animate CCの表現【薄くする・ぼかす、自動口パク等】
絵を薄くする
「シンボル」に対しては「プロパティ＞カラー効果」から、アルファ機能を使うと薄くすることができます。
煙を表現するときに重宝します。
絵をぼかす
「フレーム」に対しては、「プロパティ＞フィルタ」から「ぼかし」を選び、数字をいじるとぼやかすことができます。
カメラのボケを表現する時に重宝します。
Animate CCの表現【自動で口パクしてもらう】
Animete CCには自動リップシンク機能があります。
↓詳しくは別の記事で書いています。（動画もあります
↓Animate CCを始める方はコチラ↓
Animate CCを効率化【キーボードショートカット】
ショートカットを駆使して作業を効率化しよう
「編集＞キーボードショートカット」からショートカットを設定できます。
「ツール」と「タイムライン」はよく使うのであなた好みに設定してみるといいかもしれません。
- Q：虫眼鏡
- A：消しゴム
- D：バケツ
- F：なげなわツール
- Z：スポイト
- X：鉛筆
- C：線のサイズを小さくする
- V：線のサイズを大きくする
- B：ブラシ
Animate CCでは上記のような設定にしています。SAI・Photoshopでも同じ設定にしてます。
まぁ、ショートカットに関してはお好みですね。
タイムラインの操作
- キーフレームを削除：F5
- キーフレームを挿入：F6
- フレームを削除 ：F7
- フレームを挿入 ：F10
完全に好みの問題ですが、上記のようにショートカットを設定しています。
さらに12ボタンマウスに設定して、タイムライン操作の効率化を図っています。
Animate CC 最強の「アセットワープツール」を使おう！
＜2:40秒から使用＞
絵を描かずにアニメーションさせる方法です。
あまり知られてませんが…使った瞬間からあなたも虜になるハズ・・・！
Animate CC で効率的に色を塗ろう！
効率的に色を塗る方法を動画にしました！
色の管理方法、塗り残しゼロを目指す塗り方、そして影の塗り方などを解説しています。
みてくださいねぇ～！
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を生かすも殺すも自分次第！
とりあえず気軽にソフトを触るところから始めてみましょう！
＞＞無料でAnimate CCを使う（公式サイトの体験版があります）
↓Creative Cloudを始める方はコチラ↓
コメントを残す