How To Convert Flash eLearning Content To HTML5
Migrating your Flash eLearning content to HTML5 might seem straightforward. You already have the Instructional Design of the course and the narration recorded. And what is left is just moving them into an HTML5 environment! Well I wish this was true, bust the conversion project will not achieve its objectives unless it is thoroughly planned.
In the last 5 years, my company has received many requests to convert legacy interactive eLearning content that was developed in Flash to HTML5. After working on more than 100 learning hours of migration, we came up with the following list of tips to perform this task efficiently while reducing the costs involved.
We usually divide the job into 3 main components:
1. Conversion Of The Wireframe
This is the framework that holds everything together. It could be an authoring tool (Adobe CS6 with CreateJS, Adobe Captivate, Trivantis Lectora, Articulate Storyline, and so on), or a flexible custom HTML5 development designed specifically to suite your needs. If you choose to custom develop your wireframe, the following tips must be taken into consideration:
- Click and touch targets need to be large enough (recommended size 7mm by 7mm on screen).
- The main links including course menu should be grouped into the header.
- Always add a status bar below the header which shows the exact position of the user in the course.
- Play, Pause and Audio control buttons are that of the browser default player and they should appear only if they are required.
- Use icons that give clear visual instructions.
2. Conversion Of Look And Feel
The look and feel of a responsive web application is different than the non responsive look and feel. Pay special attention to arranging the layout so that all the information is presented with an optimal viewing experience across different devices.
3. Conversion Of content
And here lies most of the work, careful analysis of the entire content in vital at this stage, you should be able to match each of the legacy functions to a group of well designed web templates. Common interactive HTML5 eLearning templates include:
Accordion Template
Can be used to present information in interactive categories, and may contain text, images, and sound objects.
Charts Templates
Can be used to present content visually and allow for interactivity with the content to present related text, images, and narration.
Checklist Templates
Can be used to guide the student through a set of steps or a process; the student will check each part of the process, then go the next one with clear indications of the completed steps.
Comparison Templates
Can be used when the learner is presented with related content, and they need to know the deference and/or similarities between them.
Drag And Drop Template
Can be used to assess the understanding of learners with regards to an explained topic, and to make the learning process fun and effective. Checkout the 6 Ways To Use Drag And Drop Interactions In Your eLearning Course article by Christopher Pappas
Photo Gallery Template
Can be used to present related images or a progress of some kind; these templates are an efficient way to present a large number of visual content (images, videos, and graphics) on the same slide while providing visual teasers of additional items.
Glossary Templates
Can be used to group all terminology used in your eLearning course in an easily accessible header icon, or in the main course menu.
HotSpot Templates
Interactivities like hotspots on the screen are used in eLearning courses to engage and make the learners stay focused on the course. They ask the learners to click to know. When the user clicks, related information is displayed; this pattern allows the user to explore the information to keep them engaged.
SlideShow Templates
Are similar to the photo gallery templates, but move forward automatically to show the learner an ongoing presentation of a topic or a group of topics.
Video Templates
Present a video or an animation related to the content, and can also be used to get feedback by presenting a topic in a video then asking the learner for a feedback.
I hope these tips will help you to efficiently migrate from Flash to HTML5. If you have any questions, do contact me.
