A study on Migrating Flash files to HTML5/JavaScript by YOGESH Maheshwari, Y.Raghu Babu Reddy in Innovations in Software Engineering Conference, ISEC Report No: IIIT/TR/2017/-1 Centre for Software Engineering Research Lab International Institute of Information Technology Hyderabad - 500 032, INDIA February 2017 A study on Migrating Flash files to HTML5/JavaScript Yogesh Maheshwari Y. Raghu Reddy Software Engineering Research Center Software Engineering Research Center IIIT Hyderabad, India IIIT Hyderabad, India [email protected] [email protected] ABSTRACT Mozilla Shumway1, Smokescreen2 and Gordon3 were devel- Over the past few years, there is a significant shift from oped. However none of them could significantly support Ac- web to mobile devices. In addition, the success of HTML5 tionScript (an object oriented programming language specif- ically designed for animations) to make this effort viable. has negatively impacted the usage and support for Adobe 4 Flash. This has resulted in unmaintained Flash assets and Then came Google Swiffy , a Flash to HTML5 converter. code bases. In this paper, we discuss the feasibility of a Swiffy converted the Flash bytecode to JSON format, which semi-automated technique to transform Flash based anima- was then executed via a JavaScript runtime [5]. It was not tions to HTML5 and JavaScript against re-writing the same possible to modify the JSON content. However this con- animations from scratch. Writing animations from scratch verter was only targeted for banner advertisements and has in JavaScript is a time taking effort due to adherence to now been shut down. Adobe itself has abandoned Flash and aesthetic details of the animation, domain knowledge and has started promoting HTML5 based tools. This leaves us enumeration of all states. Our approach addresses these with a large number of Flash applications and assets which challenges by providing techniques to transform the Small will become completely obsolete in the years to come. Web Format (SWF) files to JavaScript. We validate our The migration of all Flash based applications that are still approach by conducting an experimental study to measure economically viable to HTML5 is a big challenge. Since the efforts for a set of animations with respect to transfor- SWF files require Flash plugin to run, one cannot write mation from scratch, and transformation using our proposed wrappers around it to make it run. The only alternative for approach. The results showed that our approach has the po- a developer is to rewrite the entire application from scratch tential to significantly bridge the process of Flash to HTML5 in HTML5/JavaScript. If FLA files (Flash source files) for migration. given SWF Files are not present, this becomes a time taking effort, because: Keywords • Recreation of Flash assets like images, vector graph- ics and animations while adhering to all the aesthetic Flash, SWF, Program Transformation, Decompilation, details is a resource intensive effort. Transpilation, ActionScript, JavaScript, HTML • Developers may often lack the domain knowledge re- quired for the particular animation. Therefore they will have to perform the additional step of enumerat- 1. INTRODUCTION ing all the animation states, before rewriting the entire For years, Adobe Flash had been competing with Open logic in JavaScript which in itself is a huge task. Web and winning. The free (but not open source) Flash plu- • Many HTML5 standards are still not completely im- gin was a de facto standard installation on nearly a billion plemented everywhere. Therefore one has to ensure desktop browsers. However the popularity of this platform browser compatibility. for creating banner advertisments, rich internet application and browser games is on the decline. The primary reason Migrating the Flash files to Javascript requires a tool or for this decline is the lack of Flash support on devices run- set of tools to ease the process. In our previous work [4], we ning Google Android, iOS, etc. Over the past few years, proposed a transformation process for converting Flash pro- some tools have been developed to address the absence of grams to HTML5/JavaScript. In this paper, we study the Flash player plugins. Flash players written in JavaScript like migration from flash programs to HTML5/JavaScript us- ing our transformation approach [4] and compare it against rewriting from scratch in terms of effort for migration and Permission to make digital or hard copies of all or part of this work for personal or further maintenance. By performing the study, we answer classroom use is granted without fee provided that copies are not made or distributed the following questions: (1) What kind of animations are for profit or commercial advantage and that copies bear this notice and the full cita- tion on the first page. Copyrights for components of this work owned by others than better migrated using our approach than rewriting from ACM must be honored. Abstracting with credit is permitted. To copy otherwise, or re- scratch and vice versa?, and (2) How much effort is needed publish, to post on servers or to redistribute to lists, requires prior specific permission 1 and/or a fee. Request permissions from [email protected]. https://github.com/mozilla/shumway 2 ISEC ’17, February 05-07, 2017, Jaipur, India https://github.com/cesmoak/smokescreen 3 c 2017 ACM. ISBN 978-1-4503-4856-0/17/02. $15.00 https://github.com/tobeytailor/gordon 4 DOI: http://dx.doi.org/10.1145/3021460.3021472 https://developers.google.com/swiffy FalconJx7 and FlexJs8. After studying all the three tools, Table 1: Reverse Engineering tools for Flash we chose Jangaroo for our transformation process as it sup- Extent of Support for Extent of Tool Availability ports more AS3 libraries. Asset Export Decompilation 2.3 Our Transformation Process JPEXS Supports multiple export Provides AS3 Open Source We propose a three step transformation process for mi- Decompiler formats for every component code grating the .swf files to Javascript/HTML5. Firstly, the in- SoThink Supports multiple export Provides AS3 Proprietary put SWF file is decompiled to extract assets and AS3 code. Decompiler formats for every component code In the next step we construct an AS3 project from the de- Class Level Zoe Free Only Frames can be exported compiled content. The last step involves transpiling this Structure project into JavaScript [4]. The entire process is summa- JSwiff Only Tag Level rized in figure 1. Open Source NO Support Investigator Information 2.3.1 Decompilation Here the SWF file is taken as input by the decompiler to output the following content: 1) Sprites, Images, Buttons in maintaining and enhancing the transformed animations in PNG format. 2) Transformation matrices for each named as compared to animations rewritten from scratch? asset.A Named asset is an asset created in Flash Profes- The rest of the paper is structured as follows: Section 2 sional tool which is referenced in AS3 code. 3) DisplayList provides an overview of the SWF file structure and our mi- of each named asset in terms of smaller asset. DisplayList gration process published preiviously [4]. Section 3 details contains display objects and precedence of how they are dis- the comparative study vis-a-vis effort needed for migration played in animations. 4) AS3 (ActionScript3) code after of animations by our process versus rewriting from scratch. decompilation. 5) Each frame of MovieClip is exported as a Section compares effort needed in maintenance for both the PNG image and then converted into a spriteSheet. approaches. Finally, Section 5 discusses the threats to va- 2.3.2 Project Construction lidity and scope of future work. This stage consists of 4 main steps. 1) Creation of wrapper AS3 class for each named asset. A script creates the class 2. BACKGROUND body by declaring each item in the DisplayList and we then manually embed the corresponding assets in this class using 2.1 Flash Files and its structure the Embed meta Tag defined in AS3. Each class is then Flash files are distributed in .swf format (binary format). invoked in the Main class of the project. 2) A new function Adobe Flash Professional is the commonly used proprietary called setStage is added in the Main Class where these as- tool to generate SWF files. The .fla format is used for sav- sets are added on the displayList, with the Transformation ing the source flash files by Adobe Flash Professional. The Matrices defining their locations. 3) Lastly all the functions structure of SWF file is described in the SWF file Format which are not implemented in transpilers Flash API are re- Specification [2]. moved, or replaced as appropriate. 4) Implementing AS3 A SWF file consists of header, followed by a number of wrappers of any required JS library. tags. The header contains information on the content of 2.3.3 Transpilation the file, like number of frames, frame rate, whether tags are compressed or not, etc. The Tags are of two types: defi- Here the final AS3 project obtained from the construc- nition and control tags. Definition tags define the objects tion phase is transpiled to JavaScript. This is the final step in SWF file like shapes, text, sounds, etc. Control tags ren- in transformation process after which we have a JavaScript der and manipulate instances inside the character dictionary code for the input SWF file which is callable via HTML5. and control the flow of the file. For any future evolution of the program changes can be made ActionScript is the scripting language for Flash. Action- either in AS3 project which can be transpiled to JS, or ex- Script3 is a dialect of ECMAScript. ECMAScript is specified ternal JS wrapper can be written around this conversion. in ECMA-262 [1], a standard derived from an early version We however feel that it is more convenient to make changes of JavaScript.