Pixelplant - WebDev Meetup Salzburg

635 views

Published on

Published in: Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
635
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Pixelplant - WebDev Meetup Salzburg

  1. 1. Upload to the Future From Flash to HTML5 Wolfram Kriesing @wolframkriesing pixelplant / uxebu Donnerstag, 21. November 13
  2. 2. Donnerstag, 21. November 13
  3. 3. uxebu / pixelplant Technology since 2008 Donnerstag, 21. November 13 100%
  4. 4. Agenda • Bonsai inside • SWF (Flash) file anatomy • ActionScript2+3 • ByteCode - VM or ? • ActionScript2 => JavaScript • ActionScript API • Editor with Live Preview Donnerstag, 21. November 13
  5. 5. Bonsai - Inside Donnerstag, 21. November 13
  6. 6. bonsaijs.org Donnerstag, 21. November 13
  7. 7. ... Bonsai Demos ... Donnerstag, 21. November 13
  8. 8. Content creation Audio Bitmap Shapes Text darker lighter Video randomize radial saturation Color hue Gradient hsla linear rgba Organization Movie play units Timeline stop Manipulation greyscale saturate invert Filter blur dropShadow sepia Donnerstag, 21. November 13 Sprite frames length mouseup mousedown on Events keyup drag emit keydown touch Grouping keyframes matrix x opacity Animation rotation Matrix clip y mask scale
  9. 9. Single Threaded, almost • • • • Renderer Donnerstag, 21. November 13 Heavy Lifting Decoupled from UI Thread WebWorker Runs in nodejs Bonsai Script
  10. 10. Client Setup Bonsai Script IFrame UI Thread Renderer Donnerstag, 21. November 13
  11. 11. Donnerstag, 21. November 13
  12. 12. Client Setup Bonsai Script IFrame UI Thread Renderer Bonsai Script WebWorker UI Thread Renderer Donnerstag, 21. November 13
  13. 13. Client/Server Setup iPhone Renderer Bonsai Script node.js Desktop Renderer iPad Renderer ... Donnerstag, 21. November 13
  14. 14. Renderers • • • • • SVG Canvas HTML+CSS WebGL Mixed Renderer Donnerstag, 21. November 13 Runner
  15. 15. SWF File Anatomy Donnerstag, 21. November 13
  16. 16. Donnerstag, 21. November 13
  17. 17. Donnerstag, 21. November 13
  18. 18. Tools help! Donnerstag, 21. November 13
  19. 19. Donnerstag, 21. November 13
  20. 20. > swfdump -D ikea-lady.swf Metadata Script [HEADER] [HEADER] [HEADER] [HEADER] [HEADER] [HEADER] [009] File version: 6 File size: 29640 Frame rate: 30.000000 Frame count: 1 Movie width: 209.00 Movie height: 242.00 3 SETBACKGROUNDCOLOR (ff/ff/ff) [00c] 2 DOACTION ( 0 bytes) action: Stop ( 0 bytes) action: End [002] Shapes [027] [01a] [001] [000] [01a] [023] [002] Donnerstag, 21. November 13 30 DEFINESHAPE defines id 0001 | fillstyles(01) linestyles(00) | 1 ) SOLID ffffffff | | fill: 00/01 line:00 - moveTo -23.25 -23.25 | fill: 00/01 line:00 - lineTo 23.25 -23.25 | fill: 00/01 line:00 - lineTo 23.25 23.25 | fill: 00/01 line:00 - lineTo -23.25 23.25 | fill: 00/01 line:00 - lineTo -23.25 -23.25 | 4 DEFINESPRITE defines id 0002 6 PLACEOBJECT2 places id 0001 at depth 0001 | Matrix | 1.000 0.000 0.00 | 0.000 1.000 0.00 0 SHOWFRAME 1 (00:00:00,000) 0 END 26 PLACEOBJECT2 places id 0002 at depth 0001 | Matrix | CXForm r g b a | 4.495 0.000 104.50 | mul 0.0 0.0 0.0 1.0 | 0.000 5.204 121.00 | add 174 225 255 0 8043 DEFINEBITSJPEG3 defines id 0003 54 DEFINESHAPE defines id 0004 | fillstyles(02) linestyles(00) | 1 ) BITMAPc 65535 | 2 ) BITMAPc 3 | | fill: 00/02 line:00 - moveTo 137.50 71.00 | fill: 00/02 line:00 - lineTo -137.50 71.00 | fill: 00/02 line:00 - lineTo -137.50 -65.00
  21. 21. ActionScript2+3 Donnerstag, 21. November 13
  22. 22. [00c] ActionScript2 Donnerstag, 21. November 13 1284 DOACTION ( 229 bytes) action: Constantpool(28 entries) String:"handle" St String:"ball" String:"hitTest" String:"bounceBall" String:"numPoints" String:"ball String:"Date" String:"startTime" String:"gameEnd" String:"_width" String:"directio String:"Stage" String:"height" String:"width" String:"runInterval" String:"clearIn String:"interval" String:"maxBallSpeed" String:"run" String:"setInterval" String:" ( 11 bytes) action: unknown[8e] (remainder of 11 bytes:"run00 ( 2 bytes) action: Push Lookup:0 ("handle") ( 0 bytes) action: GetVariable ( 6 bytes) action: Push Lookup:1 ("_x") register:1 Lookup:2 (" ( 0 bytes) action: GetMember ( 0 bytes) action: SetMember ( 2 bytes) action: Push Lookup:0 ("handle") ( 0 bytes) action: GetVariable ( 7 bytes) action: Push int:1 Lookup:3 ("ball") ( 0 bytes) action: GetVariable ( 2 bytes) action: Push Lookup:4 ("hitTest") ( 0 bytes) action: CallMethod ( 0 bytes) action: Not ( 2 bytes) action: If 78 ( 2 bytes) action: Push Lookup:0 ("handle") ( 0 bytes) action: GetVariable ( 2 bytes) action: Push Lookup:3 ("ball") ( 0 bytes) action: GetVariable ( 7 bytes) action: Push int:2 Lookup:5 ("bounceBall") ( 0 bytes) action: CallFunction ( 0 bytes) action: Pop ( 4 bytes) action: Push Lookup:6 ("numPoints") Lookup:6 ("numP ( 0 bytes) action: GetVariable ( 0 bytes) action: Increment ( 0 bytes) action: SetVariable ( 2 bytes) action: Push Lookup:6 ("numPoints") ( 0 bytes) action: GetVariable ( 5 bytes) action: Push int:5 ( 0 bytes) action: Modulo ( 9 bytes) action: Push double:0.000000 ( 0 bytes) action: Equals2 ( 0 bytes) action: Not ( 2 bytes) action: If 10 ( 4 bytes) action: Push Lookup:7 ("ballSpeed") Lookup:7 ("ball ( 0 bytes) action: GetVariable ( 0 bytes) action: Increment ( 0 bytes) action: SetVariable ( 2 bytes) action: Push Lookup:8 ("gameTime") ( 0 bytes) action: GetVariable ( 11 bytes) action: Push double:0.000000 Lookup:9 ("Date")
  23. 23. [00c] 1284 DOACTION ( 229 bytes) action: Constantpool(28 entries) String:"handle" St String:"ball" String:"hitTest" String:"bounceBall" String:"numPoints" String:"ball String:"Date" String:"startTime" String:"gameEnd" String:"_width" String:"directio String:"Stage" String:"height" String:"width" String:"runInterval" String:"clearIn String:"interval" String:"maxBallSpeed" String:"run" String:"setInterval" String:" ( 11 bytes) action: unknown[8e] (remainder of 11 bytes:"run00 ( 2 bytes) action: Push Lookup:0 ("handle") //Frame 0 ( 0 bytes) action: GetVariable // Action tag #0 ( 6 bytes) action: Push Lookup:1 ("_x") register:1 Lookup:2 (" ( 0 bytes) action: GetMember function run() ( 0 bytes) action: SetMember { ( 2 bytes) action: Push Lookup:0 ("handle") handle._x = _root._xmouse; ( 0 bytes) action: GetVariable if (ball.hitTest(handle)) ( 7 bytes) action: Push int:1 Lookup:3 ("ball") { ( 0 bytes) action: GetVariable bounceBall(ball, handle); ( 2 bytes) action: Push Lookup:4 ("hitTest") ++numPoints; ( 0 bytes) action: CallMethod if (numPoints % 5 == 0) ( 0 bytes) action: Not { ( 2 bytes) action: If 78 ++ballSpeed; ( 2 bytes) action: Push Lookup:0 ("handle") } ( 0 bytes) action: GetVariable } ( var __reg2 = gameTime - (new Date() - startTime) / 1000; 2 bytes) action: Push Lookup:3 ("ball") ( 0 bytes) action: GetVariable if (__reg2 <= 0) ( 7 bytes) action: Push int:2 Lookup:5 ("bounceBall") { ( 0 bytes) action: CallFunction gameEnd(); ( 0 bytes) action: Pop } ( 4 bytes) action: Push Lookup:6 ("numPoints") Lookup:6 ("numP } ( 0 bytes) action: GetVariable function bounceBall(ball, handle) ( 0 bytes) action: Increment { ( 0 bytes) action: SetVariable var __reg1 = handle._width / 2 + handle._x; ( 2 bytes) action: Push Lookup:6 ("numPoints") var __reg2 = ball._x; ( 0 bytes) action: GetVariable direction.y = direction.y * -1; ( 5 bytes) action: Push int:5 if (__reg2 == __reg1) ( 0 bytes) action: Modulo { ( 9 bytes) action: Push double:0.000000 direction.x = 0; ( 0 bytes) action: Equals2 return; ( 0 bytes) action: Not } ( 2 bytes) action: If 10 ( 4 bytes) action: Push Lookup:7 ("ballSpeed") Lookup:7 ("ball ( 0 bytes) action: GetVariable ( 0 bytes) action: Increment ( 0 bytes) action: SetVariable ( 2 bytes) action: Push Lookup:8 ("gameTime") ( 0 bytes) action: GetVariable ( 11 bytes) action: Push double:0.000000 Lookup:9 ("Date") Donnerstag, 21. November 13 ActionScript2
  24. 24. slot 0: var <q>[public]::x6y6q5:<q>[public]flash.display::Movie slot 0: var <q>[public]::x3y3q5:<q>[public]flash.display::Movie slot 0: var <q>[public]::x15y15q5:<q>[public]flash.display::Mov slot 0: var <q>[public]::x12y12q5:<q>[public]flash.display::Mov method * <q>[packageinternal]filter_fla::frame1=()(0 params, 0 [stack:5 locals:1 scope:10-11 flags:] slot:0 //ActionScript 3.0 { // package filter_fla // class MainTimeline 00000) + 0:0 getlocal_0 package filter_fla 00001) + 1:0 pushscope { 00002) + 0:1 getlocal_0 import flash.display.*; 00003) + 1:1 getproperty <q>[public]::x1y1q5 import flash.filters.*; 00004) + 1:1 findpropstrict <q>[public]flash.filters::BlurF public dynamic class MainTimeline extends flash.display.MovieClip 00005) + 2:1 pushbyte 1 { 00006) + 3:1 dup public function MainTimeline() 00007) + 4:1 pushbyte 5 { 00008) + 5:1 constructprop <q>[public]flash.filters::BlurFi super(); 00009) + 2:1 newarray 1 params addFrameScript(0, this.frame1); return; 00010) + 2:1 setproperty <q>[public]::filters } 00011) + 0:1 getlocal_0 00012) + 1:1 getproperty <q>[public]::x3y3q5 function frame1():* 00013) + 1:1 findpropstrict <q>[public]flash.filters::BlurF { this.x1y1q5.filters = [new flash.filters.BlurFilter(1, 1, 5)]; 00014) + 2:1 pushbyte 3 this.x3y3q5.filters = [new flash.filters.BlurFilter(3, 3, 5)]; 00015) + 3:1 dup this.x6y6q5.filters = [new flash.filters.BlurFilter(6, 6, 5)]; 00016) + 4:1 pushbyte 5 this.x9y9q5.filters = [new flash.filters.BlurFilter(9, 9, 5)]; this.x12y12q5.filters = [new flash.filters.BlurFilter(12, 12,00017) + 5:1 constructprop <q>[public]flash.filters::BlurFi 5)]; this.x15y15q5.filters = [new flash.filters.BlurFilter(15, 15,00018) + 2:1 newarray 1 params 5)]; return; 00019) + 2:1 setproperty <q>[public]::filters } 00020) + 0:1 getlocal_0 00021) + 1:1 getproperty <q>[public]::x6y6q5 public var x9y9q5:flash.display.MovieClip; 00022) + 1:1 findpropstrict <q>[public]flash.filters::BlurF 00023) + 2:1 pushbyte 6 public var x1y1q5:flash.display.MovieClip; 00024) + 3:1 dup public var x6y6q5:flash.display.MovieClip; 00025) + 4:1 pushbyte 5 00026) + 5:1 constructprop <q>[public]flash.filters::BlurFi public var x3y3q5:flash.display.MovieClip; 00027) + 2:1 newarray 1 params public var x15y15q5:flash.display.MovieClip; 00028) + 2:1 setproperty <q>[public]::filters 00029) + 0:1 getlocal_0 public var x12y12q5:flash.display.MovieClip; 00030) + 1:1 getproperty <q>[public]::x9y9q5 } 00031) + 1:1 findpropstrict <q>[public]flash.filters::BlurF } 00032) + 2:1 pushbyte 9 00033) + 3:1 dup 00034) + 4:1 pushbyte 5 00035) + 5:1 constructprop <q>[public]flash.filters::BlurFi 00036) + 2:1 newarray 1 params 00037) + 2:1 setproperty <q>[public]::filters 00038) + 0:1 getlocal_0 Donnerstag, 21. November 13 00039) + 1:1 getproperty <q>[public]::x12y12q5 ActionScript3
  25. 25. ActionScript2 ActionScript3 • ~60 classes • ~450 classes • simplest namespacing • packages, classes, interfaces • case-insensitive!!! • case-sensitive • script blocks attached to frames • event-driven • dynamic scope lookups • scope like JS • lots of legacy • very (over?) engineered • small, AVM1, ... • huge, AVM2, ... Donnerstag, 21. November 13
  26. 26. ByteCode - VM or JavaScript Donnerstag, 21. November 13
  27. 27. Donnerstag, 21. November 13
  28. 28. Donnerstag, 21. November 13
  29. 29. ActionScript2 => JavaScript Donnerstag, 21. November 13
  30. 30. ... first a bit of architecture Donnerstag, 21. November 13
  31. 31. Architecture Overview Server Browser AS2/3 Shim Runtime Donnerstag, 21. November 13 Images, Fonts, Audio, etc. JavaScript CDN assets, index.html, movie-min.js Lokal
  32. 32. Server side SWF Parser Donnerstag, 21. November 13 { header: { inflate: true, lzma: false, version: 11, len: 6967, rect: { name: 'Rect', x1: 0, y1: 0, x2: 550, y2: 400 }, frameRate: 24, frameCount: 1 }, tags: [ { name: 'FileAttributes', reserved: 0, useDirectBlit: 0, useGPU: 0, hasMetadata: 1, actionScript3: 0, reserved2: 0, useNetwork: 0, reserved3: 0 }, { name: 'MetaData', metaData: '<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/2 ns.adobe.com/xap/1.0/"> <xmp:CreatorTool>Adobe Flash Professional <xmp:CreateDate>2013-11-05T14:00:16+01:00</xmp:CreateDate> <xmp:M <xmp:ModifyDate>2013-11-06T09:17:43+01:00</xmp:ModifyDate> </rdf: xap/1.0/mm/" xmlns:stRef="http://ns.adobe.com/xap/1.0/sType/Resou xmpMM:InstanceID> <xmpMM:DocumentID>xmp.did:43993C31FF2068118083F <xmpMM:OriginalDocumentID>xmp.did:B2319BF64B2068118083F2A7E5573F7 <stRef:instanceID>xmp.iid:0F9F87A6F32068118083F2A7E5573F79</stRef stRef:documentID> <stRef:originalDocumentID>xmp.did:B2319BF64B206 rdf:Description> <rdf:Description rdf:about="" xmlns:dc="http://p dc:format> </rdf:Description> </rdf:RDF> ' }, { name: 'SetBackgroundColor', color: 'ffffff' }, { name: 'DoAction', actionRecords: [ { name: 'ActionRecord', len: 229, actionCode: 136, options: { count: 28, constantPool: [ 'handle', '_x', '_xmouse', 'ball',
  33. 33. Server side SWF Parser . !"" pong-simple #"" assets $   !"" img(2l-5)_1.png !"" src #"" as2js $   !"" rootMovie.js !"" js #"" abc.js #"" dict $   #"" bitmap.js $   #"" button.js $   #"" font.js $   #"" html.js $   #"" morph.js $   #"" shape.js $   #"" sprite.js $   !"" text.js #"" movie-amd.js !"" resources.js Donnerstag, 21. November 13 Code Generator { header: { inflate: true, lzma: false, version: 11, len: 6967, rect: { name: 'Rect', x1: 0, y1: 0, x2: 550, y2: 400 }, frameRate: 24, frameCount: 1 }, tags: [ { name: 'FileAttributes', reserved: 0, useDirectBlit: 0, useGPU: 0, hasMetadata: 1, actionScript3: 0, reserved2: 0, useNetwork: 0, reserved3: 0 }, { name: 'MetaData', metaData: '<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <rdf:Description rdf:about="" xmlns:xmp="http:// ns.adobe.com/xap/1.0/"> <xmp:CreatorTool>Adobe Flash Professional CS5.5 - build 349</xmp:CreatorTool> <xmp:CreateDate>2013-11-05T14:00:16+01:00</xmp:CreateDate> <xmp:MetadataDate>2013-11-06T09:17:43+01:00</xmp:MetadataDate> <xmp:ModifyDate>2013-11-06T09:17:43+01:00</xmp:ModifyDate> </rdf:Description> <rdf:Description rdf:about="" xmlns:xmpMM="http://ns.adobe.com/ xap/1.0/mm/" xmlns:stRef="http://ns.adobe.com/xap/1.0/sType/ResourceRef#"> <xmpMM:InstanceID>xmp.iid:43993C31FF2068118083F2A7E5573F79</ xmpMM:InstanceID> <xmpMM:DocumentID>xmp.did:43993C31FF2068118083F2A7E5573F79</xmpMM:DocumentID> <xmpMM:OriginalDocumentID>xmp.did:B2319BF64B2068118083F2A7E5573F79</xmpMM:OriginalDocumentID> <xmpMM:DerivedFrom rdf:parseType="Resource"> <stRef:instanceID>xmp.iid:0F9F87A6F32068118083F2A7E5573F79</stRef:instanceID> <stRef:documentID>xmp.did:CA93569BEA2068118083F2A7E5573F79</ stRef:documentID> <stRef:originalDocumentID>xmp.did:B2319BF64B2068118083F2A7E5573F79</stRef:originalDocumentID> </xmpMM:DerivedFrom> </ rdf:Description> <rdf:Description rdf:about="" xmlns:dc="http://purl.org/dc/elements/1.1/"> <dc:format>application/x-shockwave-flash</ dc:format> </rdf:Description> </rdf:RDF> ' }, { name: 'SetBackgroundColor', color: 'ffffff' }, { name: 'DoAction', actionRecords: [ { name: 'ActionRecord', len: 229, actionCode: 136, options: { count: 28, constantPool: [ 'handle', '_x', '_xmouse', 'ball', 'hitTest', 'bounceBall', 'numPoints', 'ballSpeed', 'gameTime', 'Date', 'startTime', 'gameEnd', '_width', 'direction', 'y', 'x', '_y', 'Stage', 'height', 'width', 'runInterval', 'clearInterval', 'moveBallInterval', 'interval', 'maxBallSpeed', 'run', 'setInterval', 'moveBall' ] }, actionName: 'ActionConstantPool' }, JSON
  34. 34. Code Generator SWF Parser JSON { name: 'DefineShape', id: 2, bounds: { name: 'Rect', x1: 0, y1: 0, x2: 219, y2: 109 }, shape: { name: 'ShapeWithStyle', fillStyles: [ { name: 'FillStyle', type: 67, desc: 'non-smoothed clipped bitmap', color: 0, gradientMatrix: 0, gradient: 0, bitmapId: 1, bitmapMatrix: { name: 'Matrix', hasScale: true, hasRotate: false, hasTranslate: false, sx: 1, sy: 1 } } ], lineStyles: [], shapeRecords: [ { name: 'moveTo', move: true, mx: 219, my: 109, fillStyle1: { name: 'FillStyle', type: 67, desc: 'non-smoothed clipped bitmap', color: 0, gradientMatrix: 0, Donnerstag, 21. November 13 Bonsai Code
  35. 35. ActionScript2 => JavaScript Assets Scripting SWF data Donnerstag, 21. November 13 . !"" pong-simple #"" assets $   !"" img(2l-5)_1.png !"" src #"" as2js $   !"" rootMovie.js #"" #"" $   $   $   $   $   $   $   $   #"" abc.js dict #"" bitmap.js #"" button.js #"" font.js #"" html.js #"" morph.js #"" shape.js #"" sprite.js !"" text.js movie-amd.js
  36. 36. Source => ByteCode => Source AS2 (Flash IDE) function run() { handle._x = _root._xmouse; if (ball.hitTest(handle)) { bounceBall(ball, handle); ++numPoints; if (numPoints % 5 == 0) { ++ballSpeed; } } var t = gameTime - (new Date() - startTime) / 1000; if (t <= 0) { gameEnd(); } } Donnerstag, 21. November 13
  37. 37. Source => ByteCode => Source AS2 (Flash IDE) Compiled ByteCode ( 11 bytes) action: unknown[8e] (remainder of 11 bytes:"run0003j0?0") ( 2 bytes) action: Push Lookup:0 ("handle") ( 0 bytes) action: GetVariable function run() { 6 bytes) action: Push Lookup:1 ("_x") register:1 Lookup:2 ("_xmouse") ( handle._x = _root._xmouse; GetMember ( 0 bytes) action: ( 0 bytes) action: if (ball.hitTest(handle)) { SetMember ( 2 bytes) handle); bounceBall(ball, action: Push Lookup:0 ("handle") ( 0 bytes) action: GetVariable ++numPoints; ( 7 bytes) action: Push int:1 Lookup:3 ("ball") if (numPoints % 5 == 0) GetVariable ( 0 bytes) action: { ++ballSpeed; action: Push Lookup:4 ("hitTest") ( 2 bytes) ( 0 bytes) action: CallMethod } ( 0 bytes) action: Not } ( 2 bytes) action: If 78 var t = gameTime - (new Date() - startTime) / 1000; ( 2 bytes) action: Push Lookup:0 ("handle") if (t <= ( 0) 0 bytes) action: GetVariable { ( 2 gameEnd(); bytes) action: Push Lookup:3 ("ball") ( 0 bytes) action: GetVariable } ( 7 bytes) action: Push int:2 Lookup:5 ("bounceBall") } ( 0 bytes) action: CallFunction ( 0 bytes) action: Pop ( 4 bytes) action: Push Lookup:6 ("numPoints") Lookup:6 ("numPoints") ( 0 bytes) action: GetVariable ( 0 bytes) action: Increment ( 0 bytes) action: SetVariable ( 2 bytes) action: Push Lookup:6 ("numPoints") ( 0 bytes) action: GetVariable ( 5 bytes) action: Push int:5 ( 0 bytes) action: Modulo ( 9 bytes) action: Push double:0.000000 ( 0 bytes) action: Equals2 ( 0 bytes) action: Not ( 2 bytes) action: If 10 ( 4 bytes) action: Push Lookup:7 ("ballSpeed") Lookup:7 ("ballSpeed") ( 0 bytes) action: GetVariable ( 0 bytes) action: Increment ( 0 bytes) action: SetVariable ( 2 bytes) action: Push Lookup:8 ("gameTime") ( 0 bytes) action: GetVariable ( 13 11 bytes) action: Push double:0.000000 Lookup:9 ("Date") Donnerstag, 21. November
  38. 38. Source => ByteCode => Source AS2 (Flash IDE) Compiled ByteCode ( 11 bytes) action: unknown[8e] (remainder of 11 bytes:"run0003j0?0") ( 2 bytes) action: Push Lookup:0 ("handle") ( 0 bytes) action: GetVariable function run() { 6 bytes) action: Push Lookup:1 ("_x") register:1 Lookup:2 ("_xmouse") ( handle._x = _root._xmouse; GetMember ( 0 bytes) action: ( 0 bytes) action: if (ball.hitTest(handle)) { SetMember ( 2 bytes) handle); bounceBall(ball, action: Push Lookup:0 ("handle") ( 0 bytes) action: GetVariable ++numPoints; ( 7 bytes) action: Push int:1 Lookup:3 ("ball") if (numPoints % 5 == 0) GetVariable ( 0 bytes) action: { ++ballSpeed; action: Push Lookup:4 ("hitTest") ( 2 bytes) ( 0 bytes) action: CallMethod } ( 0 bytes) action: Not } ( 2 bytes) action: If 78 var t = gameTime - (new Date() - startTime) / 1000; ( 2 bytes) action: Push Lookup:0 ("handle") if (t <= ( 0) 0 bytes) action: GetVariable { ( 2 gameEnd(); bytes) action: Push Lookup:3 ("ball") ( 0 bytes) action: GetVariable } ( 7 bytes) action: Push int:2 Lookup:5 ("bounceBall") } ( 0 bytes) action: CallFunction ( 0 bytes) action: Pop ( 4 bytes) action: Push Lookup:6 ("numPoints") Lookup:6 ("numPoints") ( 0 bytes) action: GetVariable ( 0 bytes) action: Increment ( 0 bytes) action: SetVariable ( 2 bytes) action: Push Lookup:6 ("numPoints") ( 0 bytes) action: GetVariable ( 5 bytes) action: Push int:5 ( 0 bytes) action: Modulo ( 9 bytes) action: Push double:0.000000 ( 0 bytes) action: Equals2 ( 0 bytes) action: Not ( 2 bytes) action: If 10 ( 4 bytes) action: Push Lookup:7 ("ballSpeed") Lookup:7 ("ballSpeed") ( 0 bytes) action: GetVariable ( 0 bytes) action: Increment ( 0 bytes) action: SetVariable ( 2 bytes) action: Push Lookup:8 ("gameTime") ( 0 bytes) action: GetVariable ( 13 11 bytes) action: Push double:0.000000 Lookup:9 ("Date") Donnerstag, 21. November JavaScript
  39. 39. • from ByteCode 1) to ActionScript2 like JavaScript 2) to real JavaScript • „fix“ scoping • „fix“ case-insensitivity • „fix“ class construction • etc. Donnerstag, 21. November 13
  40. 40. ActionScript2 ByteCode => JavaScript Esprima Donnerstag, 21. November 13
  41. 41. ActionScript2 ByteCode => JavaScript Esprima Donnerstag, 21. November 13
  42. 42. What we translate AS2 Converted to JavaScript Donnerstag, 21. November 13
  43. 43. •estraverse => for traversing the tree •escodegen => generating the code Donnerstag, 21. November 13
  44. 44. ActionScript API Donnerstag, 21. November 13
  45. 45. Accessibility arguments Array AsBroadcaster BevelFilter (flash.filters.BevelFilter) BitmapData (flash.display.BitmapData) BitmapFilter (flash.filters.BitmapFilter) BlurFilter (flash.filters.BlurFilter) Boolean Button Camera capabilities (System.capabilities) Color ColorMatrixFilter (flash.filters.ColorMatrixFilter) ColorTransform (flash.geom.ColorTransform) ContextMenu ContextMenuItem ConvolutionFilter (flash.filters.ConvolutionFilter) CustomActions Date DisplacementMapFilter (flash.filters.DisplacementMapFilter) DropShadowFilter (flash.filters.DropShadowFilter) Error ExternalInterface (flash.external.ExternalInterface) FileReference (flash.net.FileReference) FileReferenceList (flash.net.FileReferenceList) Function GlowFilter (flash.filters.GlowFilter) GradientBevelFilter (flash.filters.GradientBevelFilter) GradientGlowFilter (flash.filters.GradientGlowFilter) IME (System.IME) Donnerstag, 21. November 13 Key LoadVars LocalConnection Locale (mx.lang.Locale) Math Matrix (flash.geom.Matrix) Microphone Mouse MovieClip MovieClipLoader NetConnection NetStream Number Object Point (flash.geom.Point) PrintJob Rectangle (flash.geom.Rectangle) security (System.security) Selection SharedObject Sound Stage String StyleSheet (TextField.StyleSheet) System TextField TextFormat TextRenderer (flash.text.TextRenderer) TextSnapshot Transform (flash.geom.Transform) Video XML XMLNode XMLSocket XMLUI ActionScript2
  46. 46. flash.accessibility flash.concurrent flash.crypto flash.data flash.desktop flash.display flash.display3D flash.display3D.textures flash.errors flash.events flash.external flash.filesystem flash.filters flash.geom flash.globalization flash.html flash.media flash.net flash.net.dns flash.net.drm flash.notifications flash.printing flash.profiler flash.sampler flash.security flash.sensors flash.system flash.text flash.text.engine flash.text.ime flash.ui flash.utils flash.xml Donnerstag, 21. November 13 flash.display ActionScriptVersion AVM1Movie Bitmap BitmapData BitmapDataChannel BitmapEncodingColorSpace BlendMode CapsStyle ColorCorrection ColorCorrectionSupport DisplayObject DisplayObjectContainer FocusDirection     FrameLabel GradientType Graphics GraphicsBitmapFill GraphicsEndFill GraphicsGradientFill GraphicsPath GraphicsPathCommand GraphicsPathWinding GraphicsShaderFill GraphicsSolidFill GraphicsStroke GraphicsTrianglePath InteractiveObject InterpolationMethod JointStyle JPEGEncoderOptions JPEGXREncoderOptions LineScaleMode Loader LoaderInfo MorphShape MovieClip NativeMenu     NativeMenuItem     NativeWindow     NativeWindowDisplayState     NativeWindowInitOptions     NativeWindowRenderMode     NativeWindowResize     NativeWindowSystemChrome     NativeWindowType     PixelSnapping PNGEncoderOptions Scene Screen     Shader ShaderData ShaderInput ShaderJob ShaderParameter ShaderParameterType ShaderPrecision Shape SimpleButton SpreadMethod Sprite Stage Stage3D StageAlign StageAspectRatio     StageDisplayState StageOrientation     StageQuality StageScaleMode SWFVersion TriangleCulling ActionScript3
  47. 47. Editor with Live Preview Donnerstag, 21. November 13
  48. 48. Thank you @wolframkriesing Wolfram Kriesing uxebu / pixelplant Donnerstag, 21. November 13

×