From Flash-based Legacy E-learning Courses to HTML5

According to Horizon Report, 2011, by 2015 about 80% of people will be accessing the Internet from mobile devices only, with the main focus on education. In such situations, mobile learning is looked upon as a powerful medium for training and development purposes. According to Towards Maturity, Benchmark Study, 70% of organizations are planning to implement mobile learning in the next two years. It is now becoming quite clear that soon a majority of organizations are likely to adopt mobile learning in place of conventional eLearning to impart training to their employees. It is estimated that about 75% of the workforce in the United States is already using mobile technology and IDC predicts that by 2015 the numbers, worldwide, will reach 1.3 billion.

With this growing need of corporates to make eLearning content accessible through smartphones and tablets for training their employees, is it now time to realize the need to migrate from Flash-based legacy eLearning courses to HTML5? The reason for this is that Flash-based eLearning courses, which usually do not run on iPads or the latest version of android tabs and other modern mobile devices, can be easily accessible on these same modern devices when converted to HTML5 format. This makes the concept of HTML5 very significant as it now enabled eLearning developers to deliver the courses straight to the learners’ smartphones, tablets and advanced mobile devices.

HTML5 at a glance

HTML5 is said to be fifth version of the Hypertext Markup Language, which is used in structuring World Wide Web pages. It became a highly discussed topic in the eLearning industry following the discovery of incompatibility of Flash-based eLearning content with operating systems of the modern mobile devices. HTML5, which is a stack of HTML, CSS and JavaScript, is capable of transforming eLearning, especially in the context of mobile learning. Its main strength lies in its compatibility with modern browsers and operating systems of the latest mobile devices.

Converting PowerPoint Presentations to HTML5

Why HTML5?

Unlike Flash-based eLearning courses, which are not supported by the operating systems of modern mobile devices such as iOS, HTML5 can make courses easily accessible on iPads, iPhones and other latest mobile devices because of its compatibility with these advanced devices and modern browsers. The greatest advantage with HTML5 is that almost all the major eLearning authoring tools available in market are compatible with it, making it possible to deliver eLearning courses on latest mobile devices and compatible browsers. Furthermore, unlike Flash, HTML5 requires no plugins for accessing videos, audio and interactivities in the browsers compatible with it. With exciting features like video tags, canvas elements, audio tag and scalable vector graphics (SVG) content, it is now very easy to include rich multimedia and graphical content on the web.

Great flexible, on-demand, just-in-time training, thanks to the ability of HTML5 to transform eLearning content in mobile learning content

In today’s fast paced, competitive and dynamic business environments, companies often require to make strategic decisions such as quick product launches and product upgradations. For example, Lenovo launched 12 products in the year 2012 in the PC segment in just 6 months. In such situations, providing quick training to employees and updating them with latest information is quite a big challenge that needs to be overcome. Conventional Flash-based training courses, which are developed to be run on desktops, might not be suitable to meet the just-in-time training requirement in today’s context. Leveraging the capability of HTML5 in making training content accessible on modern mobile devices in the form of M-Learning can substantially enable companies to effectively meet their employee training requirements.

Steps involved in the conversion of Flash-based eLearning courses to HTML5

The main factors that need to be considered while moving from Flash-based eLearning courses to HTML5 are analyzing the exiting Flash-based courses, Storyboarding, and selecting the right authoring tools for the eLearning conversion process. Let us see these one by one.

From Flash to HTML5

Analyzing the existing Flash course

As the transition from Flash-based course to HTML5 is complex, it is important that the existing Flash-based eLearning courses are analyzed properly so that this process becomes easy and successful. At first, it is required to identify the various elements of the course such as design, menu, table of content, etc., as well as categorize flash assets such as interactivities and animations. Then it can be determined whether these course elements and flash assets are required to be re-created with the help of authoring tools or through adding Java script to make them compatible to HTML5.

Storyboarding

Storyboarding is a critical step in the conversion of Flash-based courses into HTML5. Here, before the actual storyboard process begins, two important factors need to be understood properly, that is, the difference between the screen sizes and specifications of modern mobile devices and desktops or laptops, and difference between the nature of learning through mobile devices and desktops. Then it is required to extract the content identified onto the storyboard of current Flash-based courses.

Once the content is identified, the design strategy (depending on the limitations and capabilities of authoring tool) needs to be determined. After this, the content is needed to be chunked to suit the screen specifications of the mobile devices. It is important that content is made available in the format of small digestible modules because people usually access information on mobile devices only for some quick reference. Once the storyboard is approved and finalized by the client, the new course can be developed as per the visualization description given on the storyboard by using the appropriate authoring tool.

Selection of authoring tools

Authoring tools help in the conversion of Flash-based eLearning courses into the HTML5 version in a very rapid manner. These tools are also advantageous in terms of retaining the interactivities of the Flash-based courses when they are getting converted in the HTML5 format. Let us see some of the popular authoring tools that can help in converting existing eLearning courses into M-Learning courses.

