User Guide Cancel

How to use images and rollover images with 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

You can incorporate images into projects as logos, startup screens, pointers, backgrounds, buttons, and more. You can add images in the following formats: JPG, JPEG, GIF, PNG, BMP, ICO, EMF, POT, or WMF.

Rollover images consist of an image and a rollover area (the “hot” area). Rollover images appear when the end user moves the pointer over the rollover area at runtime. They are useful for heavily detailed slides or for slides that contain buttons or toolbars that require explanation.

You can use the same type of graphics for rollover images that you use for traditional images. You can also customize the location, outline, and size of the rollover area for rollover images.

Note:

Adobe Captivate Classic contains a gallery of buttons, sounds, and animations (in SWF format) for you to use in your projects. By default, the gallery is stored in the following location when you install Adobe Captivate Classic: C:\Program Files\Adobe\Adobe Captivate Classic<version>\Gallery (on Windows) and /Applications/Adobe Captivate Classic<version>/Gallery (on Mac OS).

Properties of images and rollover images

You can change the properties of an image using the Image Edit area of the Property Inspector after selecting the image on the slide.

Image

Name

Enter a unique name for the object. You can use this name when defining the visibility conditions for the object.

Visible

Deselect this option if you want the object to be invisible on the slide. Use the Show option to make the object visible. For more information, see Controlling the visibility of objects.

Accessibility

Click to add accessible text to the object. For details, see Customize accessibility text for objects

Transparent Background

