James Lockman's Technical Blog

Posts tagged "Captivate"

I had posted a fix for using Captivate 6 HTML5 projects in DPS. In that article, I showed how to remove embedded browser check code so that your project would render without a browser check in DPS. However, in Captivate 7, removing the browser check script from the index.html file doesn’t do the job. (If you have my DPS Examples app installed on your iPad, and you’re reading this blog on your iPad, then tap here to see examples of Captivate content running in a DPS folio.)

I asked the Captivate engineers if they had a trick up their sleeves, and this is what they delivered (thanks to Suresh Jayaraman and independently to Mayank Mahajan: if you see either of them, give them each a high five…)

Add the following line of text at line 2 or line 3 of the “AdobeCaptivate.ini” file .

SuppressIncompatibleBrowserMessage = 1

Publish the project to HTML 5

Now, the result is a folder with an index.html file. As I indicated in the earlier article, you can then make a Web Content overlay and point it at your index file. Another approach is to use the Captivate project as an HTML article rather than in a Web Content Overlay.

If you have portrait-only folio, rename the index.html file to index_v.html. If you have a landscape-only folio, rename the index.html file to index_h.html. If you have a dual-orientation folio, don’t change the name of the index.html file. In the Folio Builder panel of InDesign CC, click the “Add article” button and choose Import Article.

Enter your article metadata and then browse to the folder that contains your Captivate project, and then click OK.

InDesign will now seem to go into zombie mode, in which it will appear to be processing the HTML folder, but will never finish the task. The solution, which I outlined in another blog post, is to quit InDesign while it is hanging on the HTML import. Actually, what you need to do is to tell inDesign to quit, but don’t actually quit. Instead, wait, and InDesign will emerge from its coma and finish importing the HTML article.

Then, you can politely tell the “Do you really want to quit?” dialog that you do not want to quit, and your HTML project from Captivate will now be safely in your folio, with no browser check. Once published, your user will need to push the “play” button on the Captivate project to start it, which is annoying to be sure. I hope the Captivate engineers will allow us one day to auto play a Captivate HTML5 project, if only in our DPS folios.

I have many customers who ask whether eLearning and Adobe Digital Publishing Suite can play well together. While DPS isn’t designed to support Learning Management System (LMS) based course management and content delivery, it is possible to use HTML5 eLearning content in your DPS folios. In addition, it is possible to use Direct Entitlement as a method for restricting specific learner’s access to learning units. Ideally, you would add the entitlement APIs to your existing LMS, which would allow you to leverage your existing course management and reporting infrastructure with DPS as the delivery vehicle. Conveniently, Captivate 6 now supports HTML5 output for your eLearning projects and AICC reporting for your assessments. In this article, we will explore how to use Captivate to create HTML5 eLearning content for use in DPS. We will not explore how to integrate Direct Entitlement APIs with your LMS. (If you have my DPS Examples app installed on your iPad, and you’re reading this blog on your iPad, then tap here to see examples of Captivate content running in a DPS folio.)

It is important to create learning units that will fit on the iPad screen. iPad 1&2 have pixel dimensions of 1024×768, and New iPads have a pixel dimension of 2048×1536. Captivate has some project presets that are designed for iPad 1&2. You will notice that the projects have dimensions that are shorter than the height of the device. This allows for navigational user interface (UI) controls to be shown when the learner views the content. Since the Captivate Projects will be imported as Web Content Overlays in InDesign, you need to be sure to include an area for swiping to the next article or page, or perhaps InDesign buttons with navto:// hyperlinks that sit on top of the learning content so that the learner can use them for navigation.

Having properly sized your project, go ahead and create Video Demos, Software Simulations and Assessments with Captivate. Note that since many Captivate interactive elements are based on Action Script, they won’t work with DPS. Check the help system to see a comprehensive list of what does an what doesn’t work in HTML5. Fortunately, Captivate 6 includes an HTML5 preflight tool called HTML5 Tracker. It’s located under Window>HTML5 Tracker.

The HTML5 Tracker will check your project and report on any slides that won’t export properly. Use this tool for initial assurance that the project includes no unsupported features for HTML5 output. Having passed the first test, you should preview your project in a browser. Find this option under File>Preview>HTML5 Output in Web Browser. Be sure to check on a Webkit-based browser like Safari or Chrome, as DPS uses the embedded iOS Webkit browser for displaying HTML content.

If your project includes assessment, then you need to ensure that it is configured to use AICC results reporting and that your LMS can receive the reports from your project.

Having proven that your project works in a browser on your computer, it’s time to publish your project. Choose File>Publish. Disable SWF and enable HTML5. Disable Scalable HTML5 Content as well, since the learner won’t be able to resize the browser window on their iPad. Create a new folder in which to publish, and push the Publish button.

While normally a good thing, the index.html file that Captivate 6 makes includes a browser check. This browser check doesn’t know about the embedded webkit browser that DPS uses, so we need to remove it from the index.html file. Open it in your favorite text or HTML editor and remove the two script tags indicated below.

Having removed these tags, save the file and make a Web Content Overlay in your DPS project, point it at the index.hml file, and you’re done.

I have successfully tested this with quizzes, software simulations and software demos. There are many other use cases for Captivate, and I encourage you to explore eLearning with the potent combination of DPS and Captivate 6.