The Shift from Flash to HTML5: What Does It Mean for eLearning?

The Shift from Flash to HTML5: What Does It Mean for eLearning?

Flash was the favorite of eLearning developers, owing to its versatility in building interactivities and high quality of graphics. However, with Flash being phased out, we need to convert courses built in Flash to HTML5. This could be quite daunting if the conversion approach is not right. L&D teams across organizations are making the switch as courses would otherwise not be accessible on mobile devices.

Given that most learners use mobile devices for their learning needs, it is time to make the switch. In this post, I’ll highlight what HTML5 is all about and what it means for eLearning. I will also share a few steps to convert existing Flash courses to HTML5.

Migrating from Flash to HTML5? What is HTML5 all about?

HTML + CSS3 + JavaScript = HTML5.

With HTML5, you can deliver anything that has to be online, without the headache of additional plugins. You can develop anything, ranging from apps to music to movies. HTML5 can also be used to build complicated applications that run on browsers. As HTML5 is cross-platform compatible, courses can be deployed and accessed on any device.

What does Switching from Flash to HTML5 Mean for eLearning?

There are multiple reasons HTML5 is beneficial for eLearning. Listed below are a few:

  • Content is in a single source that can be delivered through multiple devices
  • No external plugins required
  • Rich interactivities possible
  • Anytime and anywhere access with mobile apps
  • Content can be easily read by multiple browsers

Before the advent of HTML, eLearning courses were published to Flash. Learners had to install the latest version of the Flash player to access online courses. Two decades ago, learners didn’t have a choice of browsers as there were just a few and Flash updated versions frequently. However, over the years, with technological advancements, there was no choice but to embrace new developments.

Migrate Your E-learning Courses to HTML5 The Right Way! from CommLab India – A Rapid eLearning Solutions Provider

Along with it came smartphones and tablets in various screen sizes, beginning a new era. However, fewer mobiles were able to support Flash, despite its reign as the supreme standard in the pre-mobile era. With the sea of change came third-party extensions, plugins, and add-ons that were vital to run Flash on web browsers.

When HTML came into the picture, Flash’s incompatibility with mobile devices and browsers was taken care of. As more and more organizations opted to go for eLearning to extend online training via mobile devices, HTML5, the latest version of HTML, became a success. Also, HTML5’s compatibility with various Learning Management System (LMS) standards such as AICC, SCORM, Tin Can/Experience API, made it the most sought-after alternative to Flash.

Steps to Migrate Flash Courses to HTML5

Here are four steps to ensure a successful conversion:

1. Analyze Existing Flash Courses

The most important part of the Flash to HTML5 conversion is the analysis of existing inputs. You need the source files to extract the content. Identify the components that can be reused such as text, menu, and screens and categorize the Flash assets, based on the formats (animations and interactivities), in the existing content.

2. Select the Authoring Tool

Most modern authoring tools render HTML5 compatible courses. Another benefit is that legacy courses can be imported into the selected authoring tool, along with the animations and graphics, without additional plugins. Courses can be directly published to HTML5 due to the native support offered. You can also develop effective mobile courses with these authoring tools.

4 Best Tools to Publish Flash eLearning to HTML5

i. Articulate Storyline 3

  • Multiple device compatibility on a click
  • Publish to Flash, HTML5, and mobile-easy authoring, reducing cost and effort
  • Inbuilt templates and interactivities
  • Multimedia support – embed videos, create simulations
  • In-built Content Library (characters, photos)
  • Illustrations (icons, videos)
  • Easy customization with variables and triggers
  • Ease of translations
  • Team collaboration (Multiple users can work on the same course, at the same time)
  • Review cycle (Regardless of the location, multiple reviewers can review a course at the same time)

One of our clients, a retail chain in North America, wanted to enhance their entire curriculum consisting of 40 Flash-based courses within 2 months. These courses needed to be highly interactive and at a very low cost. Their challenge was that they needed quick, cost-effective, and iPad compatible courses, complete with interactivities. Using Articulate Storyline, we developed interactive courses that met both the requirements of tight timelines and budgets effectively.

ii. Adobe Captivate 9

  • Inbuilt enhanced interactions library
  • Deliver media-rich projects
  • Ease of translations

One of our clients, a leading consumer goods company in London, had Flash-based eLearning course on Ariba© Software. The challenge was to recreate the course along with the existing simulations and watch-try-do-approach and make it compatible with mobile devices. With Adobe Captivate, it became a cakewalk. We used a guided learning approach in a simulated environment with characters and a conversational tone in the audio.

iii. Lectora Inspire 17

  • Ideal for text-heavy courses
  • Multilingual support
  • Highly customized templates, interactivities, and quizzes
  • PowerPoint to eLearning conversion
  • Publish to HTML5
  • Free iPad templates for eLearning courses

iv. iSpring Suite 9

  • Convert PowerPoint presentations to HTML5
  • Support multiple platforms (SCORM, AICC, xAPI)
  • Support for languages that are written right to left
  • Record and sync narration
  • Leverage media to engage your audience
  • Create engaging interactions
  • Built-in interactive assessments
  • Audio and video lectures
  • Screencasts
  • Extensive content library

3. Design the Storyboard

Before you begin the conversion, extract the content and ensure you chunk the content to suit the screen sizes. Check for the content that can be reused to suit the current need and redesign the content of interactive screens. A storyboard is then developed, visualizing the course.

4. Develop the Course Using the Tool

Recreate the graphic elements and assessments and recreate the interactivities using a rapid authoring tool. Convert complex animation to videos or infographics. You can first develop the prototype and get the required approvals from stakeholders and then scale up development for the final course.

Owing to Flash’s incompatibility with mobile phones, the need for HTML5 compatible courses is required. More and more organizations are making the shift. Are you on the same path too?