5 Inexpensive Solutions for Flash to HTML5 Conversion Challenges

Off late, there’s been a lot of buzz around the end of Adobe Flash. You must have seen notifications when you access browsers such as Google Chrome, stating that Flash components will stop functioning after December 2020.  Very soon legacy eLearning courses created using Flash or the ones created using older versions of authoring tools containing Flash-based components will cease to work. And the only solution at hand seems to be opting for Flash to HTML5 conversion.

For Flash-based eLearning courses with basic functionality that contain static text, graphics, simple videos, and audio, you can get 90% of the elements to work exactly as the original Flash-based course even after conversion to HTML5. But it’s advisable to be prepared for the glitches you might encounter when you’re converting some of these elements. Let’s look at five glitches that may crop up during Flash to HTML5 conversion of these courses and how you can solve them without overshooting your budget.

Inexpensive Solutions for Problems in Flash to HTML5 Conversion

1. Converting Flash Animations to HTML5

Adobe Flash is a software that allowed the creation of complex animations. If your Flash-based eLearning courses contain animations, you would want them converted to HTML5. However, using Adobe Animate to convert Flash interactivities to HTML5 isn’t a smooth process according to expert eLearning developers.

If the existing Flash animations do not require learner interaction, then consider converting these animations to the MP4 format and playing it as a video in your HTML5-based eLearning course, as it is an inexpensive solution. If the animation involves learner interaction then you might have to rebuild the animation from scratch, and this can be done using authoring tools such as Articulate Storyline, iSpring, Lectora, and Adobe Captivate.

2. Dealing with Non-compatible Interactions

One of the biggest advantages of Flash was that it allowed the creation of customized interactions using Action Scripts. But not all of these interactions can be replicated as is when converted to HTML5.  One of the biggest drawbacks of Flash was its incompatibility with multiple mobile devices. So if you’d like to make the course accessible to learners on their smartphones and iPads, then the only solution is to rebuild the interaction from scratch. Also, authoring tools may not have the capability to recreate all Flash interactions as they are and hence there’s a need to rebuild such interactions.

Now, when we talk of rebuilding interactions, the next thought that probably crosses your mind is the expense that’s involved. Thankfully modern authoring tools can execute this task without incurring huge expenses.

Consider the example of an interaction where the learner is required to hover the mouse over a hotspot on an image to view more information. For instance, when you’re teaching learners the different parts of a machine, on mouse hover learners see the labeling of the part and more information on it. This interaction is non-compatible when converted to HTML5 because:

• It requires screen space and works well for a desktop, but not mobile devices
• Mouse rollover or hover interactions do not work on mobile devices

Thankfully, with an authoring tool such as Storyline, this interaction can be modified to be presented as clickable markers on an image. The learner can tap each marker to view the label of a part and more information on it.

3. Applying Slide Transitions and Object Animations

Flash offered some cool object animation and transition effects. For instance, you can have slide animations in topic or agenda slides, or on a screen where an avatar is constant, but onscreen content keeps changing. Can similar transition and animation effects be applied when you convert Flash to HTML5-based eLearning?

Yes, most of them can be replicated using authoring tools such as Storyline and iSpring Suite. If you can extract content and media from SWF files (Flash-based courses) to PPT, then most of the default transition and object animation effects applied using PowerPoint can appear in your HTML5 eLearning as well. No doubt this is a process that will take time as you will have to extract content and media from Flash files. There are decompilers available to extract media such as images and buttons from Flash source files. You have the option of using tools such as OCR to extract text from images.

The Morph effect which is a strong animation feature in Flash can be replicated in PowerPoint and converted to HTML5 eLearning using authoring tools such as iSpring. Storyline 360 however does not support the Morph effect currently. If you decide to outsource Flash to HTML5 conversion, your eLearning partner should be able to help you choose the right authoring tool according to your project requirements.

4. Correcting Mismatches in Instructions

When you recreate interactivities, the existing audio extracted from Flash files may not match. Recall the example mentioned earlier where a mouse-hover interaction in Flash was converted to a clickable marker when recreated in Storyline. The audio instruction in the legacy Flash course might be instructing learners to hover their mouse over the image to view the labeling of each part along with relevant information. But surely this would be an instruction mismatch if added in the course that’s been converted from Flash to HTML5.

A cost-effective solution would be to not include audio for such slides where the interaction has been replaced. Simply add clear text instructions for the learner to read and then complete the interactivity. These instructions can be displayed in a consistent place on screen, following a consistent font style and color so that learners know where to check for instructions.

5. Providing Feedback for Assessments

Consider an example where your Flash-based eLearning course has an assessment where the learner is required to select multiple options. Action Scripting in Flash was used to display varied feedback depending on the combination of options selected by the learner. Let’s say if option 1 and 2 are selected, then the feedback displayed is ‘x’ and if option 2 and 3 are selected then the feedback displayed is ‘y’.  While it is possible to recreate this in HTML5, an inexpensive solution would be to consider using a generic feedback irrespective of the option selected.  The feedback can restate the right answer and this helps reinforce learning. This kind of simple feedback mechanism can be made instructionally effective. The latest authoring tools also allow the inclusion of video snippets that can offer in-depth feedback. 

Conclusion

The process of migrating Flash eLearning to HTML5 isn’t easy. You can definitely expect some challenges along the way. While converting to HTML5-based eLearning is a must, sometimes you may not be able to get Flash components converted as they are, into HTML5. But there’s always an alternative and the solutions don’t have to be as expensive as you think it might be. With effective project management, an important aspect in Flash to HTML5 conversion projects, you’ll surely be able to manage these conversion challenges effectively.

If you’re looking for a quick reference guide on Flash to HTML5 conversion, don’t forget to check the webpage mentioned below.