Insert web objects in Adobe Captivate projects

  1. Captivate User Guide
  2. Introduction to Captivate
    1. What's New in Adobe Captivate
    2. Adobe Captivate System Requirements
    3. Download Adobe Captivate
    4. What's New in Adobe Captivate (2019 release) Update 5
    5. What's New in Adobe Captivate (2019 release) Update 2
    6. Adobe Captivate Release Notes
    7. System requirements and download instructions for Adobe Captivate Draft
    8. Responsive Project Design with Adobe Captivate
  3. 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
  4. 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. Resize and reposition objects by pixel
    7. How to manage objects with the Main Options toolbar
    8. How to merge objects in a slide
    9. How to manage objects in the library
    10. How to group objects in Adobe Captivate
    11. Edit object information using the Advanced Interaction panel
    12. How to copy, paste, and duplicate objects in Adobe Captivate
    13. Control the visibility of objects
    14. How to change the display order of objects in Adobe Captivate
    15. Apply shadows to objects
    16. How to align objects in Adobe Captivate
    17. How to add reflection to objects in Adobe Captivate
    18. Import assets into a Captivate project
  5. 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
  6. 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
  7. 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
  8. 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
  9. Video
    1. Slide videos
    2. Work with event videos in Adobe Captivate
    3. Differences between events and synchronized videos in Adobe Captivate
  10. 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
  11. Interactions
    1. Create learning interactions in Adobe Captivate
    2. Create drag-and-drop interactions in Adobe Captivate
    3. How to configure widgets and interactions in Adobe Captivate
    4. Use Adobe Captivate variables in widgets
    5. Set the properties of widgets with Adobe Captivate
    6. How to create static, interactive, and question widgets in Adobe Captivate
    7. How to add widgets to your Adobe Captivate project
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. Troubleshoot Adobe Captivate
    1. Early build for Captivate (2019 release) on macOS Big Sur (macOS 11)
    2. Hotfix for VR content not playing on devices
    3. Configure SSL for Live Preview on Devices
    4. Captivate (2019 release) activation issues on macOS Catalina
    5. Captivate responsive courses will not auto-play on browsers
    6. Issues with Asset panel in Adobe Captivate (2019 release)
    7. Error 103 while installing Adobe Captivate
    8. Issues when previewing a Captivate project

 

Overview

You can insert native HTML5 web objects into the slides by clicking Objects > Web in the big button bar. Type the URL of the object in the Address field of the Property Inspector, and the web page appears in the object container.

Create web object

From the toolbar, choose Objects > Web as shown below:

Selecting the web objects dialog from the toolbar
Selecting the web objects dialog from the toolbar

Type the URL for web object in Address field. You can also browse for OAM, pdf, svg , and zip files by clicking the folder icon next to the Address field.

Inserting web objects
Inserting web objects

Choose the other options, as described below:

Auto Load

Choose this option if you want to load the object automatically in output. By default, this option remains selected when you create web object. In edit mode, after loading the object, mouse over the object to view the content.

If you are unable to see the content after enabling the option, see this forum thread more for information.

To display the web object in the slide, choose the following options:

Border

Select this option, if you want to view the border for the web object.

Scrolling

Select this option, if you want to view the scroll bar in the web object container.

Loading Animation

Select this option, if you want any animation within the web object to load.

To display the web object in a new browser window, choose the following options:

Default

Select this option, if you want to view the web object with default browser settings.

Full Screen

Select this option, if you want to view the web object in full screen.

Custom

Select this option, if you want to view the web object within defined width and height dimensions.

To insert objects like pdf or zip files, it is recommended that you place the pdf, zip, or svg file in a web server, and then use the url to the file.

For example, after placing the objects in the web server, use the URL as follows:

  • pdf: localhost:8012/<filename>.pdf
  • svg : localhost:8012/<filename>.svg

When you preview the slide, you can see that the objects are included in the output.

Embedding pdf and svg objects
Embedding pdf and svg objects

YouTube video does not load

If after inserting the YouTube widget, the video does not play after publishing. In such situations, update the widget.

For more information, see YouTube widget issues in SWF output.

Embed code support

Click the Embed code option, if you would like to embed any web object, such as, a video file or link to a streamed video. You can paste the embed code in the URL area, as shown below:

Embed code support
Embed code support

For example, you can see the embedded video in mobile view when you paste the following embed code:

<iframe width="560" height="315" src="https://www.youtube.com/embed/_VW-KBt0Sbk" frameborder="0" allowfullscreen></iframe>
Note:

After publishing or previewing the project, if you see the error message, the object cannot be displayed in a frame, see this forum post for more information.

Embed YouTube video in responsive slide
Embed YouTube video in responsive slide

You can change the height and width of the embedded video by changing the size of web object container. The video maintains its width by following the width of the web object container and maintains its aspect ratio for height.

You can also embed videos without using the iframe tag, although it is recommended using it. You can use the object and the embed tags, as shown below:

<object data=" https://www.youtube.com/embed/_VW-KBt0Sbk " width="560" height="315"></object>
<embed width="420" height="315" src=" https://www.youtube.com/embed/_VW-KBt0Sbk "></embed>

Things to consider when using web objects with Adobe Captivate

In Adobe Captivate, web objects and HTML 5 animations (when layered with other shapes) always appear on top

As a work around this issue in HTML5, perform the following:

  1. In your Captivate installation folder, open the AdobeCaptivate.ini file.
  2. Edit the file to change the value of UseWidget7 to 1 as follows:
    UseWidget7=1
  3. Close and relaunch Adobe Captivate. 

You can now position your web objects on top or bottom, and they appear as expected in HTML 5. 

Note:

This workaround is applicable for HTML5 publish option and for static pages or animations only.

A s ecured LMS(https) maynot allow you to launch unsecured (http) page embedded in a web object

When referring to a http website (in a web object) in an https secured LMS environment, the LMS does not allow the content to launch an un-secured website.

The content launches fine in the Captivate preview server because it is http based. However it does not work in SCORM cloud or Captivate Prime as those LMSs are https based.

Click-jacking websites are not supported in a web object

Click jacking is a threat to security and Captivate does not support redirecting to a different website.

Note:

Some websites may not allow you to open it in another page or window. To test whether a site is supported in the Web object, you can have a simple HTML page with an iframe, and see if your URL works. If it works there, it also works  in the web object.

For more information on Click Jacking, see the Wikipedia page on Click Jacking.

Download sample projects

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

Adobe logo

Sign in to your account