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.

1. Flash to HTML5 Conversion
http://www.spi-global.com/content-solutions/our-services/Flash-HTML5-Conversion
We inSPire success.

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