Flash ProからHTML5書き出しを可能にするSwiffy拡張機能

GoogleからFlash ProfessionalでHTML5書き出しを可能にする拡張機能が2011年11月17日に公開されました。もともとGoogleは変換サービスSwiffyをオンライン上で公開していましたが、これを使えば作成したFlashの制作ソフト「Flash Pro」から直接HTML5に出力することができます。それでは使い方を下記にて説明します。

使い方の手順

次のサイトで拡張機能が配布されていますので、MXPファイルをダウンロードします。この拡張機能はお使いのFlash ProがCS4/CS5/CS5.5であればインストールできます。

• http://www.google.com/doubleclick/studio/swiffy/extension.html

ダウンロードしたMXPファイルを開き、エクステンションマネージャーでインストールします。

Flash Proを起動し、メニューバーより［コマンド］→［Export as HTML5 (Swiffy)］を選択します。

すると、HTML5ファイル「◯◯◯.swf.html」が出力されます。

これをWebkit系のブラウザで確認すると、HTML5としてアニメーションが書き出されていることがわかります。タイムラインアニメーションの他、フレームアクション（スクリプト）も変換されています。iPhoneでも動作が確認できます。

• Flash版(オリジナル)
• HTML5版

Webkit以外のブラウザでは…？

ただしSwiffyで書きだすHTML5はwebkitのみを対象としているので、SafariやChrome以外のブラウザでは正しく表示することはできません。

▼IE9では表示エラーのアラートがでて、コンテンツが一切画面に表示されません

▼Firefoxでは一応確認できますが、一部のオブジェクトが表示されません

▼Android 2.3では何もコンテンツが表示されません

Androidの標準ブラウザではSVGが使えないので、SwiffyやWallabyを使ってFlashをHTML5に変換してもAndroidで見れないわけです。ユーザー体験を一貫して提供するためには、現実解としてAndroid向けFlash Playerは外せないということでしょうか。

HTML5のフォーマットについて

出力されたHTML5データはHTMLソースの中にモーションのデータやJavaScript、グラフィックデータが埋めこまれているので、成果物は一点となります。

ただし当然のように、HTML5にすると元のFlashに比べて容量が4倍近く膨らんでいます。先ほど紹介したサンプルですが、オリジナルのFlash版がたった6KBなのに対してHTML5版は22KB！ HTML5コンテンツが増えれば今以上にローディング時間が長くなり、今のFlashでローディングが長いと思っている人はさらに不快に思うことでしょう。

※ちなみにgzipによる転送を使えばFlashと同程度まで容量を抑えることができますが、gzipを設定しないと使えないので注意です。

追記 (2014/01/26)

現在はFlash Pro CC 13.1にCreateJSベースの「HTML5 Canvas ドキュメント」という形で、タイムラインアニメーションをHTML5として書き出す機能として搭載されています。HTML5コンテンツを作成する場合は「HTML5 Canvas ドキュメント」を利用するといいでしょう。

関連記事

• FlashのアニメーションをHTML5に変換するツール「Wallaby」をAdobeが公開
• HTML5出力可能なFlash CS5拡張機能を作ってみた
• Flash to HTML5 変換サービス「FL2HTML5(仮)」の雑感
• Flashだとここまでできる! HTML5とFlashの機能比較
• グーグル、Flash開発環境向けHTML5変換プラグインを公開 – CNET Japan