Flash to HTML5 conversion Solutions - SPi Global


Published on

With the standardization of HTML5 due this year, it’s time for institutions –corporations, schools, laboratories, etc. – to rely on Flash to HTML5 conversions to deliver rich web content. How? By utilizing SPi Global’s Solutions.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Flash to HTML5 conversion Solutions - SPi Global

  1. 1. Flash to HTML5 Conversion http://www.spi-global.com/content-solutions/our-services/Flash-HTML5-Conversion We inSPire success.
  2. 2. Executive Summary SPi Global (Laserwords), is one of the oldest and most successful outsourcing partners for global media and publishing companies, with production facilities spread over lndia, United States, Philippines, and Vietnam SPi Global, has strong and deep-rooted relationships with 9 of the global top 12 professional/education publishing companies. It has a successful track record of delivering several millions of pages for each of them in typesetting and conversion services on a variety of platforms. It also delivers software and automation solutions around core production processes. We inSPire success. 2
  3. 3. Executive Summary Santillana is the leading textbook and general-interest publishing group in Spain and Latin America, and the most prestigious publisher of literary works in Spanish. With more than 125 million books sold each year, the company has been synonymous with quality, innovation and service to teaching staff since its inception in 1960. We inSPire success. 3
  4. 4. Project Overview With a view to building a strategic relationship with Santillana, SPi Global Laserwords offered their services for Digital assets conversion and allied activities. This document details the scope, challenges and the approach in accomplishing this. SPi Global’s client partnerships are based on collaboration, flexibility, and transparency. We work together with our clients in the development and deployment of solutions that best meet their needs. These are critical in achieving the project goals especially in a dynamic environment We inSPire success. 4
  5. 5. Scope The scope of the project was to convert the Flash files into HTML5 files using the Spanish language input FLA files along with directions and specifications provided for Richmond, Brazil We inSPire success. 5
  6. 6. Background Traditionally, interactive designers have leveraged Flash Professional to create assets that target Flash Player. As devices and platforms multiply, it's more challenging than ever to create expressive content that can reach the widest audience possible. HTML5 conversion enables to leverage the rich animation and drawing capabilities of Flash while transitioning to creating HTML5-based content. We inSPire success. 6
  7. 7. Background One of the key advantages is that since HTML5 is capable of rendering multimedia content without the necessity of installing a plugin or a player application, this technology aims at replacing other rich internet application platforms, such as Adobe Flash. HTML5 is capable of running on any computer as well as on mobile devices such as iPhones, Android devices, iPad, tablets and smartphones, some of which cannot run Flash. It also excels when it comes to excellent performance on some platforms such as Linux and Mac OS X. HTML5 is becoming increasingly popular with companies providing easy to use, interactive platforms to create presentations and websites that are beautifully designed with minimum work on the users’ end. We inSPire success. 7
  8. 8. Challenges Based on our prior experience with flash to HTML conversion projects, animations, art works, basic transitions and actions that control timelines like play/pause/stop etc. can be directly converted. However we have also noticed that complex animations and interactivities can’t be directly converted as the extracted files are not editable in HTML5. During conversion, symbols used for interactivities don’t get extracted in a separate folder and in few cases; the output is SVG which can’t be easily modified. We inSPire success. 8
  9. 9. Challenges Scaling is another aspect that is easy to handle within flash file but, implementing the same feature in HTML5 is more complex because, flash file stores the data in vector format. Another feature that will not work as expected in the converted HTML5 file is audio synchronization. The main difference between HTML5 and flash file is that in flash, entire media library gets loaded at one-go; however in HTML5, the media asset will be loaded at the run time of each screen. We inSPire success. 9
  10. 10. Solutions and Work Around For interactive part of the activity, we use JavaScript to implement the logic. To handle the complex animations, we split the animation into multiple parts and convert them into HTML5 file. So, they can be reworked in order to obtain the similar functionality and presentation. To handle the scaling feature, we redraw the object in canvas using JavaScript. We inSPire success. 10
  11. 11. Solutions and Work Around For audio synchronization in HTML5, we load the audio in the frame and based on the timing, the animation will display so; user will not observe any de-synchronization. If the requirement is just to set-up a presentation using flash file that will render in devices, the alternate and comparatively easier way to do this, is to convert the flash file into .mp4 tutorial rather than HTML5. The presentation and functionality of the output .mp4 file remains same as in Flash HTML5 file. The other advantage of .mp4 file is the file can be repurposed and loaded into any HTML5 file. We inSPire success. 11
  12. 12. Solutions and Work Around HTML5 file should change the orientation from Portrait to Landscape and vice-versa based on the change of orientation of the device. To enable this functionality, we write 2 different CSS for each orientation and the file reads the current mode and applies the corresponding CSS. Also, we have a library of already developed and tested code for implementing different kinds of interactivity in the output file e.g. click and drag, MC/TF, check all that apply etc. So, we can repurpose the exiting code and accelerate the conversion process. We inSPire success. 12
  13. 13. Solutions and Work Around We are also closely following the new release from Adobe flash CS 6 with createJS; using this powerful JS library, we are expecting the processing will be improved and the output HTML5 file will be also editable and cleaner. Another advantage of using this is that output HTML5 file will support audio playback. We inSPire success. 13
  14. 14. Flash to HTML5 conversion Approach Technical Analysis • Review the assets and identify the complexity. • Study / understand specifications used in creating the flash assets. • Identify elements that can be converted and those that need recreation. • Outline the elements that are slightly different from the source flash file due to technical constraint in HTML5. • Wherever there are issues, Santillana is communicated with alternate solutions. We inSPire success. 14
  15. 15. Flash to HTML5 conversion Approach Template Redesign and Asset Extraction • Design / develop the main shell / template in HTML5. • Define a workflow where repurposing is provisioned in similar type of activities. • Static animation will be converted into HTML5 using Swiffy. • Media files will be converted into required format. • Graphic elements will be extracted from the source files. • If there are any animations used in the source file the same will be converted with same play back speed. We inSPire success. 15
  16. 16. Flash to HTML5 conversion Approach Programming • Make changes in the HTML5 Template based on the specific requirement of activities. • Program the interactive using JavaScript and CSS3. • Third party JS plugins will be used wherever JS is not enough to perform the task. • Individual activities will be integrated with the main shell. We inSPire success. 16
  17. 17. Flash to HTML5 conversion Approach Production • Document and discuss the project specifics instructions with production team • Assign files and monitor production • Verify output files We inSPire success. 17
  18. 18. Flash to HTML5 conversion Approach QA • The completed activities will be loaded into the local server for testing/QA. The QA team has a very good understanding of the process and works independent of the production team. • The QA team does the following reviews on the output files: • The developed HTML5 activities will be audited. • Besides these checks, the output will be tested for: – consistency in styling – functionality testing – Responsiveness of the activity in desktop browsers and tablets. – Quality of the Converted Graphics. • Any defect found during QA would be communicated to the team for fixing and training purposes. We inSPire success. 18
  19. 19. SPi Global – Laserwords Advantage Best Practices Our process-driven, metrics-oriented approach forms the foundation of all stages of our client engagements – from knowledge transfer, to transition, to ramp up, thru to continuous improvement. Our ISO 9001:2000 Quality Management System, ISO 27001:2005 Information Security Management System, and Six Sigma helps us to continually keep raising the bar on our best practice platform. We inSPire success. 19
  20. 20. SPi Global – Laserwords Advantage End-to-End Support of Digital Products SPi Global’s suite of solutions supports multiple workflow elements in print, digital, and database products. Our end-to-end processing for digital products goes beyond conversion and includes content platform support, product testing, and customer support. We inSPire success. 20
  21. 21. SPi Global – Laserwords Advantage Scale SPi Global has over 8,500 people in 12 delivery centers across four countries. A multi-site delivery approach helps in risk mitigation as well as enabling quick rampups and scalability. We inSPire success. 21
  22. 22. Visit us to know more about our Flash to HTML5 solutions http://www.spi-global.com/content-solutions/our-services/Flash-HTML5-Conversion We inSPire success.