Optimizing eLearning with Flash to HTML5 Conversion

QBurst helped a well-known company in the eLearning space migrate from a Flash-based environment to a mobile-friendly alternative. Through extensive analysis and evaluation of coding options, complex Flash animations were recreated using HTML5 and implemented systematically to meet the client’s expectations.

The key challenge the client faced was that their web application, developed using Flash, was not supported on iPad and Android 4 and above devices. HTML5 was chosen as an alternative to Flash and this involved several challenges.

• Long series of complex animations
• Audio synchronization with animation at the time of pause and play
• Loading issue during page start
• Duplicating the transition effects to match Flash transitions
• Making the animations compatible with IE8
• Playing audio and video on IE8

QBurst developed the mobile-optimized version of client’s application using HTML5, jQuery, and CSS3. The HTML template was created using basic HTML tags and CSS styling while the animations were recreated using JavaScript libraries. To improve performance, we used optimized images and CSS sprites in the HTML5 app. Ruby on Rails was used to build the backend and integrate the HTML5 applications.

Recreating complex animations: Our team recreated long series of animations using JavaScript libraries. The animations were split into several parts and recreated using jQuery functions. When a function is called, a set of animations are performed. Each function serves as a callback to another, which results in a series of animations.

Audio synchronization with animation: The client provided the audio assets as a set of audio sprites where all the narrations (including background music and actions) were merged. After careful evaluation of options, we checked for JavaScript media (audio/video) APIs and discovered that the timeupdate method triggers at least 3 times in a second during media playback. So we started triggering functions in the timeupdate event listener using switch case. Animation methods were called every second, some even in a fraction of a second. Using this technique, we achieved perfect synchronization of audio and animations, which seemed like an impossible task initially.

Addressing loading delays: In the HTML5 app, audio autoplay was used to initiate audio. However, at times the audio files did not load due to browser cache issues. To resolve this problem we used an HTML5 loader and loaded the audio files using the preloader script instead of completing the process by adding the source tag. This ensured that the initial blockers would not prevent any audio files from loading. It was the best solution for the audio loading issue and it helped us to improve user experience as it displays the loading status with the help of a progress bar showing percentage of files loaded.

Duplicating the transition effects: We used an ActiveX object with native media player support for playing audio/video files. As the application contains multiple audio and video files, we created a common method which accepts object ID as an argument. This method attaches all the associated functions (play, stop, pause, and others) and data (current time) with the object.

Compatibility with IE8: Earlier, CSS3 transitions were used for rotating elements; but since IE8 does not support CSS3, we opted to use a jQuery rotate plugin tomake this functionality work on IE8 as well as other browsers.

• Audio and video integration
• Audio synchronized animations
• Animations on time update
• Complex animation screens including SVG
• Audio and video play, pause, replay
• Animation pause
• Audio narration
• Pages with drag/drop functionality and user interaction
• Quiz pages with simple/complex animations
• Toolbar, help, narration, and calculator
• IE8+ compatibility
• iPad and Android tablet support

• HTML5
• PostgreSQL
• JavaScript
• Backbone.js
• Angular JS
• Ruby on Rails
• jQuery
• Bootstrap
• RSpec

• With the launch of the HTML5-based application, the client was able to reach out to a wider audience and broaden their user base.
• Several elements that enhanced the quality of the application were introduced with some enhancements noticeably better than the earlier Flash version.