Articulate Storyline

Articulate Storyline has an option for publishing eLearning courses to Flash, HTML5 and iOS, which enables learners to access the eLearning courses on multiple devices such as laptops, desktops, smartphones, iPad, iPhones and mobile phones. This eLearning authoring tool is equipped with a wide selection of in-built templates. The tool also enables to include users to add their own created templates as well as apply interactivities to the course. With features like Triggers, Slide layers, States and variables, this tool helps creating complex interactions in an easy manner.

The main attraction of Storyline is that it allows for more than 47,500 combinations of characters, expressions and poses for the courses. The tool also unleashes the power of multimedia in terms of accepting videos and creating simulations. Storyline’s iPad app, called Articulate Mobile Player, can provide media-rich eLearning course on iPads in an aesthetic manner. When it comes to meeting the deadlines of developing the course and that too in reduced costs, Storyline is always considered to be one of the most preferred eLearning tools.

Adobe Captivate 7

Adobe Captivate has publishing options to Flash and HTML5. With inbuilt interactivities, the tool is ideal when it comes to designing interactivities and assigning actions. The tool offers a wide selection of Themes, Characters, Smart Shapes, Smart Learning Interactions and templates for creation of beautiful content.

The tool also provides an advantage of creating translation templates easily and quickly, which enables to export course content in an XML format for translation (once translation is done, translated text and audio can be imported into the course). The tool is powered with other important features like Twitter widget, Tin Can Api support, Shared Advanced Action, and possibility of embedding YouTube videos, which makes it an ideal authoring tool for eLearning course development.

Lectora

Lectora is another authoring tool that is highly preferred for converting text-heavy courses into simple and effective eLearning courses. The tool is renowned for its capability of translating eLearning courses in different languages of the world.

Lectora has various useful components such as pre-built table of contents (helps to navigate back and forth or to any specific page), branching pages (allows learners to directly jump to a particular slide or module), Click on tabs (helps to present huge content in a single screen), default quiz (allows creation of customized quiz functionality, marks, layout and summary page) and default audio transcription (displays audio script on the screen for each page). This authoring tool has a feature to publish eLearning courses to HTML, AICC and SCORM. In this way, Lectora can also be very useful when it is required to make eLearning courses accessible on PC, iPads and mobile devices.

iSpring

This is a very user-friendly tool that is suitable for converting PowerPoint to HTML5; it is like an add-on for PowerPoint. The advantage with iSpring is that it can preserve all the animations, activities, audio, video and applied styles of PowerPoint as it is in the HTML5 version. One important feature of this authoring tool is that it allows for easy translation of eLearning courses into multiple languages as well as gives excellent support to right-to-left languages.

Apart from this, PowerPoint presentations can be converted to any of the video formats (.M4V/.MP4/.MOV) with the help of iSpring, which are well supported by iPads. Also, with an inbuilt narration editor, iSpring allows for adding comments for each slide in the eLearning courses. With iSpring, it will be very easy to add YouTube videos, Flash movies and interactive web objects to eLearning courses.

Developing the course using the authoring tool

Once the right authoring tool is selected, it is now time to develop the course on that specific authoring tool. Here, the graphic elements and assessments (includes Drag and Drops, Multiple Choice Questions, Rollovers, Click on Tabs, etc.) are need to be re-created on the authoring tool so as to suit the mobile devices. Also, complex animations are converted to videos or static info graphics. Apart from this, interactivities need to be re-created as per the exact training requirement only at this point.

Flash Course Screen

HTML5 Course Screen

Browsers considerations while moving to HTML5

HTML5 is compatible with various popular browsers such as Google Chrome, Opera, Safari and Firefox. But the challenge with respect to the compatibility of HTML5 with old browsers such as I.E 8, I.E 7 and I.E can be definitely seen.

Browser Compatibility with HTML5

From the above table we can see the different browsers and their respective scores. The table is intended to show the compatibility of HTML5 with respect to the given scores of the browser - the more the score of browser, the more it will be supportive for HML5 features.

This browser-compatibility constraint with HTML5 can be a challenging issue for organizations that are somehow reluctant to adopt advanced versions of the browser that support HTML5 content. Here comes the advantage of eLearning authoring tools, which have publishing options to both Flash and HTML5. This can give learners the choice of accessing Flash courses in non-HTML5 supportive browsers like IE6 or IE7. So, we can now see how the browser compatibility is not a big issue at all with HTML5, as far as transforming eLearning content into mobile version is concerned.

View Free E-learning Sample Courses
Training Challenges and E-learning Solutions Summit 2017
Mobile Learning: How to Overcome Implementation Barriers

Get Your Free Copy Now!

Subscribe to Our Newsletter