JSplash - Adobe MAX 2009

2,803 views
2,684 views

Published on

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Thank you for creating this slide, I've learned something today.
    http://www.gardeningmania.net/
    http://www.gardeningmania.net/category/nutrients-plants/
    http://www.gardeningmania.net/category/long-lasting-perennials/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
2,803
On SlideShare
0
From Embeds
0
Number of Embeds
830
Actions
Shares
0
Downloads
13
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

JSplash - Adobe MAX 2009

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

×