“Help, I need to update my course, but I don’t have the source file. All I have is a link!”
This is a common issue. Here’s a solution that may work for you and it’s generally easy to do.
How to Convert the Course to HTML5
The secret to all of this is screen capturing your old e-learning courses. You can do what I am going to show with a number of tools. For example, Storyline has a screen capture feature where you can bring in one screen at a time. That works fine for smaller courses.
For this demo, I am going to use Screen2Gif because it works well for this demo that has a lot of slides, it’s easy to use, and it’s free.
Below are the basic steps. The video above has more detail. Essentially, we’re going to capture the old course screens, bring them into PowerPoint as images (because we can do a simple batch import), and then we’ll import the PowerPoint slides into Storyline.
Once inside of Storyline you can add interactive elements and additional content.
Basic Steps for Converting the Old Course
- Determine the original course slide resolution. Don’t include the player; just the slide. Most courses are usually 4:3 or 16:9.
- Create a PowerPoint file at the same resolution as the course images.
- Create a Storyline file at the same resolution as the PowerPoint file.
- Go through the course using a screen capture application. This will capture all of your course screens. If you have interactions, you’ll go through those as well. You want a copy of every possible screen. Just click on everything clickable. I’d even go through the quizzes, just so you have the screens. You can use that content later.
- Review the screens you captured and get rid of duplicates.
- Save the separate frames captured as image files.
- Batch insert the screen capture images using the album feature in PowerPoint. I like to force them to fit the slide. That way I don’t need to do any adjustments. Things should be aligned.
- Import the PowerPoint slides into Storyline.
- From there, it’s a matter or making some edits and adding interactions, quizzes, and whatever else the course requires.
- For example, you could take the screen for a tabs interaction and combine them into one slide with layers for each tab. Then add hotspot triggers to the layers.
Example: Course Converted to HTML5
I created an example course using the steps I outlined above. For the demo, I copied the old course screens and created new slides Storyline. Then I published in HTML5. It only took about 10 minutes and considering the time spend, looks pretty decent.
It’s definitely a good solution for a lot of the old compliance training that needs to go from Flash to HTML5, or if you need to update a course and don’t have the source files.
Obviously, the best solution is to rebuild the course from scratch. That works fine if you have a handful of courses. But if you have dozens (or hundreds) that need to be converted to HTML5, then this is a viable solution for many of those courses.
Download the fully revised, free 63-page ebook: The Insider's Guide to Becoming a Rapid E-Learning Pro
Upcoming E-Learning Events
- February 12 (London): Articulate User Meet Up.
- February 13-14 (London): Learning Technologies. Swing by booth H50 and say hello.
- February 15 (Edinburgh): Articulate User Meet Up.
- March 26-28 (Orlando). Learning Solutions Conference. Swing by the booth and say hello.
- April 10 (Madrid): E-Learning Bootcamp. Details coming soon.
- April 12 (Milan): Digital Learning Tour. My workshop day will be in English. You can sign up for just my session if you don't want the entire package.
- May 19-22 (Washington DC): ATD International Conference & Expo. Stop by and say hi.
- June 3 & 4 (Toronto). Details coming.
- June 6 (Halifax). Details coming.
- We're currently working on additional locations and dates for 2019.
Free E-Learning Resources
Want to learn more? Check out these articles and free resources in the community.
Here’s a great job board for elearning, instructional design, and training jobs
Participate in the weekly elearning challenges to sharpen your skills
Lots of cool elearning examples to check out and find inspiration.