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

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

使い方の手順

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

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

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

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

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

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 ドキュメント」を利用するといいでしょう。

関連記事

投稿者 : 池田 泰延

BookMark

いかがでしたでしょうか、ブックマークはこちらからどうぞ。

このエントリーをはてなブックマークに追加

Comment/Trackback 3件

  • Cディベロッパー より:

    良いですね。Flashから書き出されたコンテンツが異なるプラットフォームでも動くこと自体はグッドだと思います。

    これはこれで素晴らしいのですが、変換精度ではどうしても難がでますね。

    複雑なゲームやアプリケーションとなるともっと齟齬がでてくるでしょう。

    HTML5が常に持つブラウザ毎によって差が出るという問題を考えると、色々苦労しそうだなぁと思ってしまいます。
    残念ながらブラウザ問題はHTML5であるという限り解決する事は難しいでしょう。

    どう考えてもモバイルFlash PlayherはWebコンテンツを支える上で必須ですね。
    一貫して同じ動作で動くって素晴らしい事です。

    う~ん、色々なんとかしたいもんですな。

  • FlashはHTML5アニメーション作成ツールとして使える!(はず) | ブクマ! より:

    […] コメントを書く 先日の Adobe の発表から、ちょっと前にも見たことのあるようなアンチ Flash 記事が花盛りになってしまいましたが、Google が Flash Pro から HTML5 で書き出してくれるエクステンションを公開してくれました。 Flash ProからHTML5書き出しを可能にするSwiffy拡張機能 | ClockMaker Blog […]

  • hi-posi » スマホ向けFlashサイトを作るには? 第三回 Swiffy編 より:

    […] 詳しくは、以下のページをご覧ください。 ・Flash ProからHTML5書き出しを可能にするSwiffy拡張機能 | ClockMaker Blog ・SWIFFYを調べてみた。 […]