Video Production

Making Your Own Closed Caption File for Articulate Storyline 360

So if you’re like me, you probably squeed when Articulate announced that the latest update to Storyline 360 included REAL closed captioning!

But then you looked into things and sighed when you saw that you must already have the closed caption file (SRT, VTT, SBV, and SUB).

Many of us are instructional designers who are asked to created an eLearning activity that can be used in a K-12, higher ed, or business environment, and our resources are ones that we’re making from scratch. When this happens, there is no already-existing closed caption file. And if you’re blessed with resources like money (Adobe Premiere Pro) and time (the ability to upload videos to YouTube, caption them yourself, download them from YouTube, etc.), then that’s great. Most of us, though, don’t have such luxuries. 😉

However, there is hope!

All you need is your script, your Storyline 360 file that already contains audio (or your video that already includes voiceover), and a text editor…and you, too, can be an closed captionin’ captain (I was looking for a fun rhyme; this was all I came up with.)!

Important Note: Before you create your own closed caption (CC) file, it’s important to note how many audio or video files you have that need captions. For example, one video is one file; therefore, it only needs one CC file. But if you’ve got 15 little audio files that are sprinkled throughout a Storyline file, you’re going to need to create 15 little CC files.

Let’s get to business.

  1. Open up a text editor like notepad. You are going to want zero formatting capabilities in this file–plaintext only.
  2. Paste this starter text into your file:
    1
    00:00:00,500 --> 00:00:07,500
    Welcome to my caption tutorial!
    
    2
    00:00:08,000 --> 00:00:10,500
    Here are some closed captions.
    
    3
    00:00:12,500 --> 00:00:17,000
    How do they look?

    Those numbers above are timestamps. They indicate the precise moment when the text should appear on the screen. The format is:

    HH:MM:SS,ms (milliseconds, which contain 3 digits)

    00:00:00,500 –> 00:00:07,500 means that the text “Welcome to my caption tutorial!” will appear at 500 milliseconds and will stay visible until 7 seconds and 500 milliseconds.

  3. Now view/listen to your file that includes audio. Make note of generally when each sentence or short paragraph is read aloud and when that sentence ends (e.g., “Welcome to my caption tutorial” starts at 0 seconds and stops 7 seconds in.). These time estimates can start out general; we’ll tweak them later on.
  4. Once you’ve taken note of the timestamps, start putting the sentences into your plaintext file. Be sure that each timestamp includes three (3) parts:
      The number (indicates which sentence it is)
      The timestamps (when it appears and disappears)
      The audio text
  5. Since my sample file above only has three sentences, there are only 3 timestamps in the sample file.
  6. Continue adding all of the audio text in this format.
  7. When finished, click File > Save As
  8. In your filename, add the extension .srt at the end.
      If your audio is English with no special characters, select ANSI.
      If your file is in another language that requires special characters, select UTF-8.

  9. Click Save.
  10. Once you’re finished, make sure your audio/video file has been added to a slide in Storyline 360.
  11. If it’s a video, click the video layer so the Video tab appears. If it’s audio, click the audio layer so the Audio tab appears.

  12. Click the green + icon to link your .srt file to your audio/video.
  13. Once you’ve linked the file, you should see it listed after the word Captions:
  14. Preview your slide. You will need to click the CC button to see if the text is properly synced with your audio/video.
  15. Make changes to the timestamps in your .srt file as needed. If you make changes, be sure to lync the updated .srt file to your audio/video by clicking the green + icon in the Audio or Video tab.

Helpful tip: Listen to the audio on the active slide by clicking the audio layer (or view the video by hitting the spacebar). As you hear a sentence begin and end, press the C button on your keyboard to create some cue points, helping you determine the timestamps.

 

Demo

Download the Files (.story and two .srts)

 

*Note to readers: This is my first attempt at being active online again since having my daughter, Ava. I apologize if the many disruptions from a crying baby have caused this post to be all over the place 🙂

Designing, Developing, and Implementing

The video above shows a brief look at the features and content provided in MISSION:RECON. Video produced by Lauren Franza.

 

For three years, I was the Lead Instructional Designer at ATLT Games. I met daily with a team of instructional design assistants, subject matter experts, and game developers to create an educational video game that helps entering college students prepare for their college math placement tests.

Visit the MISSION:RECON website for more information.

Creating Animated Videos in Premiere Pro

(c)2010-2014 ATLT Games

 

(c)2010-2014 ATLT Games

 

When I was the Lead Instructional Designer for ATLT Games, I developed a few concept videos for our video game, Pi & The Lost Function. These videos helped our story writers understand possible plot lines and themes that would work well with the instructional content we developed.

All animations were done using Adobe Premiere Pro and Adobe After Effects by Lauren Franza. Graphics in these animations were created by Katie Cavitt.

 

Using Adobe Premiere Pro to Create a Kickstarter Video


During my time as Lead Instructional Designer at ATLT Games, our company decided to start a Kickstarter campaign. Kickstarter is a website that allows individuals and small companies to create fundraising opportunities that allow ideas to be funded by the public.

We wanted to create voiceover (having someone read text aloud) for all game dialogue, but we needed an informative video to help explain our cause. I worked with a coworker to create the storyboards for the video, and then I personally filmed, edited, animated, and pieced together all footage using Adobe Premier Pro, Adobe Audition, and Adobe After Effects.

Online Training for Site Directors

 

As the Education Director at Junior Achievement of Greater Hampton Roads, I worked with many site directors from summer camps, clubs, and after school programs.  Each site director needed to be trained and equipped with the proper materials necessary to teach the JA curriculum to their students. I was equipped with a Flip camera and a very tight budget. Therefore, to assist site directors who did not live in the area, I created an online training video to give them access to quality training, resources, and a step-by-step overview of the materials.

 

Online Training for After School Programs

As the Education Director at Junior Achievement of Greater Hampton Roads, I was equipped with a Flip camera and a very tight budget. Using the Flip camera, I created a training video for our after school programs to introduce the site directors and program managers to the materials. This video allowed the site directors to make sure all employees were knowledgeable in the curriculum materials, as many after school programs have a high employee turnover rate.

Online Training for Volunteers

 

As the Education Director at Junior Achievement of Greater Hampton Roads, we had anywhere from 300-500 community volunteers each year. Each volunteer needed to be trained and equipped with the proper materials necessary to volunteer in the local schools. I was equipped with a Flip camera and a very tight budget. Therefore, to assist volunteers who did not live in the area, I created an online volunteer training/orientation video to give them access to quality training, resources, and a step-by-step overview of the materials.