Flash SWF HTML5 Canvas or SVG

SWF 内Lossless画像のPNG化による
HTML5 Flash Player 処理軽減提案
2011/11/17(Thu) [email protected]
提案概要
• ブラウザ上の JavaScript で SWF => HTML5 Canvas or
SVG の橋渡しをする場合、SWF 内 Lossless ビットマッ
プ画像が Flash 独自形式の為、PNG や GIF といった
Canvas or SVG が認識できる画像形式に変換する必
要がある。
• その為、ExGame や Reel では、Zlib 伸長や PNG 符
号化といった重たい処理が存在すると予想される。
• SWF を予め変換する事。Flash Player 側で SWFv8 以
降の仕様を１つ許容する事で、重たい処理を省略で
きる。
HTML5 Flash Player の
ビットマップ処理想像図 (JavaScript)
Flash SWF
DefineBitsLossless*
ZlibBitmapData
DefineBitsJPEG*
(custom)JPEGData
RGB or RGBA
Raw Bitmap Data
PNG
encode
zlib
uncompress
base64
ZlibBitmapData
(custom)JPEGData
chunk
sorting
PNG or GIF
data
base64
(std) JPEG data
の処理は重たいはず
HTML5
Canvas
or SVG
SWF Lossless 画像の PNG 化
(処理する言語は何でも)
Flash SWF
DefineBitsLossless*
ZlibBitmapData
DefineBitsJPEG*
(custom)JPEGData
ZlibBitmapData
zlib
uncompress
RGB or RGBA
Raw Bitmap Data
PNG
encode
PNG data
Flash SWF
DefineBitsJPEG2
PNG data
DefineBitsJPEG*
(custom)JPEGData
※ SWF を予め上記のように変換しておく。動的な SWF であれば
ひな形の SWF を変換、出来れば replace 時も、この形式で格納する。
PNG 化 SWF のビットマップ画像処理
(JavaScript)
Flash SWF
RGB or RGBA
Raw Bitmap Data
(不要)
PNG or GIF
data
DefineBitsJPEG2
PNG data
DefineBitsJPEG*
(custom)JPEGData
base64
PNG data
(custom)JPEGData
chunk
sorting
base64
HTML5
Canvas
or SVG
(std) JPEG data
※ DefineBitsJPEG2 に PNG を格納するのは SWFv8 以降の
仕様の為、既存の携帯Flash では表示できません。
SWFEditor v0.50 以降の機能
• PHP に SWFEditor を適用すると、以下のように
PNG 化できます。 php swfconvertbitmapdatatojpegtag.php \
colorformat.swf > colorformat-png.swf
•
http://git.sourceforge.jp/view?p=swfed/swfed.git;a=blob;f=sample/swfco
nvertbitmapdatatojpegtag.php
• 動的生成用の replace もこの形式に対応してい
$without_converting = true;
ます。
$swfed->replaceBitmapData($image_id, $bitmap_data,
null, $without_converting);
• PHP 以外の言語でも実装は難しくないはずです。
• 以上です。

Download Report