July 21, 2015

FlashでSVGアニメ

FlashでAPNGで、FLAから直接PNGアニメが書き出せたらいいのにねってことだったけど、Animated SVG(以下ASVG)を書き出すコマンドが公開されてました。ASVGはほとんどのブラウザで再生できるんだぜ。

インストール

FlashからASVGを書き出すFlash2Svgは以下からダウンロードできます。
Flash2Svg
ダウンロードした「Flash2Svg.v3.13.0.zxp」をExtension ManagerでFlashにインストールするのだ。
Extension Manager
インストールするのはFlash CS5でもCS5.5でもCS6でもCCでもいいんだけど、とりあえずCS6に入れてみました。

ASVG書き出し

SVGパネルインストール後、Flashを起動するとウィンドウ>その他のパネルにSVG(CCはSVG Animation)ってのがあるので、選びます。そーすると、SVGパネルが出てきます。あとはExportをクリックするだけでSVGが書き出されます。出力パネルで書き出し結果を教えてくれます。問題があった場合はWARNINGも出るよ。
出力
ビットマップを使ってる場合はimgフォルダも書き出されます。書き出したASVGがこちら。

FLAの条件

今のところ書き出せるFLAは、ASを使ってないこと、使用ビットマップはPSDはダメでJPEGを使ってること。あと、シェイプトゥイーンはうまくいかないのでキーフレームに変換しておいたほうがいいでしょう。もう1コやってみました。
KillArch
このGIFアニメは「キールアーチの作り方」のつもりで作り始めたんだけど、ストレート・アヘッドで描いたら「キルアーチ」って技っぽくなっちまいました。で、これのFLAからASVGを書き出してみました。
ありゃ、シェイプの色が一部おかしくなってますね。まあ、こんな程度ならGIFアニメやビデオでええやん、てことになっちゃいますけどね。この600x480のアニメのファイルサイズを比べてみると、
  • SWF:14K
  • GIF:115K
  • SVG:279K
SWFがずば抜けてますよ!SWFがいかに優れた形式かってことですね。

イラレ渡し

Flash CCからだとIllustraorに絵を渡す手段がないので、Flash2Svgで静止画をSVG書き出しするって使い方もできますね。CC 2014以降なら標準でSVG書き出しできちゃうけどね。

Posted by A.e.Suck at July 21, 2015 05:14 PM





Flash
AE