During 2017, in consultation with major technology companies such as Google, Microsoft, Mozilla, and Apple, Adobe announced its decision to drop Flash support by the end of December 2020. The driving factor behind this decision was the emergence of open standards and technologies such as HTML5, WebGL, and WebAssembly, which had significant advantages over Flash. These newer technologies offer improved security, power-efficiency, and speed in delivering interactive online content.

Over the past few years, we at ansrsource have helped our clients convert their courses from Flash to HTML, including one client that asked us to convert 14,000 e-learning assets. If you have courses and assets that need to be converted from Flash to HTML5, we recommend the following steps to simplify the conversion process.

Step 1: Map Flash Conversion Assets

To begin the process, use a spreadsheet to create a list of all assets that require conversion. You can capture the following information in your spreadsheet, typically called a Conversion Mapping Document (CMD):

• Asset Number
• Asset Name/Title
• Asset Type (content, video, etc.)
• Course
• Course Location
• Source Files Availability
• Source Files Location
• Conversion Type
• Comments

Additionally, you can capture any other information that you think might be useful in identifying and locating the assets that you will eventually convert. The goal of this step is to list all of the Flash assets that need to be converted to HTML5.

For our conversion project involving 14,000 e-learning assets, our client was proactive during this step. Although our in-house team is equipped to handle the conversion process end-to-end, the preparation of our client helped us to hit the ground running. Background work conducted by our client included:

• Gathering usage statistics for the Flash-based media interactives
• Developing templates or wireframes that were responsive, accessible, and reflected the client’s branding
• Creating a list of media assets that needed conversion and their location on the media serve

Step 2: Review the Asset

After you have mapped all the e-learning assets and identified the Flash pieces that need conversion, it is a good idea to spend some time evaluating these assets. During the evaluation, your goal is to identify the type of conversion that will be required. This will help you identify the scope of work and the effort that will be needed to transform your Flash assets to HTML5.

For example, during your evaluation, you may note that some assets work well as they stand and need only a simple conversion, some assets require revision work, and some assets are no longer useful. Classify each asset in your Conversion Mapping Document (CMD) using classifications like these:

For our client project, this step involved:

• Identifying pieces that needed the most learner involvement. This helped us identify assets involving high user interaction.
• Removing media pieces that did not need conversion, based on user data. We evaluated the assets that were not used as frequently and discarded those that were obsolete or no longer utilized.
• Categorizing the different media into buckets based on use, accessibility, and availability. This task was crucial because it allowed us to get a good idea of the tools and skills needed for conversion. It also helped us identify the appropriate CMD classification for each asset.

Step 3: Plan the Conversion

Most successful projects dedicate a significant amount of time to the planning and setting up phase. As the adage goes, “failing to plan is planning to fail.” When you have a handful of Flash assets, perhaps fewer than 10, you can get away with little to no planning because the work involved may not be extensive. However, if you are dealing with a large number of assets, you should dedicate significant time to planning your conversion project.

The primary goal of this step is to identify the priority for converting each asset. You can determine the priority based on your circumstances. For example, if you identify that most of your assets simply need Republishing, you may mark these assets for conversion first. However, if some of these are a higher priority than others, you may choose to split the assets into batches, with some being republished first, followed by the others. This step will help you identify a schedule and the type of expertise and hours required. More importantly, you will decide if you can handle the conversion on your own (in-house), with the help of freelancers, or if you’ll need to hire a vendor.

There are several advantages to doing a conversion project in-house, including higher flexibility in addressing sudden change in priorities or scope and greater control over the personnel involved in the project. However, doing a conversion in-house may not always be feasible if you have a large number of assets to be converted. A conversion project may also not be a good use of time or the right skillset fit for your team members. When you need good quality at scale and at an affordable price, you should consider approaching a vendor that specializes in large-scale migration of e-learning courses.

Because our client had several thousand assets that needed to be converted to HTML5, they hired us to help them with the conversion. We prioritized the order in which we scheduled our conversions:

• The highest priority was given to the interactives that had the most user involvement
• Next, we focused on the courses that were being revamped completely, followed by courses requiring minor changes
• Lastly, we focused on the standalone media assets that remained after the other conversions

Irrespective of the approach you use, once you have finalized the priority for all assets, the next step is to perform the actual conversion.

Step 4: Convert E-Learning Assets from Flash to HTML

This step of the process is where the bulk of work will be performed. While you were reviewing the assets, you marked the assets for conversion under one of these categories: Republish, Update, Redesign, Redevelop, Record, or Remove/Archive. The volume of work involved for each category, from high to low, is in this order: Redesign, Update, Redevelop, Record, Republish, and Remove/Archive.

Redesign

When the content in an asset or course is outdated and you decide to retain it, you need to take the Redesign approach. This is akin to creating the asset from scratch, so this effort will involve multiple areas of expertise: subject matter expertise, instructional design, graphic design, and so on. Some things to think about when taking this approach:

