拡張機能Snap.svg Animatorを使ってFlash Pro CCからSVGを書き出そう
SVG(エスブイジー)とはHTMLでベクターグラフィックスを扱えるテクノロジーです。JPEGやPNGなどのラスターデータに対し、SVGはベクターデータのため拡大縮小に強いことが利点です。本記事ではこのSVGを使ってHTMLでアニメーションを実現する方法を紹介します。
まず前提として抑えておきたいのは、SVGでアニメーションやインタラクションを実装するには比較的低レベルのAPIの理解が必要となるということです。SVG 1.1 仕様が低レベルということもあり学習コストがかかったり、コンテンツ開発時の生産効率が上がらないといった課題が考えられます。そのためアニメーションやインタラクション用途のSVGコンテンツの開発にはJSライブラリを使う方が効率的です。
「Snap.svg」(スナップ・エスブイジー)とはJavaScriptでHTML内のSVG要素を制御するJSライブラリです。Snap.svgはAdobeが開発していることや(参照記事「アドビ、Snap.svgオープンソース プロジェクトをGitHubに公開」)、一世代前の人気SVG用JSライブラリ「Raphaël」の開発者も参加していることから、SVGを扱うJSライブラリの中では最も有力であると言えます。Snap.svgを学びたい方はPixelGridさんの記事「Snap.svgで快適SVGアニメーション – Snap.svgとは | CodeGrid」で利点や使い方をわかりやすく解説されているので、参考にするといいでしょう。
前置きが長くなりましたが、ここからが本題です。今まではSnap.svgの開発にはコードを書くしか制作方法がありませんでしたが、2015年8月にAdobe Flash Professional CC(通称Flash Pro CC)の拡張機能(アドオン)「Snap.svg Animator」が公開されました。このアドオンを使うことでFlash Pro CCで作成したタイムラインアニメーションをSnap.svgのアニメーション素材として書き出すことができます。つまり、プログラマだけでなく、アニメーターもSnap.svg(HTML5のSVG)コンテンツの制作に参加できるようになりました。本記事では「Snap.svg Animator」のインストールの手順から使い方と活用方法を紹介します。
インストールはAdobe Creative Cloudから
Flash Pro CCにアドオンをインストールするには「Snap.svg Animator : Adobe Add-ons」ページの[無料]ボタンをクリックします。すると、Adobe Creative Cloud経由で自動的に手元のマシンのFlash Pro CCにインストールされます。従来の拡張機能はMXPファイルやZXPファイルで配布されていましたが、今後のAdobe Creative Cloudのアプリケーションはクラウド経由でアドオンが配布されていくのでしょう。
インストールが完了したら、Flash Pro CCを起動します。スタートアップ画面のカスタムプラットフォームの箇所に「SnapPlugin (カスタム)」が追加されます。この項目を選択することでSnap.svg用のドキュメントが作成できます。
インストールの手順は以上ですが、詳しい手順が知りたい方は次の動画を参考にするといいでしょう。
タイムラインアニメーションを作成する
メニューから[ファイル]→[新規]→[テンプレート]タブ→[HTML5 Canvas]→[サンプルアニメーション]を選択して象のアニメーションを使いましょう。このタイムラインアニメーションをコピーして、Snap.svg用のドキュメントに貼り付けパブリッシュします。次のデモはSnap.svgで書きだしたものを無調整で本メディアに掲載したものです。
このコンテンツは次のようなHTMLコードとなっています。ランタイム用のものとコンテンツ用のデータは「RequireJS」を使って読み込まれています。再生時に自動的にHTMLのbody要素内にsvg要素が生成されます。出力した全コードはGitHubにアップしています。
<!DOCTYPE html>
<html>
<head>
<style>
#elephant{
background-color: #FFFFFF;
}
</style>
</head>
<body>
<script type="text/javascript">
var jsonfile = "elephant.json",
fps = 24,
width = 800,
height = 800;
function ready(c) {
c.play();
}
</script>
<script src="./SnapRuntime/js/vendor/requirejs/require.js" data-main="SnapRuntime/js/main"></script>
</body>
</html>
Google ChromeのDeveloper Toolで確認すると、SVG要素がアニメーションの変化とともに変動していることがわかる
自作のコンテンツを書き出して気づいた精度の良さ
出力の精度と実用性を検証するため、以前制作したコンテンツをSnap.svg Animatorを使って出力しました。
▲ 光の筋が交差するシンプルなモーション。Snap.svg Animatorではブレンドモードが利用できないようだが、イージングなどの再現には問題がない。(ソースコード : 2_motion_flash)
▲ パーティクルのシンプルなモーション。ビットマップベースのモーションでも支障なく表現されている。(ソースコード : 3_particles)
次々と増えるFlash Pro CCから書き出せるフォーマット
アドビへの寄稿記事「知ってる？ HTML5、WebGL、Unity、Cocos2d-x、ほか色々。Flash Professionalを活かせる技術 | Adobe Creative Station」で紹介したとおり、Flash Pro CCでは様々なプラットフォームに対してコンテンツを書き出せます。従来のSWF出力を使えばデスクトップの全てのブラウザをサポートできますし、HTML5 Canvasドキュメントを使えばスマートフォンの全てのブラウザをサポートできます。つまりデスクトップとスマホ問わず、Flash Pro製のコンテンツはすべてのブラウザ環境で再生できます。
しかし、ここで抑えておきたいのは単に「HTML5」と言っても実は様々なテクノロジーが存在することです。例えば、Canvas、WebGL、SVG、DOM・・・と複数のテクノロジーがHTML5周辺技術として存在し、それぞれには一長一短があります。どれがベストであるかは制作するコンテンツにあわせて変わってくるので、フロントエンドエンジニアはそれぞれのテクノロジーの得手不得手は理解しておくべきでしょう。
テクノロジーそれぞれの得手不得手を理解する一助として、次表にFlash Pro CCがサポートする各テクノロジーの用途と対象動作環境をまとめました。Flash Pro CCでは公式機能としてCanvasとWebGLがサポートされていますが、ときにはSVGを利用することが最適なケースもあるでしょう。そういった時に今回紹介した拡張機能Snap.svg Animatorが役立つはずです。
| 技術名 | 内部ライブラリ | 用途 | 成熟度 | 対象ブラウザ | ランタイム |
|---|---|---|---|---|---|
| SWF | – | リッチコンテンツやバナー制作 | ★★★★★ | 旧式ブラウザも含むデスクトップブラウザ全般 | Flash Player |
| HTML5 Canvas | CreateJS | リッチコンテンツやバナー制作 | ★★★★☆ | 旧式ブラウザを除くデスクトップ・スマホブラウザ | Context2D |
| WebGL | flwebgl | バナー制作 | ★★☆☆☆ | WebGLが動作する比較的最新のモダンブラウザのみ | WebGL |
| Snap.svg Animator | Snap.svg | 塗りや線で構築されるアニメーションやグラフ向け | ★★☆☆☆ | 旧式ブラウザを除くデスクトップ・スマホブラウザ | SVG |
| Toolkit for Dart | StageXL | ゲーム開発 | ★★★☆☆ | 旧式ブラウザを除くデスクトップ・スマホブラウザ | Context2D |
今回紹介した内容だけでもFlash Pro CCがクロスプラットフォームに対応できているかわかってもらえたかと思いますが、さらにこの他にもOpenFLやAwayJSというFlash Pro CCの拡張機能が存在し、更に幅広い環境向けにコンテンツを書き出すことができます。記事「アニメ制作機能がさらに充実！ Flash Professional CC 2015の新機能紹介」で紹介したように、「ユニバーサルドキュメントタイプコンバーター」という機能が備わっているためFLAファイルのドキュメントタイプを相互に変換できます。
類似のSVG出力用の拡張機能「Flash2Svg」
余談ですが、今回紹介した方法以外にもFlash Pro CCからアニメーションSVGを出力する方法があります。GitHubに公開されている「Flash2Svg」というオープンソースの拡張機能です。Adobe Add-onsにも「Animated SVG Exporter」という拡張機能も公開されていますが、中身は同じもののようです。次のユーザーがこの拡張機能を試していますので参考にしてください。
本記事で紹介したSnap.svg Animatorはタイムラインアニメーションを制御可能なベクター情報としてJavaScriptとして出力するのに対して、Flash2Svgは単一のSVGファイルとして出力されます。根底部分で同じテクノロジーが使われているとはいえ用途が違うと言えるでしょう。やはり使い勝手に応じて選択するのがいいと思います。
今後も広がるFlash Proのフィールド
アニメーション/モーションを制作するワークフローとして、Flash Pro CCの役割が広がり必要性が高くなってきたのではないでしょうか。今後もICSではFlash Pro CCの進化を紹介していきます。