Publishing Adobe Captivate Projects: SWF, HTML5, or Both?

by Kevin Siegel   

If you attend our Adobe Captivate Beginner class, you will learn how to publish projects as SWF (for desktop users) and HTML5 (for mobile users). 

 

Publishing in Captivate takes your source content and outputs it into a format that can be consumed (viewed) by the learner. Currently, the most common way to publish a Captivate project is as a Flash SWF, an excellent solution because SWF files provide the best multimedia experience for your learners. In addition, SWFs can be used by the vast majority of the world's desktop computers, laptops, and browsers. Your learners do not need Captivate installed on their computer to use an SWF, but they do need a modern web browser and the free Adobe Flash Player. According to Adobe, the Flash Player is installed on the majority of the world's computers.

Of course, SWFs have a problem. Learners using a mobile device that does not support Flash such as the iPad, iPod, and iPhone (that's millions upon millions of potential learners), cannot use SWF content. When trying to access SWF content, those learners will be met with a warning that SWFs are not supported. The only way around the warning is to use a supported device (meaning, those learners will have to access the eLearning content via a desktop or laptop computer... which might not be convenient or even possible).

 

As an alternative to SWFs, Captivate allows developers to publish content as HTML5. Lessons published as HTML5 play on any computer or mobile device that supports HTML5, including the Apple mobile devices.

 

A student in a recent Captivate class asked the following question: "If SWF's aren't supported on all devices, but HTML5 is, why not just publish HTML5 and do away with SWFs?"

 

That's an awesome question. While HTML5 may one day completely replace SWF, today is not that day. SWF is still a very popular multimedia format. And lots of cool Captivate effects that work great as an SWF simply do not work as HTML5. In addition, older web browsers don't support HTML5. A desktop learner using an old web browser would get a message saying that their browser doesn't support HTML5. (The reverse problem that a mobile user would have when attempting to access an SWF.) 

 

One simple solution to the old browser issue would be to ask everyone to upgrade their web browser. Simple? Hah! Because many private users, companies, government agencies, and educational institutions aren't in any rush to upgrade their web browser technology, it's not a viable solution at all.

 

So which publish format should you choose, HTML5 or SWF? For some developers, the answer is both. However, if you publish both formats separately, you'll have to provide two published lessons for your learners... SWF and HTML5 versions. Then you'll need to tell your learners to choose the best format. Great... except many learners won't know which format they're supposed to choose, which is only going to lead to confusion.

Wouldn't it be great if could publish a Captivate project as both SWF and HTML5, at one time, and then let the learner's device (not the learner) determine the appropriate output to use based on its capabilities? That solution would be perfect... so let's do it!

Open Captivate's Publish dialog box (File > Publish). From the Output Format area, select both SWF and HTML5 (enable both options).

 

 

Publish the project (when the Publish process is complete, there's no need to view the Output). Minimize (Hide) Captivate and then open the folder containing the published assets.

The assets folder will contain a combination of the SWF and HTML5 output files. If you've published SWF or HTML5, you're likely familiar with the output files. However, now that you've published both outputs at the same time, there's a new start file in the folder: multiscreen.html. 

 

 

If you make multiscreen.html the link for learners to click when accessing the lesson, desktop users who have Flash will automatically be served the SWF version of the lesson. Learners who are using devices that do not support Flash will automatically be served the HTML5 version of the lesson. How awesome is that?

 

***

Looking for training or help with Adobe Captivate? Check out these awesome live, online Captivate classes.

Comments

[Efrat]

Great, exactlly the answer I needed. Thanks!

[Shilpa]

Great Info! How can I make it work on the SCORM files?
And also, I am trying to use Glossary widget in my course, but that seem to open in any of the browsers when published in HTML 5. :(