次々と増えるAnimate CCから書き出せるフォーマット

アドビへの寄稿記事「知ってる? HTML5、WebGL、Unity、Cocos2d-x、ほか色々。Flash Professionalを活かせる技術 | Adobe Creative Station」で紹介したとおり、Animate CCでは様々なプラットフォームに対してコンテンツを書き出せます。

従来のSWF出力を使えば旧式のデスクトップブラウザをサポートできますし、HTML5 Canvasドキュメントを使えばスマートフォンの全てのブラウザをサポートできます。つまりデスクトップとスマホ問わず、Animate CC製のコンテンツはすべてのブラウザ環境で再生することが可能なのです。

しかし、ここで抑えておきたいのは単に「HTML5」と言っても実は様々なテクノロジーが存在することです。例えば、Canvas、WebGL、SVG、DOM・・・と複数のテクノロジーがHTML5周辺技術として存在し、それぞれには一長一短があります。どれがベストであるかは制作するコンテンツにあわせて変わってくるので、フロントエンドエンジニアはそれぞれのテクノロジーの得手不得手は理解しておくべきでしょう。

テクノロジーそれぞれの得手不得手を理解する一助として、次表にAnimate CCがサポートする各テクノロジーの用途と対象動作環境をまとめました。Animate CCでは公式機能としてCanvasとWebGLがサポートされていますが、ときにはSVGを利用することが最適なケースもあるでしょう。そういった時に今回紹介した拡張機能Snap.svg Animatorが役立つはずです。

技術名内部ライブラリ用途成熟度対象ブラウザランタイム
SWFリッチコンテンツやバナー制作★★★★★旧式ブラウザも含むデスクトップブラウザ全般Flash Player
HTML5 CanvasCreateJSリッチコンテンツやバナー制作★★★★☆旧式ブラウザを除くデスクトップ・スマホブラウザContext2D
WebGLflwebglバナー制作★★☆☆☆WebGLが動作する比較的最新のモダンブラウザのみWebGL
Snap.svg AnimatorSnap.svg塗りや線で構築されるアニメーションやグラフ向け★★☆☆☆旧式ブラウザを除くデスクトップ・スマホブラウザSVG
Toolkit for DartStageXLゲーム開発★★★☆☆旧式ブラウザを除くデスクトップ・スマホブラウザContext2D

今回紹介した内容だけでもAnimate CCがクロスプラットフォームに対応できているかわかってもらえたかと思いますが、さらにこの他にもOpenFLAwayJSというAnimate CCの拡張機能が存在し、更に幅広い環境向けにコンテンツを書き出すことができます。記事「アニメ制作機能がさらに充実! Flash Professional CC 2015の新機能紹介」で紹介したように、「ユニバーサルドキュメントタイプコンバーター」という機能が備わっているためFLAファイルのドキュメントタイプを相互に変換できます。

類似のSVG出力用の拡張機能「Flash2Svg」

余談ですが、今回紹介した方法以外にもAnimate CCからアニメーションSVGを出力する方法があります。GitHubに公開されている「Flash2Svg」というオープンソースの拡張機能です。Adobe Add-onsにも「Animated SVG Exporter」という拡張機能も公開されていますが、中身は同じもののようです。次のユーザーがこの拡張機能を試していますので参考にしてください。

本記事で紹介したSnap.svg Animatorはタイムラインアニメーションを制御可能なベクター情報としてJavaScriptとして出力するのに対して、Flash2Svgは単一のSVGファイルとして出力されます。根底部分で同じテクノロジーが使われているとはいえ用途が違うと言えるでしょう。やはり使い勝手に応じて選択するのがいいと思います。

今後も広がるAdobe Animate CCのフィールド

アニメーション/モーションを制作するワークフローとして、Animate CCの役割が広がり必要性が高くなってきたのではないでしょうか。今後もICSではAnimate CCの進化を紹介していきます。

更新履歴

  • 2016/06/09
    アドビAnimateチームの公式ブログの記事「Export SVG Animations for the Web with Snap.SVG Animator」を受けて、記事内のデモのSnap.svg Animatorのバージョンをアップデート(v0.1→v1.2.1)。また、Flash Professional CCの名称をAnimate CCに変更しました。