Select the color filler icon. All occurrences of one particular color in an image can be made transparent. For example, you can make all occurrences of red (#FF0000) transparent.

Reset To Original Size

Restores the image to its original size.

Select Image From Library

Click the folder icon. Select this option to reuse an image in your project file. Select the image and click OK.

The Select Image from Library dialog box appears with the following options:

Import

Import an image stored on your computer or on a network location.

Image Edit

Brightness

The brightness of the image. When you increase the value for brightness, the selected image appears brighter.

Sharpness

Sharpening enhances the definition of edges in an image. Whether your images come from a digital camera or a scanner, most images can benefit from sharpening. The degree of sharpening needed varies according to the quality of the digital camera or scanner. Keep in mind that sharpening cannot correct a severely blurred image.

Contrast

The contrast between the light and dark areas of an image. When you increase the contrast of an image, the brighter areas appear brighter, and the darker areas appear darker.

Alpha

The transparency of the image. At 100% Alpha, the image is opaque. At 0%, the image is transparent and becomes invisible.

Hue

You can change the colors of an image by changing the values for its hue.

Saturation

The intensity of colors in the image. When you increase the saturation value, you increase the intensity of the colors.

Gray Scale

In a basic sense, you can convert a colored image to monochrome using this effect. Grayscale mode uses different shades of gray in an image. In 8-bit images, there can be up to 256 shades of gray. Every pixel of a grayscale image has a brightness value ranging from 0 (black) to 255 (white). In 16-bit and 32-bit images, the number of shades in an image is much greater than in 8-bit images.

Invert Color

Inverts the colors in an image. When you invert an image, the brightness value of each pixel in the channels is converted to the inverse value on the 256-step color-values scale. For example, a pixel in a positive image with a value of 255 is changed to 0. In the same way, a pixel with a value of 5 is changed to 250.

Flip

Flipping an image produces its mirror image. You can flip an image vertically or horizontally.

Rotate

Rotate an image either clockwise or counterclockwise 90 at a time.

Crop

Click the crop icon. Crops the image handles of the rectangular box to select the area of the image that you want displayed.

Fit to Stage

Resizes the image to fit the dimensions of the slide.

Shadow and reflection

Shadow

Select the check box to apply shadow to the image. Choose one of the presets. You can customize a preset by clicking Custom.

Direction

Select the direction: inner or outer. The preview of the selected direction is displayed on stage.

Color

Click to select a color for the shadow. Specify the alpha for the color, in percentage, in the adjacent field.

Blur

Specify a value, in pixels, for the blur of the shadow.

Angle

Specify the angle for the shadow.

Distance

Specify the distance, in pixels, at which the shadow must be displayed.

Reflection

Select the check box to add reflection to the image. Choose one of the presets.

Timing

Display For [Time]

Specifies how long the image is displayed on the slide.

Appear After [#] Seconds

Delay between the first appearance of the slide and the first appearance of the image.

Transition

Effect

Transition effect for the image. You can have the image fade in and fade out of the slide during its entry and exit.

In [#] Seconds

Specifies the amount of time for the image to fully fade into view.

Out [#] Seconds

Specifies the amount of time for the image to completely disappear from view.

Add an image or rollover image

  1. Select the slide to which you want to add an image.

  2. Select Objects > Rollover Image.

  3. Select an image from the list or browse to a new location for a different image. Click Open.

  4. (If necessary) Resize the image on stage or using the Crop dialog box

    (Crop option in Image Edit area of Property Inspector).

    Set the following options in the Resize/Crop dialog box.

    Fit To Stage

    Resizes the image to fit the dimensions of the slide.

    Crop

    Displays a bounding box with dimensions corresponding to that of the project. Resize the handles of the box to select the area that you want displayed on the slide. If you have selected Constrain Proportions, the height- to-width ratio of the bounding box is maintained.

    Zoom

    You can zoom in and zoom out of the image by moving the slider. Alternatively, you can choose from a list of standard zoom sizes from the menu.

    Constrain proportions

    Maintains the height-to-width ratio of the bounding box used to crop the image. This option is enabled only when you choose to crop the image. When you disable this option, resize the bounding box, and enable the option again; the new dimensions are used thereafter to calculate the ratio.

  5. Set properties and options as required.

  6. To snap the rollover area to the edges of an object, press Alt and move the rollover area over that object.

  7. For properties with the icon, select either

    • Apply To All Items To apply the effect to all objects that belong to the object type.

    • Apply To All Items Of Same Style To apply to all objects that use the same object style.

  8. Click OK.

The image is added to the slide. If you added a rollover image, the rollover area is also added. Drag the image to the desired location and adjust the rollover area as needed.

Rollover Captions, Images and Slidelets

Note:

You can create a watermark image using a transparency trick. Insert an image and set the transparency to 50%. This setting works well with many company logos.

Working with Adobe Photoshop files

This release features Adobe Photoshop round-tripping with Adobe Captivate Classic. The Photoshop (PSD) files that you import to Adobe Captivate Classic are linked to the source. You can start Adobe Photoshop (to edit the files) from within Adobe Captivate Classic.

Also, if you update the source file, Adobe Captivate Classic lets you update the files in the library and the changes reflect in the slide.

Note:

This feature is available only in Adobe Captivate Classic that is installed as a part of Adobe eLearning Suite.

Import Photoshop files

You can import a PSD file into your Adobe Captivate Classic project, while preserving Photoshop features. You can select and import separate layers of the PSD file, or you can flatten selected layers and import them as a single image.

Each imported layer is treated as a separate image within the Adobe Captivate Classic project. In the library, a folder with the PSD name is created and each imported layer is stored in it in PNG format.

You can resize the imported images to the size of your Adobe Captivate Classic project. You can also apply all other available image-editing properties of Adobe Captivate Classic.

When importing a PSD file, you can select and import layer comps. A layer comp is a Photoshop feature that allows you to create, manage, and view multiple versions of a layout in a single Photoshop file. See Photoshop Help for more information on this feature.

  1. In an open project, select File > Import > Photoshop File.

  2. In the Import dialog box, do one of the following:

    • To select separate layers of the PSD file, select the Layers option and select each layer that you want to import. To merge the selected layers before importing, select Merge Layers.

    Note:

    Importing each layer separately increases the size of your image file. To reduce the size of the image, you can merge the layers.  

    To import the layers that you have not imported before, repeat the above steps and choose the required layers. The layers get added to the corresponding PSD folder in the Library.

    • To flatten the layers and then import them as a single image, select Flattened Image.
    Note:

    When you flatten layers, you cannot edit each layer separately within Adobe Captivate Classic. Use this option only if you are sure that layer editing is not required and the image is ready to use.

    • To import any layer comps, click Multiple and select the layer comp from the drop-down list. The layers in the selected layer comps appear. Select the check boxes corresponding to the layer comps you want to import.

  3. Select Scale According To Stage Size to automatically resize the image to the size of your Adobe Captivate Classic project.

Reusing PSD items in the Library

You can reuse PSD items, such as layers and layer comps, using one or all the following ways:

  • To reuse a PSD item in a slide, drag-and-drop the item from the Library onto the slide.

  • To reuse a PSD item in a different project, open the target project. Then, drag-and-drop the item from the current project’s Library into the target project. You can also copy and paste the item into the target project.

    Alternatively, in the target project, select File > Import > External Library, and open the project from which you want to import the PSD items. When the Library panel of the selected project appears, select the item and drag-and-drop it into the current project.

    If a PSD file by the same name exists in the target project, Adobe Captivate Classic matches the modified date of the two files. If the dates are same, the layers get copied into the corresponding PSD file folder in the Library. If not, the layers are copied as normal images.

Edit PSD files

  1. In the slide or PSD folder in the library, select the imported PSD file, right-click (Windows) or Control-click (Mac OS), and then select Edit PSD Source File.

You can also edit the file from image properties (Window > Properties).

Update PSD files

If the files in the Adobe Captivate Classic library and the original files are not in sync, the status column in the library changes from to .

To update and bring the resource on slide in sync with the source,

  • Select the PSD on stage, right-click (Windows) or Control-click (Mac OS), and then select Update from Source.

  • Click Update in the Property Inspector (Window > Properties).

  • Click the status icon in the library.

  • Select the PSD folder in the library, right-click (Windows) or Control-click (Mac OS), and then select Update from Source.

Note:

The first two options update the PSD both on stage and in library. The last two options update the resource only in the library and the updated resources do not take effect on stage.  

If you remove or relocate the PSD, then a question mark icon appears in the status column. Click to relink. You can also do this action from the Image Properties dialog box.

The procedure for linking to a new PSD file is same as importing a new PSD file.

Working with SVG images

Captivate Classic supports SVG graphics enabling you to develop scalable graphic content.

Import Scalable Vector Graphics into Captivate Classic, and roundtrip them using Illustrator or any other vector editing applications.

Inserting SVG images

Insert SVG in either blank or responsive projects by clicking Media->SVG

Inserting svg files
Inserting svg files

Navigate to the folder where the SVG image is stored and click Open to insert the image into your project.

Editing SVG images

Edit the SVG using Adobe Illustrator or any other vector editing applications by clicking Edit SVG in the Property inspector. 

Launching an image-editing application directly from Captivate Classic
Launching an image-editing application directly from Captivate Classic

Note:

Edit with Adobe Illustrator option is disabled (as shown below) if Illustrator is not present on that machine. In this scenario, when a user clicks Edit SVG, the user is prompted to open the file with another svg image editing application.

You can resize the image from within the Property Inspector using these options:

  • Original: Revert the image to its original size – This button is selected by default when the SVG is imported, and remains selected if you don't modify the image size       
  • Custom: This button is selected if you change the size of the SVG image
  • Fit to Stage: Resize the image so that it fits the stage
  • Fit to Bounding Box: Fit the SVG exactly to its bounding container. On further modification, the SVG no longer maintains its aspect ratio on resize. You can use this option to avoid possible truncation in some SVG images. 

Replacing SVG images

You can replace an existing SVG graphic with another one.

  1. Click on the SVG image to open the Property Inspector for that image.

  2. Click the image name on the Property Inspector.

    Replacing an existing SVG image with a new one
    Replacing an existing SVG image with a new one

  3. In the Select Image from Library dialog that opens, click Import. Navigate to the folder and select the image you want to use.

    Import SVG
    Import SVG

From an expert: Adobe Captivate Classic and SVG Support

Learn to work with scalable vector graphics in Adobe Captivate Classic 9

Dr. Pooja Jaisingh

Create watermark images

You can create a watermark image by setting the transparency of an image.

  1. In an open project, select Insert > Image.

  2. Select an image or browse to a new location for a different image. Click Open. The image gets inserted.

  3. Set the image Alpha to 50% or lower in the Image Edit area of the Property Inspector. A low number results in a dim version of the image and a higher number displays a brighter image.

  4. Position the image on the slide as required.

Change JPEG quality

Adobe Captivate Classic automatically sets the quality of JPEG images in projects. However, you can adjust this setting depending upon the images used in your project. Using higher percentage values allow high-quality images but also increases file size.

  1. In an open project, select Edit > Preferences (Windows) or Adobe Captivate Classic > Preferences (Mac OS).

  2. In the Category panel, select SWF Size And Quality from the Project menu.

  3. Enter your preferred value in the JPEG Image Quality text box.

 Adobe

Get help faster and easier

New user?