FlashアニメーションをHTML5へ変換可能なツール

FlashアニメーションをHTML5へ変換可能なツール


Swiffy, WallabyとSWF Animation Converterの使用経験
(2011.10.27作成, 11.01更新)
=ブラウザはGoogle Chromeか Safari(+QT)を使用して確認して下さい=
アップルは動画再生技術としてウェブで頻用されているアドビ社のフラッシュを捨てて
HTML5に移行すると明言し、同社製の人気スマートフォン「iPone」やタブレット型コン
ピュータ「iPad」に搭載のウェブブラウザ:モバイル版Safariで、言葉通りの環境を導入
してしまった。
この iOSデバイス用に、フラッシュ資産をそのままHTML5化するためのツールが開発
されているが、完全移行は各々のテクノロジーの違いから難しいであろう(「HTML5
とFlashの機能比較」はこちらの記事を参照)。
筆者は iOSデバイスを所有していないので、FlashアニメーションをHTML5へ変換し
た場合の再現性について、手始めにかっての簡単な資産(Flashのタイトルアニメー
ション)を用いて PC用のウェブブラウザにて検証してみた。
=検証環境=
64ビットWindows 7 Professional(Mac版Safari 5.1はMac OSX10.7)
ウェブブラウザ:IExplorer 9(XP ModeでIExplorer 8)、Firefox 7.0.1、Opera 11.52、
Chrome 15.0、Safari 5.1(QuickTime必要)
なお、変換ツールはAdobe Flash Professional CS5.5試用版も含めて、Windows7環
境で使用した。
元素材は、1999年にMac版Flash 4で作成したFla及び SWFファイル↓
 
 
  Swiffy (Chromeを使用して、サイト上でSWFファイルをアップして変換)
Googleは、FlashのSWFファイルをHTML5に変換するツールSwiffyをオンラインサービス
Google Labs上で公開した。
Swiffyで変換したファイルは、ChromeやSafariなど XMLベースの2Dベクター画像記述
言語SVGをサポートするウェブキット(WebKit)系ブラウザで表示出来、iPhoneやiPadの
Safariでも表示出来るという事だ。
 
Googleによると、現行版はまだ早期リリースのため、Flashのすべてのコンテンツを変換
出来る訳ではないが、アニメーションやバナー広告などは問題なく表示出来ると云う。

KATCHサイトから配信
 
<成績>
SWF 4でも変換可能だった。
対応ブラウザは Chrome 15とSafari 5。Firefox 7とIExplorer 9でもアニメーション可能だ
が、日本語の文字化けをしてしまう。 IExplorer 9では色相の異常も起こしてしまう。
Opera 11とIExplorer 9未満は描画出来ない。
<補足>
Flashゲームコーナーの「おじゃるの射的ゲーム」を変換した成績は、下記を参照。

Wallabyここから wallaby_p1_win_030811.exeを入手。FLAファイルを変換)
Adobeは Flash アニメの一部をHTML5 に変換する実験的ツール Wallabyのテクノロジー
プレビュー版をリリースした。Wallabyが扱うのは FLA ファイルに含まれるアートワークとア
ニメーションの部分のみで、iOSなどFlash が動かない環境でも、Flashオーサリング環境
で作った単純な広告なら再利用が可能になると云う事だ。
変換されたファイル構造をみると、HTML5というよりはjQueryを使用したJavaScriptやSVG
として書き出されていると云う(こちらを参照)。
但し、FLAファイルはFlash Professional CS5 project files.となっており、Flash 4で作成
したFLAは変換エラーとなってしまうので、Adobe Flash Professional CS5.5試用版で再
度保存し直したものを素材とした。
KATCHサイトから配信("AddType image/svg+xml .svg" 記述の.htaccessも配置したがダメ)
 
Xserverから配信(AddType..の.htaccessは添付すればChromeでも可能)
 
<成績>
対応ブラウザは Chrome 15とSafari 5だが、そのままではSafariは日本語を表示出来ない。
そこで、Wallabyで出力されたHTMLファイルの日本語文字部分のフォントを変更した。
font-familyを "_Arial Narrow"から "MS UI Gothic"に変更して配信
 
・・・Windows版Safariは問題なく日本語表示が可能となるが、Mac版では→結果2)参照。
残念ながら、筆者が常用するKATCHサイトでは SVGファイルを読み込めない Y (>_<、)Y
・・・MICS, MOMOSo-netからの配信では、AddType...記載の.htaccessを添付しなくても
SVGファイルの表示が可能だった。
自宅サイトは、XPがサーバの場合には拡張子:svg、MIMEタイプ:image/svg+xmlが必要
だった。
IExplorer9, Firefox 7, Opera 11とIExplorer 9未満は描画出来ない。
<補足>
Flashゲームコーナーの「おじゃるの射的ゲーム」を変換した成績は、追記を参照。

SWF Animation Converter 0.2.0 beta.(ここから 入手。SWFファイルを変換)
マルチデバイスLabさん.が制作したFlashアニメーションをHTML5に変換するマルチデバ
イス対応のAIRアプリケーション。変換されたファイルを見ると、HTML5 canvasやSVG
ではなく、CSS3アニメーションのようだとの事だ。
<成績>
Flash Player9以上は変換可能となって
いるが、残念ながらSWF 4は無論の事、
Adobe Flash Professional CS5.5試用
版で出力したSWF 9、SWF10.2でも読
み込みエラーとなって変換出来ない。
・・・”stageを参照しない"等の制限も
あり、何がSWF条件に合致しないので
あろうか?
<補足>
当コンテンツ:Flashゲームコーナーの「おじゃるの射的ゲーム」を変換した場合も同様に、
読み込みエラーとなって変換出来なかった。

 結語
1)FlashアニメーションをHTML5へ変換出来るツールは、ウェブキット系のブラウザで再現
可能となっているが、Wallaby変換では Safariで日本語フォントの認識に問題があった。
2) Wallabyで変換した場合、Mac版SafariはフォントがMS UI Gothicでは文字化けはしな
いが、プロポーションを統一する為にはOsakaを使用する必要があった。
3) Wallabyで作成されるSVGファイルに対応出来ていないプロバイダがあった。
 
追記(2011.11.01)
当コンテンツ:Flashゲームコーナーの「おじゃるの射的ゲーム」を変換した成績
素材はMac版Flash 4で作成したFLAファイルを、Adobe Flash Professional CS5.5試用版で
フォントを”Osaka”から”MS UI Gothic”に変更して、出力し直したFLA及びSWF 5ファイルと
した。
 
 
  Swiffyで変換
KATCHサイトから配信
 
<成績>
SWF 5でも変換可能だが、得点カウンターは上手く変換出来なかった。
対応ブラウザ:Chrome 15、Safari 5でも動作が著しく緩慢となってしまう。
Firefox 7はアニメーション可能だが、日本語は文字化けし、途中でプレイ出来なくな
ってしまう。IExplorer 9はアニメーションすら出来ない。
Opera 11とIExplorer 9未満は描画出来ない。

Wallabyで変換
Xserverサイトから配信("AddType image/svg+xml .svg" 記述の.htaccessも配置)
 
<成績>
変換時エラーが多発して、対応ブラウザ:Chrome 15、Safari 5でもゲームとしての体裁
を再現させる事は出来ず、制御出来ないスライドショーとなってしまう。
IExplorer 9,
Firefox 7, Opera 11やIExplorer 9未満はSVGの画像が表示されるだけで
モーションにもならない。

 


| Kenのムービー計画へ >動画狂コーナーへ |