The Rapid Elearning Blog

closed captions in Storyline

[UPDATE: This tutorial is specific to Storyline2. Storyline 360/3 both have closed captioning as a feature.]

In a previous post we learned how to create closed captions text for your online courses. Now we’ll learn to use that text in Articulate Storyline.

Before we get started, let’s do a quick review of your closed captions source file. Regardless of the application you used to create the closed captions file, you’ll end up with the timing and the text for the captions. It should look similar to the image below.

closed caption storyline SRT

Display Closed Captions in Storyline

Displaying the closed captions in Storyline 2 is a very straightforward process. All we need is a single text variable that is triggered to change to new text based on the timeline.

Here’s a video where I explain how easy it is to create the closed captions in Storyline 2.

Click here to view the closed captions YouTube tutorial.

Here are the basic steps to create the captions in Storyline 2:

  • Create a text variable titled “Caption.”

closed captions Storyline variable

  • Insert a text reference of the “Caption” variable so that the caption is visible on the slide. The caption displays the variable which will change at different points on the timeline.

closed captions Storyline text reference

  • Add a trigger to the slide that changes the value of the “Caption” variable at a specific time. The value and specific time come from the SRT file. The value is the text and the time is the starting time for each line. Storyline 1 doesn’t have the timeline trigger. The workaround is to add simple shapes (and move them offscreen) to represent the timing. And then trigger to the start of those shapes on the timeline).

closed captions Storyline trigger

  • Copy and paste the trigger and then add the new values and timing by copying the text from the .SRT files.

closed captions Storyline copy and paste trigger

As you can see, adding closed captions and syncing them to the timeline is pretty easy. Here are a few general tips when working with closed captions:

  • Show or hide the closed captions by adding a button that sets a variable to turn captions on and off.
  • Use a legible text, none of those fancy curly ones. A clean san serif font like Open Sans works well.
  • Come up with a format that is consistent. Because the screen content is constantly changing you want to ensure enough contrast so that people can read the captions. I prefer a semi-transparent black box with white or yellow text.
  • Create a uniform size. The text box that contains the closed captions is dynamic and will change based on the characters (that’s the nature of text variables). That means the font size may increase or decrease based on the character count. Do a test and create a box that accommodates the most text you’ll have at any given time. Then set the font size to that and it should look right as the character count changes.

That’s about it. With a single variable and one trigger you can quickly create as many captions as you need when using Articulate Storyline to build your online training.

Events

Free E-Learning Resources

Want to learn more? Check out these articles and free resources in the community.

Here’s a great job board for e-learning, instructional design, and training jobs

Participate in the weekly e-learning challenges to sharpen your skills

Get your free PowerPoint templates and free graphics & stock images.

Lots of cool e-learning examples to check out and find inspiration.

Getting Started? This e-learning 101 series and the free e-books will help.



9 responses to “How to Add Closed Captions to Storyline 2”

Great video, thanks! Where does the SRT file come from?

Dick

June 11th, 2015

@Dick: there’s a previous post (link is in this post) where I discus how to get the closed captions and timing.

Hey Tom,

Clever bit with the .srt! A solid suggestion for anyone looking to quickly import CC into SL.

Have you noticed any weirdness when doing this with text boxes not keeping the size you force them to be? When my teammates collaborate with me, they sometimes notice the text will auto-resize even though we have explicitly turned this feature off.

Have you run into this at all? We’re using SL1.

Cheers,
Chris

June 15th, 2015

@Chris: the YouTube video explains the auto-resizing. Essentially, the developer creates a text box to display the variable text. That means Storyline will resize the text value to fit into that text box. In the video I explain how to work around that by starting with a text size that won’t require resizing.

June 30th, 2015

The erratic text size was making me unhappy, so I used Nicole Legault’s method for allowing users to select an avatar, https://community.articulate.com/articles/allow-learners-to-choose-an-avatar-using-one-variable, along with the suggestions about using a variable and timing to create a caption block with a consistent appearance. Create a button with a “captions” variable set to 1, and on slides with narration, the caption block will appear and change states keyed to the timing of the narration (I just looked at the audio file in the timeline and made notes about where to change state). Here’s a sample: http://bit.ly/1LSITqf

–mlm

June 30th, 2015

@Margaret: that’s one option, but does require making multiple states of the captions. Storyline doesn’t know how many characters are going to be added to the variable so it is set to autofit based on the size of the text box. In the tutorial I explain how to get a consistent text size so you can account for the resizing of text and not have it resize.

July 1st, 2015

Hi Tom!

Great post, as usual.

What method do you use so that the state of the captions stays the same between slides (so that the user doesn’t keep having to turn the captions on/off every time the slide changes)?

Thanks,
Christian

July 1st, 2015

@Christian: I’d use a T/F variable. Set variable to false. Set captions to hidden state. Then when the user clicks the caption button, it sets the variable to true. Have a trigger that changes the state of captions to normal when variable is equal to true. As they go through each slide, the variable will stay active so it will show or hide captions based on the value of the variable.

You can learn more or get more detail if you pose a question in the community since the blog comments isn’t the best way to address the technical stuff. Hope that helps.

July 6th, 2015

Thanks, Tom. That’s pretty much what I figured, but I was wondering if there were an easier way.
I’ll post to the community forums to see if anyone has a different solution.

~C