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
Eric Albertson

This is great.  I have used it to add CC to my project and it works well so far.

I did run into a snag.  I have my "CC" button on my master slide, which calls up a menu of different language choices (on a higher layer on the master slide).  The learner can choose the language, and then it shows the layer (not on the master slide, but on the content slide) that has the subtitles for that particular layer.  It is able to do that, and switch which language layer subtiles are showing (I use the text box, adjust variable technique you use, which works), BUT, each time I click on a language, the subtitles start from the beginning (rather than tracking with the voice on the main layer of the page).  Every time I click on a new language (i.e. show the layer with the subtitles) the timing starts over.  Can you think of a reason that this might be happening?  Is there some way that a layer's animation could not track with the base layer animation.  More importantly, do you know a way to get them to happen at the same time (meaning that all the subtitle layers animate through their different phrases all the time and showing thier layers just shows them where they are in the process of that)?

Thanks,

Eric

Victoria Nap

I am having a strange problem with this method. It works great when I preview the project in Storyline, but when I publish, I am having an issue where, if the layer displays automatically on a subsequent slide because the variable is turned on, the layer disappears after about a second. If I click the button again, I can get it to come back.

Anyone have any idea why this might happen?

Sharon Huston

Thank you, Steve!!!!  Any tips on getting the HTML-formatted captions to work?  I can see it works in your demo, but when I downloaded and published the source file it didn't work.  I saw <b>text</b> instead of bold text.  I published as HTML5 and as SWF, and I'm getting un-rendered html code in both.

Steve Flowers

Hmm... That's odd Looks like a bug as the player used to render tags to onstage fields without a problem. Looks like a variable value set through JavaScript is rendered OK. Formatting passed in through a variable trigger is not.

This works from a JavaScript trigger:

player=GetPlayer();

player.SetVar("transcripts","Bold me");

Richard Chasin

I love this solution Steve. Thanks so much.

Having trouble with one aspect of it. Trying to set the variable(s) so that the CC default is "on" when the slides start. Then the viewer can click to hide them. Have changed variable from "true" to "false" without success. Can you please provide guidance? Many thanks.

************Figured it out - never mind *****************************

Simon Ray

Alright, curly question time.

I am applying the Captions to my project, which works perfectly for non-layered slides.  However, when I apply captions to a button interaction, with each layer having its own voice over, the CC button doesn't work...it takes you back to the base layer...

How can I get the CC button to display the CC's relevant to each layer?

I have tried hiding the CC' on the base layer, but it didn't work.

Anyone?

Dalinda Damm

I think the functionality here is super helpful. Unfortunately, I have been trying to get this to work in a project I am working on, without success. I copied all the settings from the example file. The only thing that is different is the name of the layer (I changed it from showTranscript to Captions). Evrerything is set up within the master slides, with the exact same triggers and variables. However, when I preview a slide, I click on the CC button, and nothing happens. Any thoughts?


Thanks!

Kris S.

Hi Steve,

I used your template and I really like it but I have a problem. I'm syncing captions to an flv and I have it set so the user has to click the play button to play the video. Since the captions in your example are tied to the timeline start, If the user doesn't start playing the video when they first get to the page, the captions are out of sync. They also don't update when I scrub back and forth on the seek bar.  Do you know if there is anyway to tie the captions to the default video player?

Thanks! Even if I can't use your example it really helped me start to get a handle on variables!

Kris

Carolyn Siccama

This looks very helpful.  If I already have a slide with audio already designed, is there a way to apply this cc master slide to my existing slide?  Or do I need to start from scratch by building the variables, etc..

Have you ever seen the way that screencast-o-matic handles captions?  I think they make it very easy to create captions.

thank you,

Carolyn

Diane Rogers

Hi Steve-

While this solution is working great for my new project, there is one hiccup I'm hoping you will help me with.  The text box that contains "%transcript%" doesn't seem to stick to the formatting I set for it on the master slide. 

The font of the text should come across as Catriel 12.  Yet when there is more than one line of transcript, it shrinks the font down REALLY tiny (to like "6") trying to fit it all on one line!

I've tried sizing the text box to make it bigger by:  adding "returns" after the %transcript%; and formatting it to "adjust to fit the text".  But there seems to be a disconnect between that formatting and what it's doing with the trigger value text.

Thoughts/suggestions??

-Diane

Raddy Nich

Steve, is the scrollbar used here keyboard accessible?

I am trying to create a WCAG 2.0 AA compliant course, which currently has a transcript/notes in the Sidebar. Unfortunately, due to large amounts of text, the Notes tab has automatically created a scrollbar. The scrollbar cannot be controlled by the keyboard. A user who doesn't need a screen reader but still uses a keyboard will not be able to read the transcript. I have considered using the closed captioning option suggested here; however, due to large amounts of text I will need to create a number of subtitles or use the scrollbar CC suggested here.

If this isn't accessible the last resort is to split the screens so the Transcript is spread across multiple slides. This converts all the wonderful layers into a bland power point presentation looking slide.

Any suggestions will be greatly appreciated!  

Steve Flowers

Hey All! 

Looks like none of the scrolling panel elements in Storyline are keyboard accessible. This includes the scrolling panel object as well as the notes panel. This is unfortunate. Please submit a feature / bug request. I'll try to put together a Flash widget as an alternative that might get the job done. No projection on when that might be. Busy time

Jennifer Dow

I was so please to see this discussion. This Closed Captioning is exactly what I need. However, I can't figure it out. I reviewed the screenr and downloaded the source file. I have been working with your source file template along side my file and I feel as though I have duplicated all the triggers and variables exactly as you have created them. Yet, I can't get the captions to appear in my file. I've given it nearly 6 hours of troubleshooting. I give up. Can someone tell me what is wrong with my file?