User Guide Cancel

Publish projects as HTML5 files with Adobe Captivate Classic

  1. Captivate Classic User Guide
  2. Introduction to Captivate
    1. What's New in Adobe Captivate
    2. Adobe Captivate System Requirements
    3. Responsive Project Design with Adobe Captivate
  3. Captivate Classic Release Notes
    1.  Adobe Captivate Classic 11.8.3 Release Notes
    2. Adobe Captivate Classic 11.8.2 Release Notes
    3. Adobe Captivate 11.8.1 Release Notes
    4. Adobe Captivate 11.8 Release Notes
    5. What's New in Adobe Captivate (2019 release) Update 5
    6. What's New in Adobe Captivate (2019 release) Update 2
    7. Adobe Captivate Release Notes
  4. Create Projects
    1. Create different types of projects in Adobe Captivate
    2. Customize the size of an Adobe Captivate project
    3. Responsive Project Design with Adobe Captivate
    4. Create Virtual Reality (VR) projects
    5. Work with responsive text in Adobe Captivate
    6. Work with themes in Adobe Captivate
    7. How to apply view specific properties in responsive projects
    8. How to create backup files for Adobe Captivate projects
    9. Asset panel
    10. Create branching and forced navigation in Captivate
    11. Replace image on the stage
  5. Add and Manage Objects
    1. Work with multi-state objects in Adobe Captivate
    2. Object effects
    3. Insert web objects in Adobe Captivate projects
    4. Work with object styles in Adobe Captivate
    5. How to rotate objects in Adobe Captivate
    6. How to manage objects with the Main Options toolbar
    7. How to merge objects in a slide
    8. How to manage objects in the library
    9. How to group objects in Adobe Captivate
    10. Edit object information using the Advanced Interaction panel
    11. How to copy, paste, and duplicate objects in Adobe Captivate
    12. Control the visibility of objects
    13. How to change the display order of objects in Adobe Captivate
    14. Apply shadows to objects
    15. How to align objects in Adobe Captivate
    16. How to add reflection to objects in Adobe Captivate
    17. Import assets into a Captivate project
  6. Slides
    1. Add slides to an Adobe Captivate project
    2. Editing slides in an Adobe Captivate project
    3. Delete Adobe Captivate project slides
    4. Change slide order in Adobe Captivate
    5. Set slide properties in Adobe Captivate
    6. Add and convert slide notes to audio files with Adobe Captivate
    7. Set up knowledge check slides in Adobe Captivate
    8. How to add slide transitions in Adobe Captivate
    9. How to work with master slides in Adobe Captivate
    10. How to lock Adobe Captivate slides
    11. How to hide or exclude slides in an Adobe Captivate project
    12. How to group and ungroup slides in Adobe Captivate
  7. Timeline and grids
    1. Use rulers and guides
    2. Work with grids in Adobe Captivate
    3. Work with the timeline
    4. Shortcut keys in Adobe Captivate
    5. Working with the filmstrip
    6. How to customize the Adobe Captivate workspace
    7. How to use the Adobe Captivate Library
    8. How to use the Branching panel in Adobe Captivate
  8. Create Quizzes
    1. Insert question slides in Adobe Captivate projects
    2. Set quiz preferences for Adobe Captivate
    3. How to enable learners to submit all quiz responses simultaneously
    4. How to set up question slides with Adobe Captivate
    5. Using random question slides in Adobe Captivate
    6. How to allow users to return to quiz
    7. Import questions from CSV format files
    8. Import questions from GIFT format files
    9. How to insert pretests in Adobe Captivate
  9. Audio
    1. How to insert audio into an Adobe Captivate project
    2. How to preview audio in Adobe Captivate
    3. How to edit audio files with Adobe Captivate
    4. View audio details in Adobe Captivate
    5. Set audio recording preferences and recording audio
    6. How to export audio from Adobe Captivate
  10. Video
    1. Slide videos
    2. Work with event videos in Adobe Captivate
    3. Differences between events and synchronized videos in Adobe Captivate
  11. Interactive Objects
    1. Add interactive buttons to your Captivate projects
    2. Create click boxes in Adobe Captivate
    3. Add text entry boxes with Adobe Captivate
    4. How to add audio to boxes and buttons
    5. How to add JavaScript to boxes and buttons in Adobe Captivate
  12. Interactions
    1. Create drag-and-drop interactions in Adobe Captivate
    2. Use Adobe Captivate variables in widgets
    3. Set the properties of widgets with Adobe Captivate
    4. How to create static, interactive, and question widgets in Adobe Captivate
    5. How to add widgets to your Adobe Captivate project
  13. Non-interactive objects
    1. Create and edit smart shapes
    2. Edit and create text captions with Captivate
    3. How to use images and rollover images with Captivate
    4. How to customize smart shapes in Adobe Captivate
    5. How to create zoom areas in Adobe Captivate
    6. How to set audio for noninteractive objects
    7. How to create rollover slidelets in Adobe Captivate
    8. How to create rollover captions in Adobe Captivate
    9. Change mouse properties in Adobe Captivate
    10. Use highlight boxes in Captivate
    11. Work with swatches in Adobe Captivate
    12. Fix size and position of non-interactive objects
    13. Add animations to a Adobe Captivate project
  14. Advanced Editing and Project Reviews
    1. How to link Adobe Captivate projects
    2. Import, export, and delete content
    3. Skins
    4. Create accessible projects in Adobe Captivate
    5. Create a table of contents (TOC) with Adobe Captivate
    6. Resize Adobe Captivate projects
    7. Projects and project preferences
    8. How to preview projects in Adobe Captivate
  15. Variables and Advanced Actions
    1. Adobe Captivate variables
    2. How to create user-defined variables in Adobe Captivate
    3. Advanced actions in Adobe Captivate
    4. Shared actions in Adobe Captivate projects
    5. Edit or delete user-defined variables in Adobe Captivate
    6. How to assign advanced actions to an event
  16. Record Projects
    1. Create interactive videos
    2. Automatic and manual recording with Captivate
    3. Set recording preferences in Adobe Captivate
    4. Record video demonstrations with Adobe Captivate
    5. How to record software simulations in Adobe Captivate
    6. How to pause recording
  17. Publish Projects
    1. Preview and publish responsive projects
    2. Publish project to Adobe Captivate Prime
    3. Publish projects as HTML5 files with Adobe Captivate
    4. Publish projects as executable files
    5. Publish projects as MP4 files with Adobe Captivate
    6. Set publishing preferences in Adobe Captivate
    7. Using web fonts from Adobe Fonts in Adobe Captivate
    8. Report quiz results to an internal server
  18. Use Adobe Captivate with Other Applications
    1. Import and edit PowerPoint presentations in Captivate
    2. Upload an Adobe Captivate project to a Learning Management System
    3. Learn about the Common JavaScript interface for Adobe Captivate
    4. How to publish Captivate projects to Microsoft Word
    5. Using Adobe Connect with Captivate
    6. How to add Captivate projects to a RoboHelp online help system
    7. How to package multiple SCOs using the Adobe Multi-SCORM Packager
  19. Troubleshoot Adobe Captivate
    1. Resolve known issues and limitations in the latest versions of Adobe Captivate, Adobe FrameMaker, and Adobe RoboHelp.
    2. Early build for Captivate (2019 release) on macOS Big Sur (macOS 11)
    3. Hotfix for VR content not playing on devices
    4. Configure SSL for Live Preview on Devices
    5. Captivate (2019 release) activation issues on macOS Catalina
    6. Captivate responsive courses will not auto-play on browsers
    7. Issues with Asset panel in Adobe Captivate (2019 release)
    8. Error 103 while installing Adobe Captivate
    9. Issues when previewing a Captivate project

