7 Steps to Convert Flash to HTML5

Many organizations are now realizing the need to make their eLearning content available through smartphones and tablets. They wish to implement mobile learning by making their e-learning courses accessible through mobile devices. But the e-learning courses that run on desktops do not run on iPads or the latest version of android tablets, if they were developed using Flash. The reason being Flash based courses are not supported by iOS versions. Hence, there’s a need to convert Flash to HTML5.

It is, indeed, a challenge to convert courses that are developed using Flash. What can be done in such cases? Do you discard such useful resources? Do they need to be re-developed right from scratch to make them compatible? Well, converting them into HTML5 format is a good option.

How Do We Convert Existing Flash Courses to HTML5?

Here are the 7 steps involved in migrating existing Flash courses to HTML5. It just takes 2 to 3 weeks to re-create a course similar to Flash course using authoring tools.

Step 1: Make sure that all source files are available

You need to ensure that all media and other supporting files of the existing course are available before conversion. These may include .FLAs, XML, JavaScript and media files such as audio and videos. Having all files at one place will ensure effective and quick conversion of Flash to HTML5.

Step 2: Extract content and media from existing course

Once you have all necessary files, you have to extract the content and media from the legacy course. You need to copy the on-screen text content and the labels of all navigational buttons in the Graphical User Interface (GUI), in MS-Word document or PowerPoint presentation which can be used as a storyboard.

You also need to copy the media elements such as audio, video, graphics etc and store them in a structure of folders. It is also necessary to copy learning resources in the form of PDF files and MS-Word documents.

Step 3: Select authoring tool to convert your course into HTML5

You can convert your existing Flash e-learning content to HTML5 using various authoring tools available in market. These tools help in the smooth transition of your existing Flash-based training material into HTML5, and retain the interactivities that were adopted for e-learning course.

Here are some popular authoring tools that can help in converting Flash to HTML5 and transform your existing eLearning into mLearning.

1. Articulate Storyline
2. Adobe Captivate
3. Lectora Inspire
4. iSpring

Step 4: Finalize GUI and interactivities based on branding

Once you have chosen the authoring tool, it is time to decide on the GUI and the interactivities in the converted course. This is important because the GUI of the HTML5 course may not be similar to that of the legacy eLearning course. Some interactivities developed in Flash cannot be created in authoring tools. In such cases, you need to choose alternatives. For example, some complex animations can be converted into videos.

Step 5: Identify right templates to develop interactivities

Templates play a key role in effective development of online courses quickly and at low cost. The job of the instructional designer is made simple, as the necessary framework for designing the digital course has already been created. They lend consistency to the courses and can be modified to make the course look unique.

Step 6: Develop a prototype resembling the actual course

Once you finalize the templates, the next step is to create a prototype. The prototype needs to resemble the “actual course” and help stakeholder/client to get a clear picture of how the course looks like when it is fully developed. Any improvements and alterations needed, can be identified at a very early stage, and this reduces rework.

Step 7: Develop the course and publish it

This is the last step in the conversion of a legacy course into HTML5. After the prototype, the next step is to develop the “complete course” and publish it to the HTML5 format, using the selected authoring tool.

Apart from converting Flash to HTML5, another challenge for organizations is with multiple browsers and versions. Most problems are associated with IE6 & 7, which a huge number of organizations are still using. Organizations may not be inclined to move toward advanced versions of browsers that supports HTML5 content.

Online courses can be published to both Flash and HTML5 . When learners access courses in IE 6 or 7, they can see the Flash course which does not support HTML5. If they are using the latest versions of the browsers, they will see HTML5 output.

Conversion of Flash-based courses to HTML5 can be made simpler by following these 7 steps.