Pixelplant - WebDev Meetup Salzburg

Upload to the Future
From Flash to HTML5

Wolfram Kriesing
@wolframkriesing
pixelplant / uxebu

Donnerstag, 21. November 13

uxebu / pixelplant
Technology

since 2008

100%

Agenda
• Bonsai inside
• SWF (Flash) file anatomy
• ActionScript2+3
• ByteCode - VM or ?
• ActionScript2 => JavaScript
• ActionScript API
• Editor with Live Preview


Bonsai - Inside


bonsaijs.org

... Bonsai Demos ...


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


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

Heavy Lifting
Decoupled from UI
Thread
WebWorker
Runs in nodejs

Bonsai Script

Client Setup
Bonsai Script
IFrame

UI Thread
Renderer


Client Setup
Bonsai Script
IFrame

UI Thread
Renderer

Bonsai Script
WebWorker

UI Thread
Renderer


Client/Server Setup

iPhone
Renderer
Bonsai Script
node.js

Desktop
Renderer

iPad
Renderer

...

Renderers

•
•
•
•
•

SVG
Canvas
HTML+CSS
WebGL
Mixed

Renderer

Runner

SWF File Anatomy


Tools help!


> 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]


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


[00c]

ActionScript2


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
(
(
(
7 bytes) action: Push int:1 Lookup:3 ("ball")
(
(
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:3 ("ball")
(
(
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: Increment
(
0 bytes) action: SetVariable
(
2 bytes) action: Push Lookup:6 ("numPoints")
(
(
5 bytes) action: Push int:5
(
0 bytes) action: Modulo
(
9 bytes) action: Push double:0.000000
(
0 bytes) action: Equals2
(
(
(
4 bytes) action: Push Lookup:7 ("ballSpeed") Lookup:7 ("ball
(
(
(
(
2 bytes) action: Push Lookup:8 ("gameTime")
(
(
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
(
//Frame 0
(
// Action tag #0
(
6 bytes) action: Push Lookup:1 ("_x") register:1 Lookup:2 ("
(
0 bytes) action: GetMember
function run()
(
0 bytes) action: SetMember
{
(
handle._x = _root._xmouse;
(
if (ball.hitTest(handle))
(
{
(
bounceBall(ball, handle);
(
2 bytes) action: Push Lookup:4 ("hitTest")
++numPoints;
(
if (numPoints % 5 == 0)
(
{
(
++ballSpeed;
(
}
(
}
(
var __reg2 = gameTime - (new Date() - startTime) / 1000; 2 bytes) action: Push Lookup:3 ("ball")
(
if (__reg2 <= 0)
(
{
(
gameEnd();
(
}
(
4 bytes) action: Push Lookup:6 ("numPoints") Lookup:6 ("numP
}
(
function bounceBall(ball, handle)
(
{
(
var __reg1 = handle._width / 2 + handle._x;
(
var __reg2 = ball._x;
(
direction.y = direction.y * -1;
(
if (__reg2 == __reg1)
(
{
(
direction.x = 0;
(
return;
(
}
(
(
4 bytes) action: Push Lookup:7 ("ballSpeed") Lookup:7 ("ball
(
(
(
(
(
(
11 bytes) action: Push double:0.000000 Lookup:9 ("Date")

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
function frame1():*
{
this.x1y1q5.filters = [new flash.filters.BlurFilter(1, 1, 5)];
00014) + 2:1 pushbyte 3
00015) + 3:1 dup
00016) + 4:1 pushbyte 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;
}
00020) + 0:1 getlocal_0
public var x9y9q5:flash.display.MovieClip;
00023) + 2:1 pushbyte 6
00024) + 3:1 dup
00025) + 4:1 pushbyte 5
00029) + 0:1 getlocal_0
}
}
00032) + 2:1 pushbyte 9
00033) + 3:1 dup
00034) + 4:1 pushbyte 5
00038) + 0:1 getlocal_0

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, ...


ByteCode - VM or JavaScript


ActionScript2 => JavaScript


... first a bit of architecture


Architecture Overview
Server

Browser

AS2/3 Shim
Runtime

Images, Fonts,
Audio, etc.
JavaScript

CDN

assets,
index.html,
movie-min.js

Lokal

Server side
SWF Parser


{ 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


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,

Bonsai Code

ActionScript2 => JavaScript

Assets
Scripting
SWF data


.
!"" 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();
}
}


AS2 (Flash IDE)

Compiled ByteCode

(
11 bytes) action: unknown[8e] (remainder of 11 bytes:"run0003j0?0")
(
(
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")
(
++numPoints;
(
if (numPoints % 5 == 0) GetVariable
(
0 bytes) action: {
++ballSpeed; action: Push Lookup:4 ("hitTest")
(
2 bytes)
(
}
(
}
(
(
if (t <= (
0) 0 bytes) action: GetVariable
{
(
2
gameEnd(); bytes) action: Push Lookup:3 ("ball")
(
}
(
}
(
(
(
4 bytes) action: Push Lookup:6 ("numPoints") Lookup:6 ("numPoints")
(
(
(
(
(
(
(
(
(
(
(
(
4 bytes) action: Push Lookup:7 ("ballSpeed") Lookup:7 ("ballSpeed")
(
(
(
(
(
( 13 11 bytes) action: Push double:0.000000 Lookup:9 ("Date")
Donnerstag, 21. November

AS2 (Flash IDE)

Compiled ByteCode

(
11 bytes) action: unknown[8e] (remainder of 11 bytes:"run0003j0?0")
(
(
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")
(
++numPoints;
(
if (numPoints % 5 == 0) GetVariable
(
0 bytes) action: {
++ballSpeed; action: Push Lookup:4 ("hitTest")
(
2 bytes)
(
}
(
}
(
(
if (t <= (
0) 0 bytes) action: GetVariable
{
(
2
gameEnd(); bytes) action: Push Lookup:3 ("ball")
(
}
(
}
(
(
(
4 bytes) action: Push Lookup:6 ("numPoints") Lookup:6 ("numPoints")
(
(
(
(
(
(
(
(
(
(
(
(
4 bytes) action: Push Lookup:7 ("ballSpeed") Lookup:7 ("ballSpeed")
(
(
(
(
(
( 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.


ActionScript2 ByteCode => JavaScript

Esprima


What we translate
AS2

Converted to JavaScript

•estraverse => for traversing the tree
•escodegen => generating the code


ActionScript API


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)


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

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


Thank you

@wolframkriesing
Wolfram Kriesing
uxebu / pixelplant


Pixelplant - WebDev Meetup Salzburg

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (9)

Similaire à Pixelplant - WebDev Meetup Salzburg

Similaire à Pixelplant - WebDev Meetup Salzburg (20)

Plus de wolframkriesing

Plus de wolframkriesing (20)

Dernier

Dernier (20)

Pixelplant - WebDev Meetup Salzburg