5 Cost-Saving Tips for Your Flash to HTML5 Conversion

If you have a repository of Flash-based courses, converting them to HTML5 in a manner that is cost-effective, and rapid is more difficult than one might think. Without good foresight, considerations, and processes in place, a company is likely to end up with a bunch of courses that do not work properly and may require you to shell out additional cost due to unnecessary rework when converting Flash to HTML5.

How do you then keep from spending too much in order to achieve optimum results with your Flash to HTML5 conversion? How do you take advantage of this opportunity to strengthen your training content in the process? In this blog, I will share 5 tips for a cost-effective Flash to HTML5 transition plan.

5 Ways to Convert Flash Courses to HTML5 On a Budget

1. Leverage Existing Flash Interactivities and Animations

Interactivities add great value to your e-learning program, as they are the closest you can get to replacing the engagement an instructor brings to the classroom sessions. On the other hand, the use of animations makes the content easily digestible, as it simplifies complex ideas and tasks by offering a visual representation.

There is a good chance that your Flash-based courses have really high-quality interactivities and animations. Wouldn’t it be great if you could somehow keep them as-is when making the transition to HTML5? The good news is that you can. When converting Flash courses to HTML5 you don’t have to let go of these animations and interactivities altogether.

• Good rapid authoring tools (more on this later in the blog) such as Articulate Storyline can easily replicate Flash interactivities, saving both valuable development time and cost. Having said that, there may be some complex interactivities in your legacy courses that are difficult to replicate, or these interactivities may require more investment in terms of time and cost.
• For animations, if your Flash courses have a decent size and pixel resolution, you could record them too as videos in the MP4 format using recording software and use the video files instead of recreating the animations.

2. Consider Responsive Design and Recreate Content Layouts for Multiple Devices

On many devices, Flash courses don’t simply load at all, and even if they do, the courses would most likely breach the viewport’s width or would scale and be unusable. This is a serious limitation, given the fact that today’s corporate learners are on-the-go, ‘mobile’ learners, who prefer having access to training content on their fingertips using various kinds of mobile devices.

Having said that, to create separate courses for different devices would be time-consuming (and, therefore, costly). In order to save the cost of having to develop multiple versions of the courses for mobile devices, opt for responsive eLearning when converting your Flash-based courses to HTML5.

With responsive learning, you can create courses that are accessible on Android smartphones, tablets, iPhones, iPads, and laptops. It is a design approach for online learning where the course content automatically adjusts based on the screen size, platform, and orientation of the device it is being accessed on. Responsive learning is based on responsive web design (RWD), which has a single source file. Updates and additions need to be made only to the source file to reflect the changes across whatever device(s) you are developing the courses for. This way, you only have to develop one ‘base version’ of an e-learning course, which is economical than preparing multiple versions. (Adobe Captivate and Articulate Storyline 360’s responsive player are two tools that support responsive design out of the box.)

Another reason to consider responsive design for your converted courses is that it is an open standard adopted by the W3C, which means incorporating it in your converted courses makes them future-proof.

3. Pick a Rapid Authoring Tool That Minimizes Overall Development Time and Cost

An important aspect to consider when converting Flash courses to HTML5 on a budget is the choice of a rapid authoring tool. It’s not enough to evaluate a tool based on whether it can produce HTML5-based online learning—that is a given. But rapid authoring tools are more than just Flash-to-HTML5 converters, they come with features that can really cut down the development costs.

Minimize labor costs: While you can’t do away with the development process altogether (for which you still require the services of instructional designers), you can minimize labor costs related to creating images, badges, charts, stock footage, graphs, and animations—a pre-built collection that rapid eLearning authoring tools usually come with. This way you don’t have to spend time or money customizing the basic elements of your converted courses.

Use in-built templates: Another time-saving and cost-efficient aspect of authoring tools is their built-in templates. Templates provide the blueprint for your courses—the necessary framework for various slides. Instead of developing courses from scratch, instructional designers can make use of the templates to rapidly develop courses and, as a result, scale up the development process.

Leverage the tool’s libraries: Authoring tools also give you access to online template libraries, which include a wide variety of layouts, even including inbuilt games and interactive scenarios. So, if you wish to integrate scenario or game-based learning, the template libraries are a cost-friendly alternative.

Apart from this, authoring tools can be quite useful in terms of:

• Improving the outdated instructional design of your legacy courses
• Replacing non-intuitive interactivities with more meaningful alternatives (as discussed above)
• Translating Flash courses to multilingual HTML5-based online learning courses

4. Use a Style Guide to Reduce Reiterations and Guarantee Uniformity

It is highly possible that the Flash courses you possess were created a long time ago and, therefore, may not have followed a particular style guide. However, when you’re converting them to HTML5, provide the internal/external development team with a style guide to ensure the converted courses adhere to the branding guidelines currently being followed in your organization.

Consider the style guide as a well-commented markup: it gives the development team instructions for exactly how the course elements ought to be rendered. How should navigation aids look and function? How do interactivities behave? How to create the visual design and the UX design?

Having these specifications documented in a style guide is a timesaver, especially when you’re converting a series of Flash courses and you need them to look cohesive.

Here are some benefits of using a style guide:

• Offers consistency across the conversion project and gets everyone on the same page
• Saves time when you need to look up the color palette, slide layouts, fonts, and image styling, as well as set standards for treating interactive elements within the converted courses
• Provides a reference for future courses if you want to re-use the design

With everyone following the same guidelines and specs, it’s a whole lot quicker and easier to deliver a consistent product. While you could describe to the developers what and how you would prefer the converted courses to look like, when ‘time is money’ you’re much better off showing them exactly that using a style guide.

5. Outsource Flash to HTML5 Conversion to a Capable Vendor

The general impression among many companies is that having the in-house team convert Flash courses to HTML5 would save cost. But in reality, that doesn’t happen. Especially when time is key, this may not be a good idea. Why?

It is likely that the internal team may not have the required experience in converting Flash eLearning to HTML5 and also may not have the necessary skills to scale up the production as and when required. Even if you decide to train the team to handle all kinds of conversion projects, this only means an additional expenditure for your organization.

A couple of big advantages of outsourcing your Flash-to-HTML5 conversion are:

i. You will have access to a robust bunch of learning design experts, instructional designers, authoring tool experts, quality assurance analysts, project managers, and translators.

ii. They will have tried-and-tested project management processes that aim to scale up the conversion project as and when required, all while bringing down the conversion time and cost as much as possible.

iii. In case the source files of your Flash courses are missing or unusable, vendors can save your legacy courses by recording the Flash courses using a screen capturing tool, convert them to MP4 videos and make it multi-device accessible for your learners. If you have several Flash courses with no source files, the ‘Record’ conversion strategy saves valuable time and cost.

Vendors can extract content from the Flash courses using Microsoft One Note and Online OCR. These tools allow the extraction of content from existing courses without source files, which can be used to develop the HTML5 version.

There are three other cost-saving Flash-to-HTML5 conversion strategies companies can opt for based on the current state of their Flash courses. Read more about them here.

iv. When you outsource the conversion, you have the opportunity to improve the existing training programs, and relook the existing courses for sound instructional design. 

Concluding Remarks

With the onset of new-age learning, companies are looking to convert their outdated Flash courses to HTML5-based online learning for better accessibility and connectivity. If you are working on a budget, these five tips should help you cut down the overall costs drastically, allowing you to focus on getting the HTML5-based courses rolled out.