• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Pixelplant - WebDev Meetup Salzburg
 

Pixelplant - WebDev Meetup Salzburg

on

  • 207 views

 

Statistics

Views

Total Views
207
Views on SlideShare
207
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Pixelplant - WebDev Meetup Salzburg Pixelplant - WebDev Meetup Salzburg Presentation Transcript

    • Upload to the Future From Flash to HTML5 Wolfram Kriesing @wolframkriesing pixelplant / uxebu Donnerstag, 21. November 13
    • Donnerstag, 21. November 13
    • uxebu / pixelplant Technology since 2008 Donnerstag, 21. November 13 100%
    • Agenda • Bonsai inside • SWF (Flash) file anatomy • ActionScript2+3 • ByteCode - VM or ? • ActionScript2 => JavaScript • ActionScript API • Editor with Live Preview Donnerstag, 21. November 13
    • Bonsai - Inside Donnerstag, 21. November 13
    • bonsaijs.org Donnerstag, 21. November 13
    • ... Bonsai Demos ... Donnerstag, 21. November 13
    • 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
    • Single Threaded, almost • • • • Renderer Donnerstag, 21. November 13 Heavy Lifting Decoupled from UI Thread WebWorker Runs in nodejs Bonsai Script
    • Client Setup Bonsai Script IFrame UI Thread Renderer Donnerstag, 21. November 13
    • Donnerstag, 21. November 13
    • Client Setup Bonsai Script IFrame UI Thread Renderer Bonsai Script WebWorker UI Thread Renderer Donnerstag, 21. November 13
    • Client/Server Setup iPhone Renderer Bonsai Script node.js Desktop Renderer iPad Renderer ... Donnerstag, 21. November 13
    • Renderers • • • • • SVG Canvas HTML+CSS WebGL Mixed Renderer Donnerstag, 21. November 13 Runner
    • SWF File Anatomy Donnerstag, 21. November 13
    • Donnerstag, 21. November 13
    • Donnerstag, 21. November 13
    • Tools help! Donnerstag, 21. November 13
    • Donnerstag, 21. November 13
    • > 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
    • ActionScript2+3 Donnerstag, 21. November 13
    • [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")
    • [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
    • 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
    • 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
    • ByteCode - VM or JavaScript Donnerstag, 21. November 13
    • Donnerstag, 21. November 13
    • Donnerstag, 21. November 13
    • ActionScript2 => JavaScript Donnerstag, 21. November 13
    • ... first a bit of architecture Donnerstag, 21. November 13
    • 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
    • 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',
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • • from ByteCode 1) to ActionScript2 like JavaScript 2) to real JavaScript • „fix“ scoping • „fix“ case-insensitivity • „fix“ class construction • etc. Donnerstag, 21. November 13
    • ActionScript2 ByteCode => JavaScript Esprima Donnerstag, 21. November 13
    • ActionScript2 ByteCode => JavaScript Esprima Donnerstag, 21. November 13
    • What we translate AS2 Converted to JavaScript Donnerstag, 21. November 13
    • •estraverse => for traversing the tree •escodegen => generating the code Donnerstag, 21. November 13
    • ActionScript API Donnerstag, 21. November 13
    • 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
    • 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
    • Editor with Live Preview Donnerstag, 21. November 13
    • Thank you @wolframkriesing Wolfram Kriesing uxebu / pixelplant Donnerstag, 21. November 13