Home > Flash to Html5 Elearning Conversion

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.

Contents

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.
Never miss a post! Share it!

Author
Written by
CTO / Department Head / Partner
I've been leading a department specializing in eLearning applications and Business Intelligence for 14 years.
5.0
1 review

Rate this article

Belitsoft Blog for Entrepreneurs
10 eLearning Games Ideas

An idea is only as good as its implementation. So in this article, we will list several eLearning games that...

Gamification in eLearning

This article will explain what Gamification actually is, describe its advantages and potential risks based on scientific studies, tell you...

How to Launch a Game-Based Learning Startup

The most profitable country for serious games is China, followed by the USA and India. However, by 2022, the United...

How to Сreate Game-Based Learning in Your Corporation

What do you need more as a learning manager? Creating functional content and delivering it on a basic learning platform?...

Gamification vs. Game-Based Learning

Gamification and Game-based learning have been trending for the last decade or so. However, these terms are still used interchangeably...

Portfolio
Supplemental Education for K-12: Game-based eLearning Platform For Selling Math Training for Kids
Supplemental Education for K-12: Game-based eLearning Platform For Selling Math Training for Kids
We developed custom game-based learning platform for elementary mathematics, Dutch language and their exams for our customer - an educational business owner from the Netherlands.
Game-based eLearning Platform For Selling Online Fast Typing Course
Game-based eLearning Platform For Selling Online Fast Typing Course
We developed custom game-based online typing course for our customer - instructional designer from the Netherlands.

Testimonials

tichen

I expected and demanded a lot of you at Belitsoft company, but you exceeded my expectations. You acted pro-actively, challenged me at the right moments. Thanks!

Martin Beijer

CEO at Ticken B.V. (Netherlands)

EFI

We have been working for over 10 years and they have become our long-term technology partner. Any software development, programming, or design needs we have had, Belitsoft company has always been able to handle this for us.

Bjarne Mortensen

СEO at ElearningForce International (United States, Denmark)

Crimson

They use their knowledge and skills to program the product, and then completed a series of quality assurance tests. We were working in an agile way with them. Belitsoft performed very well throughout our project. We are definitely looking at Belitsoft as a long-term partner.

Eddie Nicholas

Service Delivery Director at Crimson (United Kingdom)

Berkeley

I highly recommend Belitsoft for website design and development. We were up against a tight deadline to launch the project. The work was delivered on time and within budget! I will continue working with Belitsoft as a valued partner for our web development!

Adrienne Herd

Program Administrator at UC Berkeley (United States)

Hathway

We have worked with Belitsoft team over the past few years on projects involving much customized programming work. They are knowledgeable and are able to complete tasks on schedule, meeting our technical requirements. We would recommend them to anyone who is in need of custom programming work.

Kevin M. Rice

Main Partner at Hathway Tech (United States)

Howcast

Belitsoft company is able to make changes instantly. One of our internal engineers has commented about how clean their code is. Belitsoft seems to know what they're doing, which I appreciate.

Darlene Liebman

Co-Founder at HOWCAST MEDIA (United States)

Fraunhofer

It was a great pleasure working with Belitsoft. Software Development Company. New requirements and adjustments were implemented fast and precisely. We can recommend Belitsoft and are looking forward to start a follow-up project.

Renè Reiners

Deputy Head of Division at Fraunhofer FIT (Germany)

Apollo Matrix

Belitsoft company has been able to provide senior developers with the skills to support back end, native mobile and web applications. We continue today to augment our existing staff with great developers from Belitsoft.

Pete Johnson

CEO at Apollo Matrix (United States)

Key2Know

Belitsoft company delivered dedicated development team for our products and technical specialists for our clients time to time custom development needs. We highly recommend that you use this company if you want the same benefits.

Bo Sejer Frandsen

Managing Director at Key2Know A/S in 2012 (Denmark)

Regen Med

We approached BelITsoft with a concept, and they were able to convert it into a multi-platform software solution. Their team members are skilled, agile and attached to their work, all of which paid dividends as our software grew in complexity.

Nicolas Tierney

COO at Regenerative Medicine LLC (United States)

Moblers

Having worked with Belitsoft as a service provider, I must say that I'm very pleased with the company's policy. Belitsoft guarantees first-class service through efficient management, great expertise, and a systematic approach to business.. I would strongly recommend Belitsoft's services to anyone wanting to get the right IT products in the right place at the right time.

Guy Doron

CEO at Moblers (Israel)

Showcast

If you are looking for a true partnership Belitsoft company might be the best choice for you. They have proven to be most reliable, polite and professional. The team managed to adapt to changing requirements and to provide me with best solutions. I strongly recommend Belisoft.

Ivo Downes

Director at ShowCast Limited (Germany)

Let's Talk Business
Do you have a software development project to implement? We have people to work on it. We will be glad to answer all your questions as well as estimate any project of yours. Use the form below to describe the project and we will get in touch with you within 1 business day.
Contact form
* Maximum file size is 20MB
to top