This document provides information about JSplash, which is a tool that converts SWF files to JavaScript and SVG so they can be reproduced without Flash. It discusses how SWF files are converted to JSON and then run using JavaScript functions. Examples are given of how ActionScript is converted to equivalent JavaScript, including how this, global variables, and function scopes are handled. Use cases for JSplash are described along with links for more information.

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

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

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

5. タグの例
シェイプ定義
{
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}
]
}
シェイプデータ

6. シェイプの描画例
「左側塗り」なし
始点
{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]}
・
・

8. Official Flash Player
JSplash

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

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

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

12. スクリプト（無理矢理）変換エンジン
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;
}

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

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

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

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