20 Jun Case Study – Flash to HTML5 Conversion: Converting Flash-based CBT Modules to HTML5 Courses

What is Flash-based CBT courses?
- In the past, many organizations developed computer-based training (CBT) courses using Adobe Flash technology. These courses were created in the form of SWF files and were widely used for e-learning purposes. However, with the advent of modern technologies and the rise of mobile devices, Flash technology has become obsolete and incompatible with many devices.
- To address this issue, many organizations are now offering Flash to HTML5 conversion courses.
- In this case study, we will explore the process of converting an old Flash-based CBT module to HTML5, which we have worked on for one of our clients in the automobile industry.

Client Requirement
Converting legacy Flash CBT (SWF) to HTML5

Client Requirement
26 eLearning Flash-based CBT modules
About Company
Our client, a leading automobile industry base in Singapore, had developed a Flash-based CBT courses several years ago to train its employees on the proper use of a new vehicle manufacturing technology. The courses contained interactive simulations, videos, quizzes, and other multimedia elements.
Client Requirement
Our client, a leading automobile industry base in Singapore, had developed a Flash-based CBT courses several years ago to train its employees on the proper use of a new vehicle manufacturing technology. The courses contained interactive simulations, videos, quizzes, and other multimedia elements.
Why did our client require the conversion of their Old Flash-based CBT courses to HTML5 courses?
The phasing out of Adobe Flash refers to the discontinuation of support for the Flash technology by Adobe. Adobe announced that it would end support for Flash in December 2020, and since then, most modern browsers have stopped supporting Flash content by default.
Client’s decision to convert their Flash-based CBT modules to HTML5 courses also aligns with the industry’s shift towards modern technologies for e-learning development. Moreover, HTML5 provides a more secure and versatile platform for developing multimedia-rich applications.
As a result, our client requested that their training materials developed in Flash for e-learning purposes be converted to HTML5 courses to ensure that the courses remain accessible and effective in the modern era of e-learning.
Project Management
Migrating a large number of courses from Flash to HTML5 Conversion courses can be a complex and time-consuming process. As a result, effective project management is crucial to the success of any Flash to HTML5 conversion project.
Our project management for a Flash to HTML5 conversion project involves several key tasks, including identifying all courses that need to be migrated, establishing timelines, assigning tasks to team members.
By carefully planning and managing each stage of the conversion process, project managers can minimize disruptions to business operations and ensure that the project is completed on time and within budget.
Below are some key points that we followed to ensure the success of our Flash to HTML5 conversion project.
Analysis Phase
To ensure a smooth Flash to HTML5 conversion process, our first step is to conduct a thorough analysis of the Flash courses, which includes reviewing the course objectives, learning outcomes, multimedia elements, assessments, and interactions.
Analyzing the Flash courses is essential in the initial stages of the conversion project, as it helps identify potential issues or challenges that may arise during the conversion process and develop appropriate solutions. This helps in developing a detailed project plan and ensures that there are no delays or unexpected obstacles later on.
In our analysis, we found that the courses had several interactive simulations that required a high degree of interactivity, as well as numerous videos and quizzes.
Additionally, the Flash courses had a complex navigation structure that needed to be maintained in the HTML5 version.
ARTICULATE STORYLINE POSTS
Design Phase
Once we had a clear understanding of the client’s requirements, we began the design phase. We worked closely with the client to develop a prototype for each course that would maintain the existing module’s look and feel while also ensuring compatibility with modern devices and browsers. We used modern technologies such as HTML5 and JavaScript to create a responsive and visually appealing design.
This helped us identify potential issues and ensure that the final product met the required standards set by our client.
Development Phase
With the prototype design in place, we began the development phase. We used a combination of open-source and proprietary tools to convert the Flash courses to HTML5.
- The interactive and simulations were rebuilt using Articulate Storyline 360 and JavaScript.
- The videos were converted to a modern format such as MP4.
- The quizzes were developed using HTML5 and JavaScript, and ensure seamless navigation of Graphical User Interface (GUI).
Testing Phase
Once the HTML5 version of the CBT modules was developed, we conducted rigorous testing to ensure that it worked seamlessly on all devices and browsers.
Some key points to consider during the quality check process include:
- Review the courses to ensure that they are consistent with the original design and content of the Flash courses.
- Ensure that the courses are compliant with any accessibility standards and regulations.
- Verify the accuracy and functionality of assessments and interactive elements in the courses.
- Check for any broken links or missing multimedia elements that may have occurred during the conversion process.
- Test the courses on different devices and browsers to ensure they are responsive and work well on different platforms.
- We also tested the course’s compatibility with various Learning Management Systems (LMS).
Deployment Phase
The next phase involves deploying the new courses. This includes uploading the courses to the client’s learning management system (LMS) or hosting platform. During this phase, we work closely with the client to ensure seamless integration of the courses into their LMS or hosting platform. Thorough testing is also conducted to ensure that the courses work on different devices and browsers, and that the content and interactions are correctly displayed.
Finally, we provide the client with documentation and training materials to help them manage and maintain the new courses. This includes information on how to update and modify the courses, troubleshoot any issues, and ensure that the courses remain up-to-date and effective for their learners.
Achievements
Learner Experience
The videos and simulations were displayed correctly and the quizzes were engaging and challenging. I was able to access the course on any device, whether I was using a laptop, tablet, or mobile phone, which made it very convenient for me to learn on the go.
The interface was visually appealing and user-friendly, which made it easy to keep my attention focused on the content. The content itself was well-organized and well-presented, which made it easy for me to follow along and understand the material.
I found it to be a good learning experience that allowed me to acquire the necessary skills and knowledge.
Client Testimonial
I wanted to take a moment to express my gratitude for the exceptional work that your team has done in converting our old Flash-based CBT courses to HTML5. Your team’s deep understanding of modern technologies and e-learning development has enabled us to convert the courses, while maintaining the interactivity and navigation that were key features of the original courses.
We appreciate the effort your team put into working with us closely during the design phase to ensure that the new courses were visually appealing, responsive, and compatible with modern devices and browsers. Your team’s dedication and attention to detail during the testing phase gave us confidence that the courses would work on any device or platform.
Overall, we are delighted with the final result, and we feel that the converted courses will be of great benefit to our learners. Your team’s expertise and professionalism made this project a success, and we look forward to continuing to work with you in the future.
Thank you again for your hard work and commitment to quality.
Conclusion
In conclusion, the Flash to HTML5 conversion process necessitates a comprehensive understanding of contemporary technologies and e-learning development. Our team of skilled e-learning developers adeptly executed the conversion of the old Flash CBT course to an HTML5 course, ensuring the retention of interactivity and navigation from the original course. The client expressed immense satisfaction with the final outcome, as the converted courses became accessible on all devices and platforms. The successful Flash to HTML5 conversion not only future-proofed the training materials but also enhanced the overall user experience and usability of the courses.
Converting old Flash CBT Modules to HTML5 is an essential step for organizations to ensure that their e-learning courses remain accessible and effective in the modern era of e-learning.
No Comments