Flash to Html5 Elearning Conversion

Adobe, the company responsible for Flash, stopped supporting it. So if you want your Flash content to be usable in the years to come, you would do better to convert it to HTML5. This article will explain how exactly you can do it.

How Belitsoft Can Help

We offer: 

• Recording your Flash-based content as a video file and reuploading it to your eLearning system (e.g. LMS).
• Remaking the necessary course including elearning games with HTML5. This option is available even if you don’t have Flash source files.
• Redeveloping the content from the ground up using the latest advancements in UI/UX and compatibility with modern eLearning standards

Example of Flash to HTML Conversion

This is the latest case of our work on converting Flash content to HTML5.

Our customer was a serial entrepreneur in the eLearning domain. We have worked on three projects with him, so it is no wonder that he chose us to convert his flash-based content to a new format. 

Approach

We were tasked with converting a touch-typing course. It was largely Flash-based, as most of it was dedicated to practical exercises and learning games. There was also some video content. 

The course was extremely successful, with over 100.000 satisfied customers. It allowed people to learn touch-typing in just 15 hours and utilized modern teaching methods. As such, it didn’t need an in-depth rework, so we decided to convert the course as-is. 

Process

The conversion process included the following stages:

• Course audit.
• Authoring tool selection.
• Conversion.
• Testing.

Challenges

The biggest conversion challenge was remaking the learning games, as we weren’t able to just switch them to HTML5 through authoring tools. However, we had gained a lot of experience in serious games and even developed our own game engine while working on another project. This helped make the transition smooth. 

Result 

As a result, the course was completely converted to the new technology while keeping all its competitive advantages intact. The online version was replaced seamlessly, without any negative effects on sales or academic effectiveness.

Why HTML5?

The new de-facto standard in rich eLearning content is now HTML5, which is the technology you should switch to. Besides the inherent drawbacks of Flash, the new option has its own advantages:

• Works everywhere. HTML5 is supported by all browsers on all modern devices. It is included by default, whereas Flash has to be installed separately.
• More powerful. The newer technology can provide better graphics and animations.
• Better security. Flash has always been notorious for having a ton of vulnerabilities. HTML5, on the other hand, won’t allow hackers to take over your computer.
• New norm. HTML5 is popular with eLearning developers and other similar professionals across the globe. This implies community support and a wide pool of contractors to choose from. 

Pros of converting Flash to HTML5 by outsourcing

If you are reading this article, this probably means you don’t have an in-house development team capable of making the transition. So you will have to turn to third-party providers. Here is what you gain by working with them:

• Lower price. For various reasons, outsourcing companies tend to be less expensive than in-house developers. Our development center, for example, has a favorable tax regime that allows us to offer lower prices without compromising the quality.
• Experience. There are many companies that specialize in eLearning and have already done jobs similar to what you need. They have experience working with relevant authoring tools and can finish the work faster.
• Manpower. Larger outsourcers can dedicate many people to your project and complete it quicker. 

Of course, getting these benefits would depend on the company you choose to work with. Make sure to select the one with experience and a good reputation, as evidenced by client reviews on independent sites (e.g. Clutch) and portfolio cases. 

Cost reduction techniques

This is what you can do to save money on converting Flash to HTML5.

• Recording animations. If your existing flash animations are good, you shouldn’t abandon them. Use the recording function in your authoring tool to capture them and transfer them to the new version of the course.
• Reusing content. Depending on the approach you chose, your visuals might need an update. However, there will definitely be elements that are alright as is. They can be transferred to the HTML5-based course.
• Reusing rich media. Audio and video recordings used for your course don’t always have to be rebuilt. New authoring tools allow upgrading them, which will save you time and money.
• Use templates. eLearning templates will save you a ton of time on planning layouts. Just select the fitting ones for each type of slide (video, text, quiz, etc.).

Choose the appropriate conversion strategy

Once you’ve decided to abandon Flash in favor of something new, there are three ways you can go. 

• Record as video. If your course doesn’t have any interactive elements, it can be recorded and reuploaded to whatever eLearning system you use. This is the simplest and cheapest option but it is also the most limited.
• Convert as is. If you are satisfied with everything that the course does but want to transition to a new format, you can use a modern authoring tool to change the content to a modern format. Such tools include Articulate Storyline 360, Adobe Captivate, Lectora Inspire, and more.
• Redevelop. This option implies either restructuring the course and updating it with new information and teaching approaches (e.g. gamification and microlearning) or rebuilding it from scratch. It is the best one if your course has long been in need of an update. It is also the most expensive of the three but can be made cheaper by reusing content and applying modern templates.