HTML5 Publishing options and output formats in Captivate Classic.

Note:

Resolve known issues and limitations in the latest versions of Adobe Captivate, Adobe FrameMaker, and Adobe RoboHelp.

For more information, see Resolve known issues in Technical Communication Suite.

  • Now available : Mac OS Catalina compatible Adobe Captivate Classic update for 2019 release users . Get update now!
  • Asset Panel not loading in Adobe Captivate Classic (2019 release)? Read More to find a solution.

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

  1. 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

  2. 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.

    Typekit message
    Typekit message

  3. If the project is responsive, you can see the following dialog:

    Publish for responsive
    Publish for responsive

    If the project is blank or non-responsive, you can see the following dialog:

    Publish for blank
    Publish for blank

    To publish the project, click Publish.

    To view the project assets, navigate to the specified folder, and you can see the following assets:

    HTML assets
    HTML assets

  4. 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 Classic project (CPTX), copy the project to the Callees folder in the output folder.

  5. (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).

Note:

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

Note:

PhoneGap is NO LONGER supported.

From Adobe Captivate Classic 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 Classic. Follow the steps below: 

  1. 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: 

    Publish for Devices (Apps) dialog
    Publish for Devices (Apps) dialog

  2. 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.

  3. Choose App> Create New for new application.

    Choose App> Update if you are updating an existing app in PhoneGap.

  4. 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.

  5. Click More to choose your personal publishing preferences for the app, like geolocation, gestures, and accessibility.

  6. 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.

  7. Click Publish to publish the output as apps for devices. 

    Adobe Captivate Classic 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. 

Note:

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

  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: 

Note:

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. 

Note:

If you remove preferences of Adobe Captivate Classic, 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:

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 Classic 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 Classic 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 Classic 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 Classic 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 Classic 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 Classic and how you can create engaging learning content, download the following projects:

 Adobe

Get help faster and easier

New user?

Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online