Animate CCはWebアニメーションを制作するソフトウェア。アドビシステムズというクリエイティブのツールを中心に開発している会社の製品です。このソフトでは、グラフィックを描きタイムラインで動きをつけ、スクリプトでインタラクティブな操作を実装することができます。これはどういうことかというと、Animate CCを使えば、「動くWebコンテンツ」を自由に作れるということです。
制作できるものの種類は多岐にわたります。アニメやモーショングラフィックスといった動画や映像作品、ゲームやメニュー画面といったインタラクティブコンテンツ、グラフやシミュレーションといったビジュアライゼーション(データの可視化)に向いています。
Adobe Animate CCとCreateJSの関係
CreateJS入門サイトでAnimate CCを扱うのには理由があります。Animate CCでは「HTML5 Canvasドキュメント」が作れます。このHTML5 Canvasドキュメントというのはその名の通り、Animate CCで作ったコンテンツをHTMLのcanvas要素で再生するというものですが、その再生エンジンにCreateJSが採用されているのです。
再生エンジンにCreateJSが使われているというとイメージしづらいかもしれませんが、アニメーションとCreateJSが連携しやすいということを意味します。このことは、「プログラムとアニメーションの連携」という他のツールにない圧倒的な利点となります。
Adobe Animate CCをはじめるには？
Adobe Animate CCをはじめるには、ソフトの導入が必要になります。Animate CCは有料ソフトですが、AdobeのCreative Cloudという月額課金(もしくは年契約)のサービスを契約して使います。学生の場合は月1,980円(全CCアプリ利用可)、社会人の場合は月2,180円(単体アプリ)から利用できるので、お手軽です。昔は10万円近い製品価格だったので、とても導入しやすくなりました。
HTML5ベクターアニメーションソフト | Animate CC（Flash Pro）
ちなみにはじめは体験版で30日間無料で使うことができます。体験版でも機能制限はないので、購入に慎重な方は様子見で使ってみるのがいいと思います。
Adobe Animate CCが使えるようになるにはどのくらいかかるのか
1週間から1ヶ月ぐらいでしょう。とは言っても、どのくらいレベルをもって使えると言っていいのか、絵やモーション制作の得手不得手があるので人によりけりです。
多くは大学/専門学校で使いはじめる人が多いですが、中学生から始める人もいれば、社会人から使いはじめる人もいます。学ぶのに年齢は関係ありません。学校の放課後の時間や、週末に集中して勉強すれば無理なく覚えていけます。
勉強で使いはじめる人もいれば、趣味で、仕事で、と理由は様々でしょう。「好きこそものの上手なれ」ということわざがありますが、いずれにしても楽しく学んでいくことが大事です。
新規ファイルを作ろう
Animate CCをインストールしたら起動します。起動したら[新規作成]の一覧から[HTML5 Canvas]を選択します。
作成したら作業用フォルダにsample.flaファイルとして保存しましょう。ファイル名はWebサイトで公開することを想定して、半角英数字の名前にしましょう。日本語のファイル名は使わないようにします。
ここでは簡単な絵を書いて、アニメーションさせるまでを解説します。
絵を描こう
画面の右側に[ツール]パネルがあります。このパネルからツールを選んで操作していきます。今回は筆アイコンの[ブラシツール]を使いましょう。
[プロパティー]パネルで色々設定できるので、線の色と太さを設定しておきます。
ステージで適当にドラッグして絵を描きます。上手に描けなくても、ここでは使い方をざっくりと覚えることが目的なので気にしないでください。
シンボルに変換しよう
アニメーションを作る前に絵を「シンボル」というものに変換しなければなりません。シンボルに変換する作業は、動かす対象を設定する作業だと思っておいてください。
描いた絵の全体を、矢印ツールの状態でドラッグ＆ドロップして選択します。選択したら、絵が半透明の表示になります。
この状態で、メニューバーから[修正]→[シンボルに変換]を選択します。
[シンボルに変換]ダイアログでは、[名前]は適当なものを、[種類]は「グラフィック」に設定ください。他にも設定可能な項目がありますが、無視して[OK]をクリックします。
選択したときに、周囲に青い四角が出るようになったらシンボル化完了です。
動かそう
さて次はタイムラインの使い方です。マス目のようになっているパネルがタイムラインで、縦がレイヤー順(重ね順)、横が時間を示します。
タイムラインには1つの黒い丸があると思います。これをキーフレームと呼びます。キーフレームは「何かがあるフレーム」を指します。
30フレームくらいの適当な場所で右クリックをして、[キーフレームの挿入]を選択します。
すると灰色のフレームが間に出来るので、その間のどこでもいいのでもう１度右クリックから今度は[クラシックトゥイーンの作成]を選択します。
※「トゥイーン」というのは英語の「Between」から派生した用語です。2つのキーフレームの間を補間することが語源となりました。
青くなって矢印がつきます。これで１フレーム目のキーフレームと、30フレーム目のキーフレームがトゥイーンでつながれました。 ためしにちょっと動かしてみましょう。
フレームにある赤いマークが現在のフレームをあらわしています。 これをとりあえず３０フレームにあるキーフレームのところまで移動させます。
その状態でさっきの絵を適当に移動させます。[Enter]キーを押せばムービーがプレビューします。絵が移動すれば成功です。これが最も単純なアニメーションの基礎となります。
今回の解説は以上となります。
Animate CCを効率的に学習するには
もっとAnimate CCの使い方を知りたい方は、野中先生の動画チュートリアルがとてもわかりやすいのでご覧になるとよいでしょう。有料ではありますが、書籍の解説書を買うのと同じぐらいの値段でシリーズを勉強できるので、最短で覚えることができると思います。
解説ソフトはFlash Professional CCとされてますが、Animate CCの一つ前のバージョンであり、全く同じ操作方法なので安心ください。