Upload to the Future
From Flash to HTML5

Wolfram Kriesing
@wolframkriesing
pixelplant / uxebu

Donnerstag, 21. November 1...
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
• A...
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

h...
Single Threaded, almost

•
•
•
•
Renderer
Donnerstag, 21. November 13

Heavy Lifting
Decoupled from UI
Thread
WebWorker
Ru...
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. Novemb...
Client/Server Setup

iPhone
Renderer
Bonsai Script
node.js

Desktop
Renderer

iPad
Renderer

...
Donnerstag, 21. November ...
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
...
ActionScript2+3

Donnerstag, 21. November 13
[00c]

ActionScript2

Donnerstag, 21. November 13

1284 DOACTION
( 229 bytes) action: Constantpool(28 entries) String:"han...
[00c]

1284 DOACTION
( 229 bytes) action: Constantpool(28 entries) String:"handle" St
String:"ball" String:"hitTest" Strin...
slot 0: var <q>[public]::x6y6q5:<q>[public]flash.display::Movie
slot 0: var <q>[public]::x3y3q5:<q>[public]flash.display::...
ActionScript2

ActionScript3

• ~60 classes

• ~450 classes

• simplest namespacing

• packages, classes, interfaces

• ca...
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.
JavaScri...
Server side
SWF Parser

Donnerstag, 21. November 13

{ header:
{ inflate: true,
lzma: false,
version: 11,
len: 6967,
rect:...
Server side
SWF Parser
.
!"" pong-simple
#"" assets
$   !"" img(2l-5)_1.png
!"" src
#"" as2js
$   !"" rootMovie.js
!"" js
...
Code Generator
SWF Parser JSON
{ name: 'DefineShape',
id: 2,
bounds: { name: 'Rect', x1: 0, y1: 0, x2: 219, y2: 109 },
sha...
ActionScript2 => JavaScript

Assets
Scripting
SWF data

Donnerstag, 21. November 13

.
!"" pong-simple
#"" assets
$   !"" ...
Source => ByteCode => Source
AS2 (Flash IDE)
function run() {
handle._x = _root._xmouse;
if (ball.hitTest(handle)) {
bounc...
Source => ByteCode => Source
AS2 (Flash IDE)

Compiled ByteCode

(
11 bytes) action: unknown[8e] (remainder of 11 bytes:"r...
Source => ByteCode => Source
AS2 (Flash IDE)

Compiled ByteCode

(
11 bytes) action: unknown[8e] (remainder of 11 bytes:"r...
• from ByteCode
1) to ActionScript2 like JavaScript
2) to real JavaScript

• „fix“ scoping

• „fix“ case-insensitivity

• ...
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)
...
flash.accessibility
flash.concurrent
flash.crypto
flash.data
flash.desktop
flash.display
flash.display3D
flash.display3D.t...
Editor with Live Preview

Donnerstag, 21. November 13
Thank you

@wolframkriesing
Wolfram Kriesing
uxebu / pixelplant

Donnerstag, 21. November 13
Upcoming SlideShare
Loading in …5
×

Pixelplant - WebDev Meetup Salzburg

315
-1

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
315
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×