Flash-to-HTML5 Conversion Process

1. Course audit

In the case of a company having several learning programs, the management needs to take stock of them. This is important for choosing the courses for conversion and selecting the appropriate ways to approach the process. 

Some courses would take priority. These could be, for example, compliance training programs (in the case of the internal corporate training) or the biggest moneymakers (in the case of commercial educational programs). 

In addition, this is the time to choose content that could be reused in the newer versions. After all, why spend extra money to remake something that already does its job?

2. Choosing the right tools

If you just need to turn Flash into video, a screen recorder capable of making high-definition videos would suffice.

If your company uses authoring tools to make more eLearning content, perhaps they will be appropriate for the conversion. Check the feature list to see whether they can turn Flash into HTML5-based content. 

However, if you need to make large-scale changes in your content and don’t have relevant specialists on staff, you would be better off contracting an eLearning development company. This would be faster and more cost-effective than learning how to work with authoring tools yourself or building a new department from scratch. 

3. Conversion

Once the preliminary work is complete, it’s time to get to the actual conversion. While the process is relatively straightforward with recording and direct transition from Flash to HTML5, redevelopment requires much more work. It would include instructional design, creating templates, and likely prototyping. 

If you hired somebody to do this work for you, you could make the process faster and cheaper by providing the contractor with as much information and data as possible. Flash files (.swf and .flv),  .xml files, media content, storyboards - each piece can speed up the process, and such work is usually priced by the hour. 

Another thing you could do to help convert your courses faster is making a communication plan that would determine the availability of the subject matter experts. Your contractor would likely be proficient in eLearning development work but not in the topic of the course itself. Having regular meetings/calls with the subject matter experts would ensure that they get the information they need and use it to give you their best work.

4. Testing

Rechecking everything and making sure it works as intended. There are many things that need to be in order:

• Functionality
• Visual consistency
• Visual fidelity
• Mobile compatibility
• Content accuracy
• Etc.

Quality assurance is not just a stage in development. It is a way of working and a set of policies. If you contracted an eLearning development company, make sure that they have the right approach to this (evidenced, for example, by ISO 9001 certification or the like).

Choose the right rapid eLearning authoring tool

If you have decided to handle the conversion yourself, you need to select the correct instrument for it. Adobe has announced the Flash deprecation date three years in advance, so many authoring tool developers have implemented the conversion functionality in their products for their users’ convenience. 

These are some of the most popular options:

• Adobe Captivate. Developed by the same company that maintained Flash, it is a solid choice for conversion. Captivate can be a little complicated to learn. But it allows making good simulations and has a convenient HTML Tracker feature that lists all unsupported objects for each slide, saving you time on locating problems.
• Articulate Storyline. This authoring tool allows for the easy creation of interactive elements. It also is very straightforward to learn and use. A large library of free extra content (characters, pictures, etc.) would make converting to HTML5 easier.
• Lectora Inspire. One of the best choices for text-heavy courses, thanks to its innovative approach to displaying information. It is also useful in the cases when you need to translate eLearning content, as it has dedicated options for that.
• iSpring Suite. This tool can quickly create PowerPoint-based courses, as well as converting Flash to HTML5. It has a wide variety of templates to save time on the conversion without compromising the visuals.

Best Practices

These are the best practices you can use to ensure your courses are converted on time and within budget.

• Share everything. All the course information you have - source files, storyboards, video, etc. - should be given to your vendor in advance. It would help them estimate the work more precisely and do it quicker and cheaper.
• Keep time zones in mind. Your vendor might have a development center far from you, and the time difference should be taken into account. Use this to your advantage by sending requests and the reviewed materials to the time the vendor’s workday begins.
• Compartmentalize. Break the conversion process down in a way so that each time period ends with specific content delivered. This will help you get some of the courses updated faster and figure out the most optimal working process for your case.
• Set up the risk management process. Any project carries certain risks. Establish clear procedures that you and your vendor need to go through to address those risks.
• Use collaboration tools. Applications like Lectora ReviewLink and its counterparts for other authoring tools allow for quick and precise reviews of prepared content. You can leave specific comments and expect them to be addressed ASAP.

Testing, as an integral part of any development work, has its own set of best practices.

• Create a style guide. This will help ensure visual consistency throughout all the courses that need conversion.
• Create a review team. Put together a group of people - subject matter experts, stakeholders, etc. - and have them review the converted content. Each person should check the elements that they specialize in.
• Test on mobile devices. Most of the development work is done on desktop/laptop computers. Check it on smartphones and tablets to ensure the converted course looks and runs well there.