|
＝SwiffyとWallabyでFlashアニメーションをHTML5へ変換した素材を使用＝
|
| |
（2012.02.17作成,
12.09.15更新）
|
|
|
アップルは動画再生技術としてウェブで頻用されているアドビ社のフラッシュを捨てHTML5に移行すると明言し、同社製の「iPone」や「iPad」に搭載のモバイル版Safariで、言葉通りの環境を導入してしまった。
この iOSデバイス用に、フラッシュ資産をそのままHTML5化するためのツールが開発されているので、FlashアニメーションをHTML5へ変換した場合の再現性について、手始めにかっての簡単な資産（Flashのタイトルアニメーション）を用いて
Android版のウェブブラウザにて検証してみた。
＝検証環境＝
AQUOS PHONE SH-01DにインストールしたWebKit系ブラウザ
プロセッサ：OMAP4430(1GHz), Dual Core
OS: Android 2.3.5 及び
4.0.4
ディスプレイ解像度：720×1,280(16,777,216色)、メモリ：ROM
4GB, RAM 1GB
カメラ機能：静止画 4,000×3,000(1,210万画素)、動画 1,920×1,080
なお、変換ツールはAdobe Flash Professional CS5.5試用版も含めて、Windows７環境で使用した。
|
|
|
元素材は、1999年にMac版Flash
4で作成したFla及び SWFファイル↓
|
|
|
|
|
Firefox(10.0)とOpera
Mini(7.0)は Flashに未対応。無論、iPhone(iOS 5.1)のSafari
及び AndroidのChrome(18.0)では再生出来ない。
|
| |
|
|
|
Windows用Chromeを使用して、サイト上でSWFファイルをアップして変換
|
|
Googleは、FlashのSWFファイルをHTML5に変換するツール Swiffyをオンラインサービスの Google
Labs上で公開した。
Swiffyで変換したファイルは、ChromeやSafariなど XMLベースの2Dベクター画像記述言語 SVGをサポートするウェブキット（WebKit）系ブラウザで表示出来、iPhoneやiPadのSafariでも表示出来るという事だ。
KATCHサイトから配信 |
|
|
|
＜成績＞
Android 2.3の標準ブラウザやAngel Browser等のWebKit系ブラウザは、いずれも表示出来ない
Y (>_<、)Y
Android 4.0の標準ブラウザでは、ガクガクだが再生可能。
なお、Android版Firefox(10.0, 14.0, 15.0), Opera
Mobile(12.0)では、文字化けするも表示可能だが、Opera Mini(7.0)は表示出来ない。
iPhone(iOS 5.1)のSafari 及び AndroidのChrome(18.0)では再生可能だが、ややガクガク再生となる
(>_<、)Y
|
|
| |
Wallaby
|
|
|
ここから
wallaby_p1_win_030811.exeを入手。FLAファイルを変換
|
|
Adobeは
Flash アニメの一部をHTML5 に変換する実験的ツール Wallabyのテクノロジープレビュー版をリリースした。Wallabyが扱うのは
FLA ファイルに含まれるアートワークとアニメーションの部分のみで、iOSなどFlash
が動かない環境でも、Flashオーサリング環境で作った単純な広告なら再利用が可能になると云う事だ。
変換されたファイル構造をみると、HTML5というよりはjQueryを使用したJavaScriptやSVGとして書き出されていると云う（ こちらを参照）。 |
|
KATCHサイトから配信（"AddType
image/svg+xml .svg" 記述の.htaccessも配置）
|
| |
|
| |
＊iPhone(iOS 5.1)でもSVGファイルを読み込めない
Y (>_<、)Y
|
|
| |
|
Xserverサイトから配信（AddType..の.htaccessを添付）
|
|
|
|
＜コメント＞
対応PC用ブラウザは Chrome 15とSafari 5だが、SafariはiPhoneも含めて日本語を表示出来ない。
|
|
そこで、Wallabyで出力されたHTMLファイルの日本語文字部分のフォントを変更した。
font-familyを "_Arial Narrow"から "MS UI Gothic"に変更して配信
|
|
|
＜成績＞
Android 2.3の WebKit系ブラウザでは、SVGファイルを読み込めない
(>_<、)
・・・MICS,MOMO,
So-netや自宅サイトからの配信でもダメだ。
Android 4.0の標準ブラウザでは、Xserver配信で
font-family;MS UI Gothicとすれば問題なく表示可能となった
＼(^o^)／
iPhone(iOS 5.1)のSafari 及び AndroidのChrome(18.0)は、KATCHサイト以外では問題なく表示可能だ
＼(^o^)／
なお、Android版Firefox(10.0, 14.0, 15.0)とOpera
Mobile(12.0), Opera Mini(7.0)は全く表示出来ない。
|
|
|
|
|
1) FlashアニメーションをHTML5へ変換出来るツールは、簡単構成のアニメならPC用のWebKit系ブラウザで再現可能となっているが、
2) Android 2.3のWebKit系ブラウザは、SVGファイルの描画に対応出来ていないが、Android
4.0では対応した。
3) iPhone(iOS 5.1)のSafari
及び AndroidのChrome(18.0)では、Wallabyで変換すれば再現性があった。
|
|
|
| |
|
