swfアニメーションをhtml5に変換するAIRアプリ作ってみました
目下バズワードの「HTML5」。
しかし、HTML5（CSS3やjavascript）で Flash の様なアニメーション演出を求められて「シンプルにマークアップ出来るはずの HTML5 なのにこれだとなんだかなぁ」なんて思う事、良くありませんか？アニメーション演出を実装する場合、Flashで作成したほうが楽でコストもかからないですよね。ちまちまとコマアニメーションを作ったり、ブラウザ環境への最適化は大変な作業です。
そこで！
swf アニメーションをサクっと HTML5 に変換する AIR アプリを作ってみました！
「SWF Animation Converter」
何ができる？
swf のルートタイムラインをキャプチャし、一枚の大きなコマ割り画像を生成し、それを javascript で再生する、いわゆる「PNGアニメーション」が簡単に作成できます。
モバイルデバイスなど、スペックの低い端末でも最適に再生できるよう、パラメータ (サイズ、フレームレート、スキップコマ数など) を細かく調整し書き出すことが出来ます。(swf 側で事前に調整しておかなくて OK)
つまり様々なデバイス向けに、swf のパラメータを調整しながら最適に変換出来るということです。（書き出し画像は透過 png なので、HTML 上で何かしらのデザイン要素の前面に配置する等、デザインパーツとしても利用できます）
実は当サイトのティザーで利用していたモーションロゴ部分も、このツールを使い web、Android、iPhone、iPadなどで、最適にアニメーションが再生されるよう調整・変換し、HTML にデザインパーツとして組み込んだ物でした。
変換例
下記はパラメータを変更せず swf をそのまま変換したサンプルとなります。環境によって再生速度に差はでますが、ほぼ同じイメージで書き出せていることがわかります。
他の変換アプリと何が違う?
他にflash変換アプリといえば、Google の swiffyやAdobe の wallabyなどが有名ですが、この「SWF Animation Converter」はそれらようにバイナリを解析するような高度な物ではありません。
ですが、このアプリは swf を画像としてキャプチャするので、タイムラインベースでもスクリプトベースでもどんな効果を使っていても「見た目の再現率100％」で変換出来るという所がメリットとなっています。デメリットとしてはすべてのコマを画像として処理するので、あまり尺の長い swf だと容量が肥大してしまう所でしょうか。
しかし、このアプリのコンセプトは「モバイルなど含めたマルチデバイス向けに最適化する」という所であり、そのための調整機能（フレームレートやスキップコマ数など）を用意しており、そもそもあまり大きなサイズの swf を扱うということを想定したものではなかったりします。つまり「できるだけ見た目の印象を損なわず非リッチにしたい！」場合に利用するアプリという立ち位置を目指しています。
例えばこんな使い方！
- キャラクターアニメーション、モーションロゴ、バナーなど。またそれらのマルチデバイス対応
- 「動きのあるHTML要素作成ツール」として
- 連番画像としても書き出せるので、AndroidアプリやiPhoneアプリのアニメーションリソース作成ツールとして
利用方法
使い方は簡単で
- アプリを起動
- swfをドロップ
- 好きなようにパラメータを調整
- Convertボタンを押す
だけです。
例えば、PC、タブレット向けには比較的リッチに（フレームレート高めなど）。モバイルデバイス向けにはコマ数をスキップして、フレームレートを遅くし、もとのアニメーションイメージを損なわないように調整をして書き出す。
などなど。より詳細は使い方/機能説明ページを御覧ください。
最後に
読み込み元 swf の作成注意点は下記リンクを御覧ください。
また、まだまだベータ版ですのでバグなど発見されましたら、ご連絡いただけるとありがたいです。
以上、WEB制作のチョッとしたお助けツールになれば幸いです。ぜひご利用して見てください！
最後まで読んで頂きありがとうございました！
マルチデバイスLab.の研究内容について、ご意見、ご質問などありましたら、
「マルチデバイスLab.」までお気軽にお問い合わせください。
※株式会社アイ･エム・ジェイのお問い合わせフォームに移動します。
サービスに関するお問い合わせ
