Tackling Flash To HTML5 Migration

Adobe ended Flash support in 2020. Learn how to plan a Flash to HTML5 migration for online courses, with tools, testing and accessibility.

Chad Faith
Chad Faith Director of Content · · Updated · 3 min read
Web design
In this article
  1. Move to HTML5 for mobile-friendly, accessible learning
  2. Start with an inventory and a plan
  3. Choose conversion tools carefully
  4. Use responsive design so lessons work on every device
  5. Test, measure and keep improving

If you provide online learning courses, there is a good chance that some of your older courses are built with Flash. That is a problem, because Adobe ended support for Flash on December 31, 2020, and began blocking Flash content from running in Flash Player in January 2021. Modern browsers no longer run Flash, and Flash never worked on phones or tablets. If any of your courses, animations, games or interactive tools still rely on it, they are broken for most learners today.

Move to HTML5 for mobile-friendly, accessible learning

HTML5 works across phones, tablets and computers, offers more flexibility and can improve the learning experience. The migration takes planning, though. Here is how to approach it so you get a return on your investment and avoid wasting time and money.

Start with an inventory and a plan

The success of a migration usually depends on the effort that goes into planning. Begin by listing everything that uses Flash: courses, videos, simulations, quizzes, animations and embedded tools. Then rank them by how many learners use them and how much value they carry.

Compare the experience that HTML5 can offer with your Flash versions, and decide which items should be rebuilt, which can be converted and which can be retired. Also check the supporting pieces: a learning management system (LMS) that supports mobile learning and current standards such as SCORM or xAPI, an updated security policy and a list of supported browsers. Choose a small group of priority courses to migrate first, and test them with real learners to confirm that the new version is better.

Choose conversion tools carefully

Converting a complex Flash project to HTML5 by hand is labor-intensive. Animations built with ActionScript and Flash must be rebuilt in JavaScript, HTML5 and CSS. Several tools can help, but none converts everything automatically, so expect to review and fix the output.

  • Adobe Animate: The successor to Flash Professional. It can open many .fla files and publish HTML5 Canvas animations. Interactivity written in ActionScript usually has to be rewritten in JavaScript.
  • E-learning authoring tools: Tools such as Articulate Storyline and Rise, Adobe Captivate and open-source options like H5P let you rebuild lessons, quizzes and interactions and publish them as HTML5 packages for your LMS.
  • Ruffle: An open-source Flash emulator that can play many old Flash files in a modern browser. It is useful for preserving or archiving content, but it is not a long-term replacement for a rebuilt course, and compatibility varies.

Older tools that were popular during the transition, such as Adobe’s experimental Wallaby and Google’s Swiffy, are no longer available, so do not plan around them. Whatever tool you choose, test the output in all of the browsers and devices your learners use.

Use responsive design so lessons work on every device

You have probably had this experience: a colleague shares a well-made site, you click the link on your phone and it is easy to navigate and intuitive. The difference is good responsive design, which lets a page adapt to phones, tablets and computers. Apply the same thinking to your learning materials. Use flexible layouts, text that stays readable on small screens, large tap targets and media that scales.

Take the chance to improve accessibility too. Flash content was often hard for screen readers and keyboard users. HTML5 lets you add captions and transcripts, keyboard navigation, text alternatives and sufficient color contrast, in line with the Web Content Accessibility Guidelines (WCAG).

Test, measure and keep improving

After you launch, track completion rates, quiz results and learner feedback, and compare them with your old Flash versions. If a rebuilt course performs better, you have your proof of return on investment. If it does not, use the feedback to refine it. A well-planned migration keeps your learning content available, fast and usable on every device.

★★★★★
“Five stars for SmartSites, and an extra five stars for our account manager, Bailey!”
Rajashri SankavaramMetronomeGoogle review

Keep reading, more on web design.