Home :: Insights :: 6 Tips To Convert eLearning Courses From Flash To HTML5

6 Tips To Convert eLearning Courses From Flash To HTML5

January 26, 2016 | By Asha Pandey


Mobile devices are all the rage, and it looks like their popularity is here to stay. The trouble is that most tablets and phones don’t support Flash, which makes Flash-based eLearning content virtually obsolete. Luckily, HTML5 offers a versatile multi-platform alternative. In this article, I’ll share 6 tips to help you convert your eLearning course from Flash to HMTL5 to optimize the mobile learning experience of your audience.

Converting eLearning Courses From Flash To HTML5: 6 Tips For eLearning Professionals

Turning your amazing Flash-based eLearning course into HTML5 is no easy task. This is especially true if your eLearning course is lengthy or involves an abundance of interactive elements. After all, you’ve spent hours, if not days or months, fine tuning every aspect of your eLearning course, and the thought of converting every eLearning video, eLearning game, and online scenario can seem overwhelming. Fortunately, there are 6 tips that can help you make the transition without devoting a great deal of time or money to the process.

      1. Gather your assets.
        Collect all of your eLearning content beforehand, including eLearning activities, videos, and audio elements, so that you have all of your resources at-the-ready. You must have a detailed list of all eLearning courses that you’ll be converting to HTML5, so that you can get a general overview of the work that lies ahead. This will help you to prioritize which eLearning courses you’ll focus on first and create a schedule that streamlines the work process.Getting your eLearning team on board is also crucial, as they can give you an indication of what you are working with and the best way to structure the new eLearning content.
      2. Keep it short and simple.
        This may be one of the most difficult aspects of converting your eLearning content, as it often involves some major cuts and revisions. eLearning content for HTML5 courses, unlike Flash, should contain fewer bytes in order to reduce download times. Keep in mind that a significant number of online learners are going to be using their mobile devices to access the eLearning course. Thus, you must keep your data to an absolute minimum, while still including all of the essentials. Sit down with your Subject Matter Expert and other key members of your eLearning team to conduct a thorough audit of the eLearning course. Look at every piece of eLearning content to determine what can stay and what should be removed before you make the switch.
      3. Use the right tools.
        Before you start converting your eLearning content you should have a clear idea of what authoring tools you’ll be using and how to use them most effectively. The process can be time consuming and complicated if you don’t have the right authoring tools at your disposal, especially if you have a great deal of interactive and multimedia elements in your instructional design. Here are two authoring tools, in particular, that may be able to help:

          • Swiffy.
            This is a Google release which allows eLearning professionals to convert Flash to HTML5 content. It is web-based, which means that you can access your ongoing project anytime, anywhere. Once you’ve converted the material you have the option to embed it into your site. Keep in mind, however, that it is limited and will only convert some of the Flash components.
          • Adobe Canvas.
            Adobe’s Canvas features the Flash Pro tool that can translate Flash objects to HTML5 content. Essentially, the software maps the Flash elements using the API within Canvas, then renders the graphics as finalized drawings or JavaScript code to add interactivity to your online creation.
      4. Know your limits.
        Depending on the authoring tools that you are using, you must be aware of the specification limitations that apply. For example, with certain authoring tools, you may not be able to convert all of your interactive multimedia content to HTML5. If this is the case, you may have to completely revise or restructure your online content materials in order to make them mobile-friendly and HTML5-ready. If possible, research all of the authoring tools that are available to find the option that is versatile and robust enough for your needs. Though more advanced tools may cost more, they might be able to drastically reduce development time and eliminate some of the headache.
      5. Test the layout as you go.
        One of the biggest mistakes you can make when converting from Flash to HMTL5 is not conducting periodic checks. You must test the layout as you go along to ensure that all of the components are properly translated. Create checkpoints that allow you to view the pages before you move onto the next online lesson or module. By doing so you reduce the risk of lengthy revisions later on. Not to mention, you can solve common problems that tend to repeat throughout the entire eLearning course. For example, if a repeating script is giving you trouble in the first module, chances are it will be problematic further down the line. Thus, you can troubleshoot the issue now and apply the same changes throughout the entire eLearning course to save yourself some valuable time
      6. Test the layout as you go.
        The key to a successful and stress-free Flash to HTML5 conversion is planning and organization. You must prepare for the process well in advance and know what the job entails. This also involves preparing the GUI (Graphical User Interface) for the eLearning project. In some cases you may be required to customize the GUI to meet your needs. If you do need to make any changes to the player you should consider outsourcing the work, particularly if you have no prior experience and need to get the job done sooner rather than later.

HTML5 is the quickly becoming the go-to design solution for Instructional Designers, and it’s easy to see why. Not only does it make your eLearning experiences more accessible, but helps you create scalable, versatile, and robust eLearning content that is virtually future-proof. So, make your eLearning experiences mobile-friendly and ready for the learners of tomorrow by converting your eLearning content today.

Is it really time to say goodbye to Flash forever? Read the article 6 Benefits Of Using HTML5 In eLearning to find out why Flash is fading and the benefits of switching to an HTML5 approach for your next eLearning course.

Related Insights