2/20に行われた、関西フロントエンドUGのイベント、[JS/CSS/SVG] Webとアニメーションの様々なありかた、で、「Adobe Animate CCを触ってみた」という内容で発表してきましたので、その詳細です。

Adobe Animate CCを触ってみた

先日リリースされたAdobe Animate CCを使って、HTML5 canvasのアニメーションを作成してみました。

Adobe Animate CCとは

2015年12月1日に、Adobe Flash Professionalの名称を、Adobe Aniimate CCに変更する、と発表がありました。
Adobe Flash Professional を Adobe Animate CC に名称変更 | Adobe Creative Station

Flashの終了、ではなく、制作ツールの名称がAnimate CCに変わるだけでFlashそのものがなくなるわけではありません。
Flashという技術、swf、はそのまま残ります。

そして、2016年2月9日に、満を持してリリースされました。
HTML5ベクターアニメーションソフト | Animate CC（Flash Pro）

これにより、Flashはもちろん、web、モバイルも含めたアニメーションの制作ツールとして、HTML5Canvas、SVGアニメーション、などのサポートが強化されるようです。

Adobe Edge Animate CC

同じ、Animta、でややこしいですが、こちらはすでにサポートが終了しているものになります。
2011年8月に Adobe Edgeとしてリリースされ、2012年9月に正式リリースされました。
しかし、あまりアニメーション機能がイケてなかったりしたのが原因かはわかりませんが、2015年11月にサポート終了が発表されました。
今後は上記のAnimate CCに1本化、という思惑なのだと思われます。

HTML5アニメーション作成ソフト | Adobe Edge Animate CC体験版ダウンロード

この辺の名前に関するややこしい話は以下がまとまっていて分かりやすかったです。
ユーレカの日々［47］Adobeは判ってくれない／まつむらまきお - 日刊デジタルクリエイターズ

作ってみました

以下、作成してみたものになります。

https://usk.herokuapp.com/lab/animate_cc_demo/demo.html

クリックすると最初から再生します。

アニメーション部分はタイムラインのみで制作しています。

クリック部分はスクリプトを記述していいますが、HTML5 Canvasドキュメントで制作する場合は、ActionScriptではなく、JavaScriptで記述することになります。
基本的なアクションなどに関してはスニペットが用意されていますので、それを選択するだけで大丈夫です。

・クリックのスクリプト

this.start_btn.addEventListener("click", fl_ClickToGoToAndPlayFromFrame.bind(this));

function fl_ClickToGoToAndPlayFromFrame()
{
this.content.gotoAndPlay(0);
}

あとはパブリッシュすれば完成。
パブリッシュ後のディレクトリ構成は以下のようになっています。

./
├── demo.fla
├── demo.html
├── demo.js
└── images
└── logo.png

CreateJS

canvasアニメーションの制御には、CreateJSというライブラリが利用されています。
このライブラリ自体はGithubにアップされており、Animate CCがなくても利用することが出来ます。

CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5
CreateJS - Github

生成されたJSもこのCreateJSで作られていますので、JSファイルを直接編集することでアクションなどを変更・追加などすることが可能です。

変換

また、すでにFlashで制作しているコンテンツがある場合でも、HTML5Canvasドキュメントに変換する事もできます。

メニューの、 コマンド から、 他のドキュメントに変換 をクリックし、 HTML5 Canvas を選択します。
これだけで自動的に変換が行われ、新しいファイルとして保存されます。

タイムラインアニメーションの場合はこれでほぼ上手く変換出来ると思いますが、スクリプトは変換されずに全てコメントアウトされてしまいます。
ですので後からJavaScriptのコードを自前で実装してやる必要があります。

単純なクリックアクションやタイムラインのストップなどだと簡単に対応できますが、スクリプトを中心にしたコンテンツの場合だとなかなか難しいかもしれません。

気になった点

実際に少し作業をしてみて気になった点をあげてみます。

• プレビューだと変更した点が反映されない事が多かった
• アクションに記述したJavaScriptのエラーやデバッグがAnimateCCの出力に表示されなかった

エラーやデバッグがAnimate CC上に出力されないのは特に不便だなと感じました。
もちろんブラウザの開発ツールでの確認は出来るわけですが、パブリッシュ時にエラーの表示くらいは返してくれればもう少し便利に使える気がしました。

まとめ

上記のように少し気になった点はありますが、それでもやはりタイムラインで試行錯誤しながらアニメーションが制作できるのはすごく便利でした。
操作もFlash制作と同じで、Flashを齧ったことのある方ならすぐにでも作り始められると思います。

是非お試し下さい。