Storyline Example: Generating Closed Captions

One of the complaints I've seen with Storyline's accessibility is the challenge of adding Closed Captions. There are a few ways to accomplish this in Storyline but most of the methods I've seen in practice make it difficult to separate the caption from the presentation. In other words, folks are putting text boxes on the slide to time the text. 

Here's a way to add CC to your presentations that is fast and easy - with the bonus of providing a toggle control to show or hide the CC and centralized styling and position of the display from a single object.

Take a look. The file is pretty self-explanatory, it employs relatively simple concepts with decent results. It's pretty easy to manage.

Story source file

Demonstration

176 Replies
Steve Flowers

Great presentation, Kevin. Thanks for linking to it. I love Terrill's able player. Interactive transcripts really add a lot for me personally, even if I don't require it - still a super-useful feature. 

And I agree! While workarounds like the one described in this thread make accessibility a little more accessible, native support for standard captions and features that meet with current (and extensible to future) expectations should really be on the roadmap.

Matthew Mason

Hi Steve. Thanks for the info on the closed captioning. It's been great. However, I am having issues with linking it to a video file. The video file is set to play "when clicked" so assigning the CC to timeline starts means that the captioning will be out of synch with the video. I considered setting the CC to start when the media starts to play (when user clicks the play button) but will also have the same issue if the user decides to pause the video. 

Any thoughts or suggestions?

Matthew

Steve Flowers

Couple of ways around it. One would be to import the video in an accessible player as a Web Object. The other might be to put in a trigger to pause your video at the beginning, overlaying with a play button graphic. This would give you the same effect while retaining the sync with the player timeline.

Unfortunately, it's hard to do anything synchronized with the player if it's not locked to the timeline.

Matthew Mason

Thanks Steve. The other workaround I'm going to try is to create closed captioning in the video file using Adobe Premiere. I will then have two video files (one with CC and one without). the CC without file will be on the base layer. I will place the CC with on another layer for users who need the accessible option. The video is relatively short and only a small size so not too worried about increasing the file size. I'll look at the accessible player option as well for future projects. 

Katarina  Derek

Hi Steve!

I have followed your directions for adding closed captioning to my course. It works well for all, but two pages. In these pages (like in many others) I have multiple layers. The layers display correctly (i.e., without showing the base layer) until the CC button is clicked. At that point the base layer is shown underneath. 

I am not sure what I am missing here. I have attached the .story file. The two pages in question are 1.7 and 1.10. I would appreciate any help I can get.

 

Steve Flowers

Hi Katarina - 

I see what's going on with it, though I haven't seen this particular behavior before. You're using the layer to control visibility of objects on the base slide. When the CC displays, the CC layer reactivates the base layer objects. I think this could be a bug. It might just be a side-effect of layer behavior. 

I'd fix it by adding a shape to the background of your overlay layers (with that light blue tint of your slide background) that blocks the text shown on the layer below rather than using the layer visibility. That should fix what you're seeing. You might also create a feedback master specifically for those layers that contains the background in the master. In this case, since it's not that many screens, I'd just paste in the blocker shape.

Steve Flowers

Hi Lesley - 

Couple of ways around that. One is to make your layers not hide other layers. The other method I've found handy is to add something to your feedback master to immediately open the CC layer (or other layer) with a trigger when the layer is shown.

You can edit the feedback master and add a trigger. I use a shape to contain the trigger that appears at least .1 seconds into the timeline. By using a condition on this trigger, you can control whether it should show the CC or not when the layer is shown. And by adding this to the feedback master, it'll happen on every layer.

Lesley Mizer

Thanks, Steve! I applied the trigger concept to the particular slide that had layers and it worked. So, I added a shape to the layer:

Action: Adjust variable
Variable: "transcriptToggle" (the True/False variable created where default value is False)
Operator: =NOT Assignment
When: Timeline starts
Object: [the shape I inserted off the slide]
On Condition: transcriptToggle==Equal to True

I add the shape with the trigger to every layer and it appears to be work. I have it set to display at .1 seconds on the timeline. Typing this out so I have it on hand for next time.

If there's another way, or if I misunderstood, let me know. Thanks for all of your help!

 

Lesley Mizer

Thanks, Steve. I'll try that too. 

Alexandra, what happens is I have the CC on when I'm on the base layer, it is set to true. When I click on the layer, it's still true, but the CC text wasn't showing. So that is why that particular trigger on the shape works. I was actually using one of the submitted projects on this message thread, and it appears there are some extra triggers on the master slide that are unnecessary. I'm going to have to play around with it some more. Hope this helps!

Ryan DeWitt

Great solution Steve.  I figured out to add Soft Closed Captions in Storyline with using the .mp4 file itself, using the Screenflow app for video (or handbrake), adding localized captions there, rendering with captions, then inserting in Storyline, Publishing then finally swapping out the Published Storyline .mp4 video file.  

As long as you keep the .mp4 files then same aspect size you're good. 

I Detailed the Steps further on my Blog and will make a video next. 

http://contextc.com/closed-captions/adding-soft-closed-captions-to-mp4-video-for-web-or-articulate-storyline-html5/

Hope this helps. :]

Steve Flowers

Using video is a cool trick. Are you hiding them by using a cover shape? For good quality, how are the file sizes?

Would really love to simply be able to add a widget with synced SRT / VTT. Your method is at least a little more portable and allows you to use whatever caption creation method you please:)

Bryce Gilbert

This closed caption solution seems to work quite well but I have a question. I've published a file to Tempshare. I noticed while it works on Chrome in Windows, when I open the same Tempshare link in Chrome on my Mac and I click the closed caption button, it freezes the whole module. Has any one else experienced this? I can't see why it would not work on Chrome on a Mac...(also does not work on ipad).

Thanks!