Publish projects as HTML5 files with Adobe Captivate
HTML5 Publishing options and output formats in Captivate.
You can publish Adobe Captivate projects for devices that support HTML5 such as iPad or iPhone.
To publish a non-responsive project, open the project and then click File > Publish or on the button bar, click Publish > Publish to Computer.
To publish a responsive project, open the project and then click File > Publish or on the button bar, click Publish > Publish for Devices.
For information on publishing responsive projects, see publishing responsive projects
If you have used Typekit fonts in your project, a pop-up appears that confirms that there are Typekit fonts in the project.
On the window, click Next.
If the project is responsive, you can see the following dialog:
If the project is blank or non-responsive, you can see the following dialog:
To publish the project, click Publish.
To view the project assets, navigate to the specified folder, and you can see the following assets:
After publishing, do the following:
If your project contains links to external files (Open URL Or File action), copy the files to the output folder
If your project contains a link to another Adobe Captivate project (CPTX), copy the project to the Callees folder in the output folder.
(Optional) To hide the rectangles that appear when objects are clicked in the HTML5 output, select Hide Selection Rectangle For Slide Items In HTML5 in Preferences (Edit > Preferences > Publish Settings).
You can view the Interactions in the project only when you view the HTML5 output hosted on a web server. Interactions are not visible when you view the published output locally on your computer.
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).
Publishing projects as apps to devices
PhoneGap is NO LONGER supported.
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:
Choose Publish for Devices (App) from Publish menu.
Note: You can follow the same steps in responsive and non-responsive projects.
A dialog appears as follows:
Log in using PhoneGap user name and password or use your Adobe ID login credentials to log in to your PhoneGap account. Click Register to register for PhoneGap or Adobe ID accounts if you do not have an existing account.
Choose App> Create New for new application.
Choose App> Update if you are updating an existing app in PhoneGap.
Mention the version number, name of the app and the Package name for the app. While mentioning the package name, ensure that you give unique package name otherwise the existing project is replaced.
Click More to choose your personal publishing preferences for the app, like geolocation, gestures, and accessibility.
Click Next to provide the required certificate information for your app. You can choose iOS or Android or both by clicking the check boxes adjacent to them and provide certificate information corresponding to each platform.
Refer to Create certificates and generate key section for more information.
Click Publish to publish the output as apps for devices.
Adobe Captivate uses the PhoneGap service at the backend to build the app. After the app is built, you are prompted to download the app as shown in the snapshot. Once you click the download, you can see PhoneGap site.
If you want to compile your eLearning course as an iOS application, you need to be registered as an Apple developer and pay the annual Apple Developer fee.
This will give you access to the Apple Developer website where you will be able to access your Apple signing certificate.
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
- Refer to the apple developer support site and create an app developer certificate.
- 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
- 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:
AppleKey title in the above snapshot represents the certificate name that you uploaded in PhoneGap build. Your certificates are populated in the Title drop-down after you upload them in PhoneGap build website. Similarly, the keys you uploaded to PhoneGap build appear in Title drop-down. You can continue to publish even if you do not have keys for Android by choosing No key selected option.
If you remove preferences of Adobe Captivate, then you have to create certificates again.
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:
For example, if the HTML5 output folder is MyCpProject, the URL will be:
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.