Case study on Flash based eLearning content to HTML5

The Client

Based in Australia, the client offers eLearning modules for various specialized courses such as Data Sciences, Machine Learning etc. The courses are illustrative in nature and help instructors teach, assess and certify learners based on command developed by them on key skills after undergoing the course. The client offered courses in Flash modules to promote interactive and personalized learning as well as present the outcomes of research conducted in respective domains in easy to understand manner for students. The teaching modules served as instruction aid for teachers and helped them in providing more intense learning experience.

About the project

The challenge was that the teaching material was in legacy Flash files. As support for them is continuously being discontinued by browsers and Flash is being superseded by HTML5, the entire content had to be migrated to HTML5. The Flash based animated courses were complex in nature. The underlying codes had to be analyzed extensively and various conversion options had to be evaluated to facilitate seamless transition of codes. This would facilitate us to convert interactive swf to HTML5 as per the expectations and specifications of client.

Project Requirements and Challenges

The project required us to render the learning modules consistent with mobile devices for optimum viewing. All embedded Flash animations had to be transformed into HTML5 animations and corresponding audio had to complement the animation.

The primary roadblock was the fact that Flash based web applications could not run on iPad and other handheld devices operating on Android. The conversion process of flash based eLearning content to HTML5 required handling of numerous long drawn complex animations, synchronizing audio perfectly with animated sequences to enable pausing and playing, and ensuring that modules loaded intuitively at start of page. Further, the transition effects of Flash had to be replicated, and animations as well as audio-video had to be rendered consistent with Internet Explorer 8.

Project Outcomes

Systematic implementation plan was devised which started with exhaustive checking and analyzing of various coding options available for conversion. By leveraging jQuery, HTML5 and CSS3, the eLearning modules were optimized for mobile. Text templates were recreated with CSS styling and HTML tags whereas JavaScript libraries were used for recreating animations. Within HTML5 app, enhanced images and CSS sprites were used for boosting performance. HTML5 applications were integrated using backend powered by Ruby on Rails.

Advantages

WinBizSolutions succeeded in delivering mobile-friendly HTML5 applications within lowest turnaround time. The transformed mobile based elearning app enabled the client to cater to wider teaching community. The applications are more agile and engaging compared to Flash. Client was very happy with our performance and recommended us to his professional acquaintances.

Outcomes

We could make the client realize his ambition of acquiring the lion’s share of lifestyle magazine market by surpassing his expectations. Our delivery was within the committed deadline and the budget was not exceeded and hence the overall result was delighted and happy customer who provided us recurring business.

Need help in transforming flash into HTML5?