jsplash - adobe max 2009
TRANSCRIPT
![Page 1: JSplash - Adobe MAX 2009](https://reader034.vdocuments.net/reader034/viewer/2022051314/55762489d8b42a4e1c8b4f28/html5/thumbnails/1.jpg)
Satoshi Ueyamaid:gyuque
JSplash swf to javascript converter
Adobe MAX 2009
![Page 2: JSplash - Adobe MAX 2009](https://reader034.vdocuments.net/reader034/viewer/2022051314/55762489d8b42a4e1c8b4f28/html5/thumbnails/2.jpg)
JSplashとは?
SWFムービーをJavascriptとSVGだけで再生するツール
JSplashとは何か?
とりあえずデモ
![Page 3: JSplash - Adobe MAX 2009](https://reader034.vdocuments.net/reader034/viewer/2022051314/55762489d8b42a4e1c8b4f28/html5/thumbnails/3.jpg)
![Page 4: JSplash - Adobe MAX 2009](https://reader034.vdocuments.net/reader034/viewer/2022051314/55762489d8b42a4e1c8b4f28/html5/thumbnails/4.jpg)
詳細
変換ツール
プレーヤー
SVG生成
タグ実行
スクリプト変換
SWF
JSON
![Page 5: JSplash - Adobe MAX 2009](https://reader034.vdocuments.net/reader034/viewer/2022051314/55762489d8b42a4e1c8b4f28/html5/thumbnails/5.jpg)
タグの例
{
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}
]
}
シェイプ定義
塗色
シェイプデータ
![Page 6: JSplash - Adobe MAX 2009](https://reader034.vdocuments.net/reader034/viewer/2022051314/55762489d8b42a4e1c8b4f28/html5/thumbnails/6.jpg)
シェイプの描画例
{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]}
・
・
「右側塗り」設定
「右側塗り」設定
「左側塗り」なし始点
![Page 7: JSplash - Adobe MAX 2009](https://reader034.vdocuments.net/reader034/viewer/2022051314/55762489d8b42a4e1c8b4f28/html5/thumbnails/7.jpg)
![Page 8: JSplash - Adobe MAX 2009](https://reader034.vdocuments.net/reader034/viewer/2022051314/55762489d8b42a4e1c8b4f28/html5/thumbnails/8.jpg)
Official Flash Player
JSplash
![Page 9: JSplash - Adobe MAX 2009](https://reader034.vdocuments.net/reader034/viewer/2022051314/55762489d8b42a4e1c8b4f28/html5/thumbnails/9.jpg)
http://gyu.que.jp/max/
本日のデモ
small G small Q
![Page 10: JSplash - Adobe MAX 2009](https://reader034.vdocuments.net/reader034/viewer/2022051314/55762489d8b42a4e1c8b4f28/html5/thumbnails/10.jpg)
詳細
JSplashは、バーチャルマシンではありません。JSplashは、ActionScriptインタプリタではありません。
変換ツール
プレーヤー
SVG生成
タグ実行
スクリプト変換
SWF
JSON
![Page 11: JSplash - Adobe MAX 2009](https://reader034.vdocuments.net/reader034/viewer/2022051314/55762489d8b42a4e1c8b4f28/html5/thumbnails/11.jpg)
もう少し詳しく
変換ツール
プレーヤー
スクリプト変換
SWF
逆コンパイルされたソース
Flare
ブラウザのJSエンジン
![Page 12: JSplash - Adobe MAX 2009](https://reader034.vdocuments.net/reader034/viewer/2022051314/55762489d8b42a4e1c8b4f28/html5/thumbnails/12.jpg)
After
スクリプト(無理矢理)変換エンジン
function () {
var count;
if (!count) {
count = 0;
}
if (count == 2) {
_parent.gotoAndStop(3);
}
if (++count > 4) {
this.onEnterFrame = function () {if
(++count == 8) {_parent.doNext();}};
stop();
}
}
function () {
var count = this.__locals__.count;
with (this) {
var count;
if (!count) {
count = 0;
}
if (count == 2) {
_parent.gotoAndStop(3);
}
if (++count > 4) {
this.onEnterFrame = function () {if
(++count == 8) {_parent.doNext();}};
stop();
}
}
this.__locals__.count = count;
}Before
![Page 13: JSplash - Adobe MAX 2009](https://reader034.vdocuments.net/reader034/viewer/2022051314/55762489d8b42a4e1c8b4f28/html5/thumbnails/13.jpg)
AS→JS (1)
var a = 5; trace(++a); trace(++a);
Frame 1 Frame 2 Frame 3
6 7
function() {} function() {} function() {}
保存 復帰 保存 復帰
ローカル変数の「またぎ」
![Page 14: JSplash - Adobe MAX 2009](https://reader034.vdocuments.net/reader034/viewer/2022051314/55762489d8b42a4e1c8b4f28/html5/thumbnails/14.jpg)
AS→JS (2)
this._x = 0;
v = $version;
ムービークリップへの参照
ムービークリップのふりをするオブジェクトを bind
Global グローバルへの参照
function() {}
var
this / global
![Page 15: JSplash - Adobe MAX 2009](https://reader034.vdocuments.net/reader034/viewer/2022051314/55762489d8b42a4e1c8b4f28/html5/thumbnails/15.jpg)
こんなんでいいのか?
デモ 「Elastic Santa」by Takayuki Fukatsu
意外と何とかなりました。
![Page 16: JSplash - Adobe MAX 2009](https://reader034.vdocuments.net/reader034/viewer/2022051314/55762489d8b42a4e1c8b4f28/html5/thumbnails/16.jpg)
thank youhttp://www.libspark.org/svn/ruby/jsplash/trunk/