Adobe MAX 2009
JSplash swf to javascript converter
Satoshi Ueyama
id:gyuque

JSplashとは？
JSplashとは何か？
SWFムービーをJavascriptとSVGだけで再生するツール
とりあえずデモ

詳細
SWF
変換ツール
SVG生成
JSON
プレーヤー タグ実行
スクリプト変換

タグの例
シェイプ定義
{
tag:JSplash.tDefineShape,
id: 1,
塗色
bounds:{L:2374,R:8582,T:1744,B:5660},
fill_styles:[
{rgb:'000099'},{rgb:'6666cc'},{rgb:'ff6699'}
],
line_styles:[ {w:20,rgb:‘ffffff’},{w:20,rgb:‘000000’},{w:20,rgb:‘000000‘} ],
shape:[
{t:0,p:[6218,2895],f1:3,ls:2},{t:1,p:[290,-501]},{t:1,p:[2064,1192]},{t:1,p:[-
1192,2064]},{t:1,p:[-1162,-671]},{t:0,f1:1},{t:1,p:[0,609]},{t:1,p:[-
3834,0]},{t:1,p:[0,-
3834]},{t:1,p:[3834,0]},{t:1,p:[0,1141]},{t:0,f0:3,f1:2},{t:1,p:[0,2084]},{t:0,f0:1},{t
:1,p:[-902,-521]},{t:1,p:[902,-1563]},{t:0}
]
}
シェイプデータ

シェイプの描画例
「左側塗り」なし
始点
{t:0,p:[6218,2895],f1:3,ls:2},
{t:1,p:[290,-501]},
「右側塗り」設定
{t:1,p:[2064,1192]},
{t:1,p:[-1192,2064]},
{t:1,p:[-1162,-671]},
「右側塗り」設定
{t:0, f1:1},
{t:1,p:[0,609]}
・
・

Official Flash Player
JSplash

本日のデモ
http://gyu.que.jp/max/
small G small Q

詳細
SWF
変換ツール
SVG生成
JSON
プレーヤー タグ実行
スクリプト変換
JSplashは、バーチャルマシンではありません。
JSplashは、ActionScriptインタプリタではありません。

もう少し詳しく
SWF
Flare
変換ツール
逆コンパイルされたソース
プレーヤー
スクリプト変換
ブラウザのJSエンジン

スクリプト（無理矢理）変換エンジン
function () { function () {
var count; var count = this.__locals__.count;
if (!count) { with (this) {
count = 0; var count;
} if (!count) {
if (count == 2) { count = 0;
_parent.gotoAndStop(3); }
} if (count == 2) {
if (++count > 4) { _parent.gotoAndStop(3);
this.onEnterFrame = function () {if }
(++count == 8) {_parent.doNext();}}; if (++count > 4) {
stop(); this.onEnterFrame = function () {if
} (++count == 8) {_parent.doNext();}};
} stop();
}
}
Before After
this.__locals__.count = count;
}

AS→JS (1)
ローカル変数の「またぎ」
Frame 1 Frame 2 Frame 3
var a = 5; trace(++a); trace(++a);
6 7
function() {} function() {} function() {}
保存 復帰 保存 復帰

AS→JS (2)
this / global
ムービークリップのふりをする
オブジェクトを bind
ムービークリップへの参照
this._x = 0;
v = $version;
Global グローバルへの参照
function() {}
var

こんなんでいいのか？
意外と何とかなりました。
デモ 「Elastic Santa」
by Takayuki Fukatsu

thank you
http://www.libspark.org/svn/ruby/jsplash/trunk/