Publish projects as HTML5 files with Adobe Captivate

You can publish Adobe Captivate projects for devices that support HTML5 such as iPad or iPhone.

You can also publish HTML5 output of projects to Adobe Connect. For more information, see Publish projects to Adobe Connect (available only in the update for subscription and Adobe Software Assurance customers).

From Adobe Captivate 8.0.1 and above versions, you can publish projects to PhoneGap without using a stand-alone App packager application. Publishing to Devices (app) menu item is integrated in Captivate. Follow the steps below: 

Create certificates and generate key

Certificates and authentication keys are essential for users to enable security for their accounts and prevent any unauthorized access. 

Create certificates for iOS

1. Refer to the apple developer support site and create an app developer certificate. 
2. Refer to the instructions on the PhoneGap build site to convert the certificates into supported P12 format and upload the certificates.

Generate keys for Android 

1. Refer to the instructions on the PhoneGap build site to generate and upload keys to PhoneGap build.

After you log in with PhoneGap user ID and password, click Next in Publish window, and provide certificate info in the dialog as shown below: 

Unsupported objects in HTML5 output

Objects in the project that are not supported in the HTML5 output get dynamically listed in the HTML5 Tracker. To view the tracker, click Window > HTML5 Tracker. When you delete or modify such objects in the project, the tracker too is updated.

The following objects and slides are not published in the HTML5 output:

• Text and SWF animations (only the first frame is visible).
• Mouse click animations (only one default click effect is supported).
• Slide transitions.
• Slide background if a SWF file is used.
• Audio attached to invisible objects.

            Note: FLV files that are created using On2VP6 codec only are supported in the HTML5 output.

• Object effects: The unsupported effects are marked with an asterisk (*) in the object effects list. The effects marked with double asterisks (**) are rendered differently in HTML5 output compared to a SWF output.

Hosting HTML5 output on web servers for iPad/iPhones

HTML5 output can be accessed on iPads/iPhones only through web browsers. Upload the entire HTML5 output folder to a web server root folder and make the URL available to your users. Your users can access the URL from their iPad/iPhone and view the content that plays within the web browser.

Webserver root for IIS: C:\Inetpub\wwwroot\

Webserver root for Apache: <Apache install folder>\htdocs\

Accessing HTML5 output from iPads/iPhones

HTML5 output is supported only on iPads with OS version 5 or later.

HTML5 output is supported only on the following browsers:

• Internet Explorer 9 or later

• Safari 5.1 or later

• Google Chrome 17 or later

Type the following URL in one of the above web browsers:

http://<webserver_hostname>:<port>/<HTML5_outputfolder>/

For example, if the HTML5 output folder is MyCpProject, the URL will be:

http://localhost:80/MyCpProject/

Best practices for creating Adobe Captivate projects for iPads

• Use the recommended project resolutions (presets) for iPad.
• Avoid overlapping audio in the project. If at all you need overlapping audio, read the article Adobe Captivate audio for iPad.
• In general, do not have too many overlapping media (especially very short ones) for movies that have to run on IOS devices.
• Disable button click sound as it may lead to unexpected behavior on iPad occasionally.
• Disable Scalable HTML Content in the Publish dialog box.

Adobe Captivate audio for iPad

Avoid using overlapping audio in your projects if they are to be used extensively on iPads.

If you use overlapping audio, the preferences to different types of audio are as follows:

Scenario 1: Different types of audio triggered at the same time

The sequence in this case is:

Object audio > Slide audio > Background audio

Object audio is played first, followed by slide and background audio.

On iOS 6, however, multiple audio clips can be played simultaneously.

Scenario 2: Two or more objects are assigned with audio and appear simultaneously in the Timeline

Audio of the object lower in the z-order of the timeline is played first.

• Case 1: Object 1 has audio for 0-4 seconds and Object 2 has audio for 0-8 seconds. Object 2 is lower in the z-order of the Timeline.

  Audio of Object 2 is played for 8 seconds and then Adobe Captivate checks if there is any other audio at that point (8th second) in the Timeline. In this case, there is no audio to be played at the 8th second. Therefore, audio of Object 1 is not played.

• Case 2: Object 1 is lower in the z-order.

  Audio of object 1 is played for 4 seconds. A check at 4th second indicates that the audio of object is for 4 more seconds. So, the audio of second object is played from the beginning. After 8th second when the second object’s audio is played, a check on the Timeline indicates that there is no more audio to be played.

Scenario 3: Object audio, slide audio, and background audio on a single slide

• Case 1: Object Audio is present from 0-4 seconds and Slide Audio is present at the same time. (no background audio)

  Object Audio is played first for 4 seconds and then the whole Slide audio will be played.

• Case 2: Object Audio is present from 2-6 seconds and slide audio is present at the same time. (no background audio)

  First Slide Audio will be played for 2 seconds, then Object Audio for 4 seconds and then Slide Audio again.

• Case 3: Object Audio is present 0-4 seconds, Slide Audio 0-8 seconds and Background Audio is present. (slide duration let say is 14 seconds)

  Object Audio is played for 4 seconds, then slide audio for 8 seconds, then the remaining slide duration background audio is played.

Adobe Captivate video on iPads

Avoid using overlapping video if your project is to be extensively used on iPads.

Scenario 1: Two or more videos on the same slide with different durations

Videos are played one after the other based on their order in the Timeline.

For example, consider that two videos are present on a single slide with the following durations on the timeline:

• Slide_Video1 from 0-8 secondsEvent_Video2 from 4-10 seconds

Slide Video will be played for 8 seconds and then Event Video

Scenario 2: When two videos start at the same time

Video that is lower in the z-order is played first. For example, consider that Video1 is present on a slide from 0-8 seconds and Video2 is also present on the same slide from 0-12 seconds.

• When Video 2 is present lower in the z-order, Video 2 is played for 12 seconds and the Video1 is never played.

• When Video1 is present lower in the z-order, Video1 is played for 8 seconds and then Video2 is played until the slide duration.

Download sample projects

To learn more about Captivate and how you can create engaging learning content, download the following projects:

• Safeguarding-and-PII Compliance
• Picture-Perfect Simulation
• Adobe Captivate Draft
• CloudAir SoftSkills
• Captivate 9 eLearning
• Adobe Lead Generation
• Adobe Captivate 2017 Training