SlideShare a Scribd company logo
1 of 34
Download to read offline
Flash is dead,
        long live Flash!
                         OR

                 Indroducing Gordon:
An open source Flash runtime written in pure JavaScript
Flash
 +Well structured and extendable file format (SWF)
+Great authoring tools (Flash IDE, OpenOffice, libMing)

       -Runtime sucks on non-windows-systems
             -Runtime would suck on iP‘s
               -Accesibility & Semantics
FLASH
RUNTIME
MUST DIE!
FLASH
RUNTIME
MUST DIE!
000000   465753034F000000   7800055F00000FA0
            000010   00000C01004302FF   FFFFBF0023000000
            000020   010070FB49970D0C   7D50000114000000
            000030   000125C9920D21ED   488765303B6DE1D8
            000040   B400008606060100   01000040000000




<?xml version="1.0"?>
<swf version="6" compressed="1">
  <Header framerate="16384" frames="1">
    <size>
      <Rectangle left="0" right="11900" top="0" bottom="16840"/>
    </size>
    <tags>
      <SetBackgroundColor>
        <color>
          <Color red="255" green="255" blue="255"/>
        </color>
      </SetBackgroundColor>
      <ShowFrame/>
      <End/>
    </tags>
  </Header>
</swf>
Skip Intro & Open the Website
Gordon

  Flash & Friends sitting in the DOM
 100% JavaScript (no Flash fallbacks :))
 ~3100 lines of code (~15kB Gzipped)
Customizable (SVG renderer by default)
Browser Support
SWF 1: Complete

SWF 2: Partial(no embedded sound)

           SWF 3: 70%
var movie = new   Gordon.Movie("your.swf", {
    id:           "stage",
    width:        500,
    height:       400,
    autoplay:     false
});

...

movie.goTo(10).play();

...

movie.rewind().next();

...

movie.prev().stop();
var xhr = new XMLHttpRequest();
xhr.open("GET", url, false);
xhr.overrideMimeType("text/plain;charset=x-user-defined");

...

xhr.responseText.charCodeAt(23) & 0xff;
<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />
"HTML5"


WebWorkers

   SVG

  Canvas
Compression
inflate.js by Masanao Izumo
32kb compressed data ~150ms (V8)
Gordon‘s Zlib implentation
32kb compressed data ~15ms (V8)
Shapes
(DefineShape[2,3,4])
Images
(DefineBits, JPEGTables, DefineBitsJPEG2|3|4, DefineBitsLossless[2], )
Embedded JPG, PNG, GIF

Seperated JPG-Tables and Pixel-Data

         Alpha JPG & BMP
Fonts & Text
(DefineFont[2,3,3], DefineFontInfo[2], DefineFontName, DefineText[2], DefineEditText)
Embeded SVG Fonts in WebKit (Opera?)

    Inline Glyph-Shapes in Firefox

     Web Font(ODT) Data-URL
Buttons
(DefineButton[2], DefineButtonCxform)
UP, DOWN, OVER, HIT
Morphing
 (DefineMorphShape[2])
Not implemented yet
   SWF just defines Start- & End-Shape
Transition & Transformation done by the RT
       Great solution in RaphaëlJS
Sprites (MovieClips)
       (DefineSprite)
Sound
(DefineSound, DefineButtonSound, SoundStreamHead[2], SoundStreamBlock)
Video
(DefineVideoStream, VideoFrame)
SWF3 Action Model
(play(), stop(), nextFrame(), prevFrame(), goToFrame(), waitForFrame(), getURL())
SWF4 Action Model
       (doAction)
1+x*3



 ActionPush "x"
ActionGetVariable
 ActionPush "3"
 ActionMultiply
 ActionPush "1"
   ActionAdd
SWF9 Action Model
       (doABC)
CustomWebGLRenderer = function(options){

      ...

};
CustomWebGLRenderer.prototype = {
    define: function(obj){ ... },

      place: function(character){ ... },

      remove: function(depth){ ... }
};

var movie = new Gordon.Movie("your.swf", {

      ...

      renderer:   CustomWebGLRenderer
});
Thanks.
schneider@jancona.com | @tobeytailor

More Related Content

Similar to Flash Is Dead, Long Live Flash!

남동현 - 어도비 플래시로 게임만들기 (2014Y08M30D)
남동현 - 어도비 플래시로 게임만들기 (2014Y08M30D)남동현 - 어도비 플래시로 게임만들기 (2014Y08M30D)
남동현 - 어도비 플래시로 게임만들기 (2014Y08M30D)Ubuntu Korea Community
 
Creating Flash Content for Multiple Screens
Creating Flash Content for Multiple ScreensCreating Flash Content for Multiple Screens
Creating Flash Content for Multiple Screenspaultrani
 
