flash to html5 conversion solutions - spi global

We inSPire success.

Flash to HTML5 Conversionhttp://www.spi-global.com/content-solutions/our-services/Flash-HTML5-Conversion

http://www.spi-global.com/content-solutions/our-services/Flash-HTML5-Conversion


2We inSPire success.

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.


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.

Executive Summary


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


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


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.


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.


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.


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.


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.



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.



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


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.



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.



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.



Production• Document and discuss the project specifics instructions

with production team• Assign files and monitor production• Verify output files



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.


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.



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.



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 ramp- ups and scalability.

We inSPire success.

Visit us to know more about our Flash to HTML5 solutions




flash to html5 conversion solutions - spi global

Technology

flash files

html5 files

flash player

flash professional

adobe flash

capabilities of flash

html5 conversion http

html5based content