• What is the extent of content changes?
• Is the instructional design approach appropriate? For example, should a new approach be adopted? Should the courses be divided into smaller chunks?
• Should you update the design in addition to the content?
• Should you update the branding, including logo and theme?
• Would the course benefit from the addition of new videos, interactives, or infographics?
• Would some of the content benefit from a change in format? For example, can a video be presented as an interactive or infographic instead?
• Does any of the Flash interactivity have a better alternative in HTML5?

Our approach to redesigning the Flash assets for our client involved three steps, shown below:

While the overarching process was the same throughout the project, different media asset categories required different approaches to conversion, and this is exactly what we did. For example, you cannot use the same conversion technique for a video and a simulation. There are no standard approaches on converting Flash assets. You can use your choice of authoring tool or use HTML5 to rebuild assets from the ground up. Conversion processes using authoring tools such as Articulate 360 or Adobe Captivate differ from the processes used in modifying HTML5 templates. We used a combination of these approaches to handle the conversion.

Authoring tools can be used to create simulations or branching scenarios, but they cannot convert fully functional Flash-based simulations to HTML5 automatically. The Software Simulation option in a tool such as Adobe Captivate can also be used as a workaround to recreate a simulation. We recreated simulations from screen to screen using HTML5 templates, character sets, and other interactive elements including buttons and pop-up messages. Most of these elements came from the client’s asset library.

Redevelop or Update

When the content in a course or asset is relevant and requires little to no modification, you will be better served by redeveloping the content instead of redesigning it. This approach is used when the source files are not available or the courses/assets were created using a legacy tool that does not support republishing. This approach involves significantly less effort than the Redesign approach because there is not active involvement from subject matter experts (SMEs) or instructional designers (IDs).

An e-learning developer can replicate the Flash content in an HTML5 format using an authoring tool, and the assets can be redeveloped using an authoring tool of your choice. There are several authoring tools that offer HTML5 and SCORM support. The most popular of these tools are Articulate 360, Adobe Captivate, and iSpring. One of iSpring’s standout features is the ease with which PowerPoint slides can be converted to e-learning content.

There are several advantages to redeveloping content. In addition to ensuring that your content is converted from Flash to HTML5, you also reuse existing content to create assets and courses that look and feel as good as new. The new assets and courses are likely to have a wider browser and device compatibility.

The Update approach is similar to the Redevelop approach. However, in addition to rebuilding the Flash content in an e-learning tool, minor updates or changes to the content or design are made. This can involve minor changes to content such as updates related to policy changes or corrections to typos, updating visuals including course graphics or branding, and taking advantage of the features of the authoring tools.

Record

An easy method to convert Flash video files is to play back the video on your computer and use a screen capture tool such as Camtasia to record the screen and capture the content. In addition to using screen recording to record Flash video content, this is also an easy way to convert non-video Flash content to an HTML5-friendly format when the Flash asset involves little to no user interaction. This can prove to be a cost-effective conversion option for non-interactive content. In addition to converting to popular video formats, Camtasia also allows you to export screen recorded content as SCORM packages that can be published in HTML5.

For our client, we downloaded the SWF files for videos and animations, converted these using Swivel, and placed them in an HTML wrapper.

Republish

The easiest conversion method for Flash to HTML5 is to Republish. If you have assets that were created using a legacy tool or if you do not have the source files for these assets, you will have to use the Redevelop method. However, if the assets were developed using a newer authoring tool such as Articulate 360 (which does not have Flash dependencies), you can republish to HTML5 as long as you have the source files. Alternatively, if your courses were published with HTML5 output, you may not need to take any additional actions.

Remove/Archive

For the assets that are marked for removal, you can archive the source files and store them in a location that you can visit later if needed. Another option is to go through these courses to find assets that you may want to reuse in another course or as a standalone piece. If you have the source files, you can import them into the authoring tool and republish the desired portion to HTML5 or import the relevant section into a course that you choose.

The Challenges in Converting Flash to HTML5

You can run into several challenges while converting from Flash to HTML5.

• Some categories of media assets lend themselves to conversion more easily than others
• Availability of source files can impact the conversion technique used
• Flash assets might have interactivity that cannot or should not be replicated in HTML5

These challenges can be easily tackled by additional spending on effort or technology. For example, you would assume that a relatively simple task such as transcription would be smooth and easy, but we have found that an issue with the format of the script can spell trouble for the import process. So, we built a tool that can automatically convert all scripts to JSON for easy import.

Over time, we have learned that when working with large volumes of conversions, it is best to expect surprises. Another challenge that we have faced is the presence of assets that do not fit into any of the HTML templatized categories. Our team worked around this by batching all such outliers into a separate development sprint.

Celebrating Project Success

At the end of our client project, we had successfully converted the 14,000 legacy Flash assets to accessible, responsive, updated HTML5 content. The success of this project was due to a combination of several factors:

• Proactive communication between various stakeholders and the project team
• Collaborative working relationships that enabled early detection of project risks
• Focus on the end user or learner experience over short term gains
• Adherence to the project management framework

The need to convert Flash to HTML5 is inescapable. Happy conversion!