Background and Business Need

Our client, a global premier leader in training and consultation for IT services and Management, was looking to convert their existing online training content, spanning 150 hours, from Flash to HTML5 technology.

Their primary requirement was to update the underlying technology of their training programs to provide better support on modern browsers and mobile devices.

Further, our client was also looking for a way to make updates to their existing training content easily. As inputs, our client provided us their content that existed across various courses and included the following:

  • Animations
  • Interactivities and assessments in a combination of FLA and SWF files

Challenges

Considering the technological requirements of our client, we faced four major challenges.

  1. Some source FLA files from the legacy content were missing
  2. All the content from the Flash files was embedded within the files, while there were no storyboards supporting the legacy flash content
  3. To add to the task, all the media files, including images and audio, were a part of Flash source FLA and would have to be extracted
  4. We needed to have a strategy in place to help our client make course updates in the future

Solution

To meet our client’s requirements and overcome the challenges, we first analyzed all the Flash assets and segregated them into three categories: animations (self-running, interactive), interactivities (text-based, image-based, etc.), and assessments. Based on the types of flash assets identified, we applied various extraction and conversion solutions, which included the following:

  • Exporting to video format (mp4)
  • Decompiling the SWF files in case the source Flash files were unavailable
  • Using JSFL scripts for extracting content (XML output) and media assets
  • Redeveloping the Flash assets and courses using KnowledgeWorks Global Learning’s custom framework

We then compressed all media files using various compression techniques and third-party software to avoid any unnecessary network round trips. Our team at KnowledgeWorks Global Learning also developed a JSON-based data model using our client’s existing content. We integrated this data model with a layout that allowed us to re-design the course layouts to ensure they meet the responsive design guidelines.

To facilitate easy updates to these courses in the future, we built a web-based authoring tool, which could import legacy XML files and output on the new JSON-based data model. The web-based tool also included basic WYSIWYG features to help authors make updates to the existing course content and re-publish them. Further, the new JSON-based data model worked along with KnowledgeWorks Global Learning’s custom JS framework for generating an output of HTML5 courses.

We minified all the courses with automated packaging using GULP for performance optimization. We also conducted quality tests that included unit testing, design tests, and device compatibility testing.

Solution Highlights

  • We used various conversion processes in tandem to provide the most efficient way for extracting and converting the Flash assets.

  • We used KnowledgeWorks Global Learning’s custom JS framework, which allowed the re-use of existing interactivity templates to re-develop legacy flash interactivities including:

    • Drag and Drop
    • MCQ
    • Quiz
    • Video Player
  • We developed a web-based authoring tool with WYSIWYG features, which exports content into the new data model for easy updates.

  • We created a new responsive course design to support mobile devices.

  • We ensured performance optimization using various compression and minification techniques.

Outcomes

We delivered an optimal solution to our client enabling them to relaunch their training courses in modern engaging designs. The newly added mobile-compatibility of our client’s learning content helped them increase their user base by a resounding 60% therefore increasing their ROI by 55%.

Want to read more?
Have a similar requirement?