Standards.next: HTML - Are you mything the point?
Standards.next: HTML - Are you mything the point?Standards.next: HTML - Are you mything the point?
Standards.next: HTML - Are you mything the point?brucelawson
 
Hacking with Pictures - Hack.LU 2014
Hacking with Pictures - Hack.LU 2014Hacking with Pictures - Hack.LU 2014
Hacking with Pictures - Hack.LU 2014Saumil Shah
 
Mobile Web Development with HTML5
Mobile Web Development with HTML5Mobile Web Development with HTML5
Mobile Web Development with HTML5Roy Clarkson
 
Flash for Mobile Devices
Flash for Mobile DevicesFlash for Mobile Devices
Flash for Mobile Devicespaultrani
 
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?Remy Sharp
 
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet![edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!Christopher Schmitt
 
I thought you were my friend - Malicious Markup
I thought you were my friend - Malicious MarkupI thought you were my friend - Malicious Markup
I thought you were my friend - Malicious MarkupMario Heiderich
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Sadaaki HIRAI
 
"Вклад Adobe в Web". Дмитрий Барановский, Adobe
"Вклад Adobe в Web". Дмитрий Барановский, Adobe"Вклад Adobe в Web". Дмитрий Барановский, Adobe
"Вклад Adobe в Web". Дмитрий Барановский, AdobeYandex
 
The why and how of moving to PHP 5.5/5.6
The why and how of moving to PHP 5.5/5.6The why and how of moving to PHP 5.5/5.6
The why and how of moving to PHP 5.5/5.6Wim Godden
 
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at GoogleWeb Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at GoogleEstelle Weyl
 
HTML5 Multimedia Accessibility
HTML5 Multimedia AccessibilityHTML5 Multimedia Accessibility
HTML5 Multimedia Accessibilitybrucelawson
 

Similar to Flash Is Dead, Long Live Flash! (20)

남동현 - 어도비 플래시로 게임만들기 (2014Y08M30D)
남동현 - 어도비 플래시로 게임만들기 (2014Y08M30D)남동현 - 어도비 플래시로 게임만들기 (2014Y08M30D)
남동현 - 어도비 플래시로 게임만들기 (2014Y08M30D)
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
Creating Flash Content for Multiple Screens
Creating Flash Content for Multiple ScreensCreating Flash Content for Multiple Screens
Creating Flash Content for Multiple Screens
 
Standards.next: HTML - Are you mything the point?
Standards.next: HTML - Are you mything the point?Standards.next: HTML - Are you mything the point?
Standards.next: HTML - Are you mything the point?
 
Hacking with Pictures - Hack.LU 2014
Hacking with Pictures - Hack.LU 2014Hacking with Pictures - Hack.LU 2014
Hacking with Pictures - Hack.LU 2014
 
Jsf2 html5-jazoon
Jsf2 html5-jazoonJsf2 html5-jazoon
Jsf2 html5-jazoon
 
Mobile Web Development with HTML5
Mobile Web Development with HTML5Mobile Web Development with HTML5
Mobile Web Development with HTML5
 
Flash for Mobile Devices
Flash for Mobile DevicesFlash for Mobile Devices
Flash for Mobile Devices
 
Html5 - Novas Tags na Prática!
Html5 - Novas Tags na Prática!Html5 - Novas Tags na Prática!
Html5 - Novas Tags na Prática!
 
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
 
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet![edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
 
HTML5 Design
HTML5 DesignHTML5 Design
HTML5 Design
 
I thought you were my friend - Malicious Markup
I thought you were my friend - Malicious MarkupI thought you were my friend - Malicious Markup
I thought you were my friend - Malicious Markup
 
CreateJS
CreateJSCreateJS
CreateJS
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
"Вклад Adobe в Web". Дмитрий Барановский, Adobe
"Вклад Adobe в Web". Дмитрий Барановский, Adobe"Вклад Adobe в Web". Дмитрий Барановский, Adobe
"Вклад Adobe в Web". Дмитрий Барановский, Adobe
 
The why and how of moving to PHP 5.5/5.6
The why and how of moving to PHP 5.5/5.6The why and how of moving to PHP 5.5/5.6
The why and how of moving to PHP 5.5/5.6
 
Flash 101
Flash 101Flash 101
Flash 101
 
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at GoogleWeb Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
 
HTML5 Multimedia Accessibility
HTML5 Multimedia AccessibilityHTML5 Multimedia Accessibility
HTML5 Multimedia Accessibility
 

Recently uploaded

RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIUdaiappa Ramachandran
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfAnna Loughnan Colquhoun
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataSafe Software
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 

Recently uploaded (20)

RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AI
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdf
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 

Flash Is Dead, Long Live Flash!

Editor's Notes