Out in a Flash

There’s nothing like a well-designed, interactive online course to keep your learners engaged. And you’d like all your courses to be just as well-designed in the future, even as technologies change.

But these technologies are changing rapidly now. Most elearning courses developed in the past might have been published as Flash-based packages (for example, an SWF file with an HTML link). These were intended for display on a web browser with the plug-in Adobe Flash Player (or Shockwave Flash).

According to Adobe, its player was available as part of web browsers on 1.3 billion systems around the world (about 98% of all computers). It’s a great platform, but learners can play their courses only on a PC or MacOS computer, not on a mobile device. Many learners are already streaming their favorite videos, movies and TV shows on handheld iOS and Android devices, and they’d like to play online courses that way, too.

You can give these learners exactly what they want, but not if your courses are Flash-based and directly accessible through an LMS (as opposed to playing through a proprietary or third-party app). Instead, the courses must be compatible with HTML5, which is the current standard of web browsers. HTML5 browsers feature a built-in (not plug-in) player that doesn’t support Flash.

The requirement to jump to HTML5 is relatively recent. About a year ago, backed by Apple and the major web browser providers, Adobe announced it would no longer support Flash in late 2020 to focus on HTML5. Of course, older browsers will still house the Flash Player plug-in, but the number of learners who continue to use these legacy browsers may gradually dwindle to zero.

If you haven’t already begun to do so, it’s time to say goodbye to Flash. Not only will your courses look and perform well in HTML5, they’ll be ready to play on touchscreen notebooks, tablets and smartphones. You still have a couple of years before you need to recheck each course for Flash-based objects, change or remove them, then upload HTML5-compatible versions to the LMS. But why wait? You can start now.

How to get ready When you decide you’re ready to make the switch to HTML5, you’ll have to make each slide object HTML5-compatible. This step will take time. It means swapping out rollovers for click boxes, SWF animations for images, FLV for MP4, and so on. You could remove the incompatible objects completely, but this may affect the timing of existing objects on the slide or the learner's understanding of the concepts.

If you regularly use elearning authoring tools like Adobe Captivate or Articulate Storyline, you should look in each course for the following items and change or eliminate them:

• Embedded FLV videos

• Rollovers or hovers

• Text animation

• AS2- or AS3-based animations (such as arrows and other shapes)

• SWF-based interactions (sometimes known as widgets)

Fortunately, most authoring tools have a tracking feature to tell you which slide objects won’t work in HTML5, so you can make the appropriate changes. If necessary, you can recreate some of the Flash-based animations as HTML5 versions in software like Adobe Animate (formerly Adobe Flash). Then, when you have no more incompatible objects, you can publish your course as an HTML package.

What else to consider

Before making your courses future-proof and mobile-ready with HTML5, consider a few things:

1. You’ll need to know what browsers your current learners are using. Some older computers may be running only Internet Explorer 8 or earlier, and these browsers aren’t HTML5-compatible. For these learners, you might continue offering a version of your original SWF course along with an HTML5 version (both published in the same SCORM output folder).

2. After making a course HTML5 compatible, test and retest the result on the computer and on various mobile devices. You might have to make additional changes if something isn’t looking or playing properly. In addition, it’s important to know that some HTML5 browsers don’t render every object effect or motion path the same way.

3. Keep an eye on the published file size. A mobile device usually won’t be able to play a course smoothly if it contains large-sized images, videos, and other items. So, when learners begin to play a course, they might have excess loading or buffering. As a result, some slides, slide objects or background audio might not play on time or at all.

4. In addition to enabling HTML5 compatibility, also think about reconfiguring the dimensions of the project. New flat-panel monitors, as well as all mobile devices, use a 16:9 or high-definition aspect ratio, instead of the traditional 4:3 or standard definition. For example, if your slide dimensions have traditionally been 800 x 600, consider changing them to 900 by 506—or even 1066 x 600; in the latter case, you won’t have to reposition the slide objects both horizontally and vertically, only horizontally. If dimensions go beyond 1280 x 720, your learners might have to reduce the browser view to below 100%, or else scroll down the browser window to find the control bar.

5. If a module is completely non-interactive—that is, without click boxes, buttons, drag-and-drop activities, knowledge checks or quizzes—you can use screen-recording software that captures the SWF presentation and outputs an MP4 file. Then embed the video into a blank slide and publish the result as an HTML5 package.

6. Finally, most courses can be more easily made tablet-friendly than phone-friendly. As a standard feature, today’s authoring tools have “responsive design” templates that can resize the screen for a particular device or preset dimensions. But you’ll have to simplify the slide design somewhat for smaller screens, so that the text and images are large enough to see and the interactive objects (such as buttons and click boxes) are large enough to click or drag.