Get access to premium assets for free. Be the first to hear from Adobe.

Captivate 2017: Using the Customizable closed captions feature

Have you wanted to add closed captioning to your captivate projects to enhance audience reach or to provide options to users who cannot listen to audio files in some locations, but found that the placement of the captions interfered with design elements?

One of the new features in Captivate 10 puts control of closed captioning in the hands of content designers by providing a customization tool set.  This short tutorial will step you through using the new feature.

  1. Go to Properties >> Options for the slide containing the audio file.cc1_2
  2. Then click on the slide [Audio] button.or
  3. Click on the Closed Captioning icon in the Slide Notes The Closed Captioning window will be displayed.cc4
  4. Click on the gear icon to open the Closed Captioning window.
  5. The closed captioning for all the slides within the project can be edited from this window. See image for overview of options.cc6_7
  6. Click the [Apply] button to save slide modifications.
  7. Click the [Close] button when all modifications have been made.

8 Responses

      • I am using a TOC with my presentations. I would like for my Closed Captioning to stretch completely across the stage and not hover between the TOC and the stage. It seems no matter what setting I choose, I cannot achieve the same look for the closed captioning that I had in captivate 9. I have tried shortening my text to no avail. Also, when I try to change the X axis, the Y axis will snap to whatever setting the program deems works best. I have some images of what I am running into if that would help.

        This image is how I want my CC to look like.

        And this is the closest I can get.

        These are the settings that I used to get the look on the second image.

        Also the fact that the location of the closed captioning changes based on the amount of text in the box is making things difficult.

        I believe that the company I work for uses captivate on a much larger scale than most captivate users. Many of our presentations contain more than 30-40 slides. We build online college courses. So it is very important for our work to have a consistent look. We work in teams of four graphic designers per course, and need every topic in those courses to have the same CC settings. If there is any way that someone could figure out how to set the closed captioning to look the exact same as it did in 9? I haven’t been able to figure it out yet. Thank you for getting back with me!

  1. I am also wrestling with this new CC text control and rather than ask a separate question, I’ll add to this one.

    I notice that the text is automatically shrinking/scaling when there is more of it. I cannot see anywhere to turn this feature off. (can it be?)

    We use CC text as more of an audio transcript. I add custom CSS styles to my courses via JavaScript which forces div#cc to be scrollable. Those styles can override most size and position values that Captivate is assigning, but I can’t seem to stop the text from shrinking. I’m sure it’s one of those things that was intended to be helpful but I really want it to stop. =>[

  2. Same issue. The CC box does not maintain the position set. Also, when I have more text than fits in the box, it just cuts off – why can’t it scroll?
    Or better yet, add a feature such as in Storyline where the transcript is just a button click in the TOC!

  3. I found there is a height rule on the CC text #ccText p that forces it to be a % (of the width? height? of the cc box, I don’t know???) The scaling only kicked in when there was enough text. I fumbled around and making it 85% worked in my case–it looks the same when there’s only a little or a lot and it’s scrolling. Here’s how I add the styles, including the scrollbar–it’s custom javascript you add to index.html just inside the bottom tag:
    (You have to do this every time you publish AND this is HTML5 only. I have no idea if it works for the .swf output.)

    //add custom css style
    function addCSSRule(sheet, selector, rules, index) {
    if(“insertRule” in sheet) {
    sheet.insertRule(selector + “{” + rules + “}”, index);
    else if(“addRule” in sheet) {
    sheet.addRule(selector, rules, index);

    addCSSRule(document.styleSheets[0], “#cc”, “background: #F0F0F0; overflow-y: scroll !important; pointer-events: all !important”, 1);
    addCSSRule(document.styleSheets[0], “#ccText”, “padding-top: 5px”, 1);
    addCSSRule(document.styleSheets[0], “#ccText p”, “height: 85%”, 1);

    • Oops. The comment box ate some of the formatting for security reasons. Add the function just inside the closing script tag within index.html (or index_scorm.html).

      Also, it replaced all the quote marks in my script with curly quote marks. If you copy/paste that code into a js window, be sure to swap them back to simple ” characters.

Leave a reply