Articulate

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 🙂

Free Course Starter Template

Each week when I start a new project at work, I love trying to think up ways to put a slightly unique spin on the experience while still staying true to the format I’ve been using. There’s something about consistency that is both helpful and boring at the same time. One on hand, the learner can concentrate on the content because they know what to expect out of the user experience–so no guessing on “How do I interact with this object,” or “what am I supposed to do here?”

But at the same time, the user can quickly become bored and think, “Not another lame eLearning.” This is where a slight tweak comes in handy.

I think it’s possibly to have unique “slides,” each serving their own purpose but still having the tie in of a theme through use of:

  • Color
  • Font
  • Image theme
  • Transition
  • Animation

This week I created a Storyline 2 template that is a blue photography theme. I’m hoping this will inspire others out there to download and modify the theme as needed. Change the images, modify the colors, choose a new font! Go crazy.

CourseStarter

Demo

Download the Template

Creating the Ultimate Memory Game

This week, I took a look at a bunch of other Storyline 2 Memory games that were available online, and all of these card-flipping games left me longing for Simon.Capture

Everyone who was born in the 70s or 80s knows how awesome the game Simon was. The anticipation of the crazy pattern alone was enough to drive you crazy, and Simon gave immediate feedback, which sometimes was soul-crushing when you were incorrect.

Creating the buttons was easy. Thinking through the logistics of how to make it work was not so easy. I contemplated using a million layers (blah). It could have worked, but it was a workaround (boo). I toyed around with the possibility of using true/false variables, but this only really worked when I used two colors (one time each: blue, yellow).

I knew it was a matter of assigning numerical values to actions, but all I could think was this was going to turn into a crazy mathematical sequence from high school algebra or something. You remember…

5 (+3), 8 (+3), 11 (+3), 14 (+3)…

I also knew that I couldn’t have the value of any two clicks equal the same number. For instance, if the pattern was blue (+1), yellow (+1), I needed the computer to know that the person clicked blue, not yellow. With the same values assigned to both, this wouldn’t work.

I also knew that I might want the pattern to contain two of the same color in a row, so counting userClicks became important.

I actually have to give it up to my husband who mentioned prime numbers, and I tried that out…tada! It worked. Let’s explore how and why (for the first light pattern: blue then yellow).

 

Creating Variables

First I created two variables, clickNumber and sumTotal.

 variables1

clickNumber = how many times the person has clicked

sumTotal = each colored button has a value assigned to it, and when you click on a button, it adds the value of the button

  • blue = 1
  • yellow = 3
  • green = 5
  • red = 7

 

Setting Variables to Zero

Then on the slide, you have to set the variables to equal 0 at the start of the slide so the math is done properly and matches up with your values later.

setto0

 

Officially Assigning a Value to Each Color

Now, I said above that each color has a number associated to it. You actually have to create the number values as triggers.

setuptriggers

 

See?

B (Blue)

When the user clicks blue, add 1 to the clickNumber (you clicked one time).

When the user click blue, add 1 to the sumTotal. (1 = blue).

For the first click (which is blue), the variable will have +1 added to it because blue = +1.

 

Notice above that each color has a different sumTotal associated with the color. G(reen) = 5, R(ed) = 7…yadda yadda.

 

Associating the Incorrect Response to an Incorrect Click

If you remember, Simon doesn’t reward you for tapping each correct button. It just keeps moving onto more difficult patterns if you press the easier patterns correctly. However, it does let you know when you are incorrect!

I made an incorrect layer that redirects you to the lights pattern again, and I also made a correct layer (for when you are finished the whole correct pattern, i.e., press blue then press yellow…correct!). Whenever the number of clicks doesn’t match up to the value it’s supposed to, the incorrect layer will display.

You can see in the trigger below that if the first click (clickNumber = 1) adds a value to the sumTotal that is NOT equal to 1, it will show the Incorrect layer; this means the player must have clicked another button (besides blue) since yellow, green, or red are not equal to +1.

incorrect

On the second click (which is supposed to be yellow), the user should technically have these values:

  • sumTotal = 1 (from blue) + 3 (from yellow) = 4
  • clickNumber = 1 (from blue) + 1 (from yellow) = 2 total clicks

So we set up a trigger to show the Incorrect layer if the second click (clickNumber = 2) adds a value to the sumTotal which makes the sumTotal NOT equal to 4, it will show the Incorrect layer.

click2

 

Associating the Correct Response to User Behavior

If you’ve followed the pattern correctly (blue then yellow), you will be automatically taken to the next “level” with a more difficult pattern.

So you need to show the Correct layer when the sumTotal variable changes and becomes correct, 4 (because 1 [blue] + 3 [yellow] = 4). This total of 4 should only happen with 2 clicks (so the clickNumber is equal to 2).

correct

 

Making More Difficult Patterns

And for more difficult patterns, you add more of the Associating the Incorrect Response to an Incorrect Click steps. For example, if on the 3rd click you wanted the user to press blue again, then you would add another Incorrect trigger that says:

  • sumTotal not equal to 5 (1 [blue] + 3 [yellow] + 1 [blue]
  • clickNumber equal to 3 (3rd click)

 

Check out the demo or download the .story file to take a closer look.

Also, feel free to download the button files to change the colors as you wish.
Creative Commons License
Memory Game Buttons by Lauren Franza is licensed under a Creative Commons Attribution 4.0 International License.

 

Freebie: Three (OK, Four) Interactive Tabs

When developing eLearning or online courses, it is important to remember that you are not just “information dumping” on the learner. But what happens when learners need to be presented with information that isn’t so interaction-friendly?

I recently had to create an Corporate Compliance eLearning where some of the information just NEEDED to be displayed for employees to read because it was mandatory that all employees were presented with and acknowledge that they received certain compliance regulations.

But we can still do it in a way that involves the learner being an active participant somehow…right!??! Of course.

In this particular case, I wanted to take these bits of somewhat-legalese and chunk them into more concise, digestible bits–so I got creative with interactive tabs.

Tabs are a great way to highlight key points, number steps of a process, allow a learner to choose to explore more information, and make it interactive.

I created a little freebie with a blue theme for anyone who’s interested.

Capture

Demo

Download

 

eLearning Helper Challenge: Custom Course Player

Creating a custom course player can really enhance the user experience and take a course from “Oh, that looks like it was made in Articulate,” to “Wow!”

I am guilty of being the course player snob at work when I am evaluating pre-made courses that my company purchases in HR. Once I spot the player, I can usually tell which eLearning software was used to build the course. But every once in a while, they leave me stumped…and I love it!

Thinking outside the box about how to use features makes work fun. I’ve seen people use two features together in ways that I’ve never even thought about…and sometimes I’m a little embarrassed that I never thought about it!

As far as creating a player goes, I pretty much gave up in interest once we decided on a theme, logo, and style for my eLearning player at work–Marketing says we’ve got to be consistent for branding and multimedia style guidelines! I get it, and I agree.

But for today…here’s a little break from my norm.

*Updated: I was playing around trying very hard to lightbox language selection in the upper right tab, but then after much research and trying found that you cannot really put variables in a lightbox because the original slide you are on becomes paused. I am hoping for some more advanced features in Storyline 3! My Language Selection tab isn’t a 100% solution for dual languages, but it’s a start.

Culinary

Demo

Download 

Download with updated language selection tab

 

eLearning Helper Challenge: Labeled Graphic Interactions

In this week’s challenge, the Articulate community was asked for labeled graphics that contain click-and-reveal interactions. Interactions like this help the learner to access information if and when they want it.

I find these kind of interactions great for:

  • Maps
  • Virtual tours
  • Blueprints
  • Factoids in a video

While the built-in markers are great for quick projects, I personally like to create my own labeled markers to give me a little more control over how content appears. One negative thing about creating my own markers is you can’t apply a constant “swirl” or “pulse” effect like the built-in markers…unless someone wants to write some tips in the Comments below! 🙂

I make a lot of labeled graphic interactions during work, but unfortunately our content is for internal training purposes. So for this challenge, I made a little dental x-ray just for fun. There are some CC-BY-SA on some of the images in this one. You can find more information in the Notes section.

xray

Demo

Download

 

eLearning Helper Challenge: Double Image

My current job is working at a non-profit for organ and tissue donation. As you can imagine, it is an amazing place to work. There are stories of hope, stories of better health, and stories of success, but there are also stories of giving hope…to another family.

So in addition to creating educational materials for our staff, for medical professionals, and bio-implant specialists, we also have a need to create educational materials for the community.

The reason I really like these eLearning Challenges is because it gives me an opportunity to learn something new, try it out, and immediately use that knowledge.

This week’s challenge was to create an eLearning with a fancy cover slide that contains a double image. I found a topic that would allow me to practice using this technique that might inspire me later during work projects. With just the right animation/fade, this double image technique suddenly becomes filled with emotion…which is perfect for educational materials when dealing with difficult and emotional subject matter.

DoubleImage

Demo

Download– I had to use different images for this one since my original file contained stock photos through a paid service.

 

 

eLearning Heroes Challenge: Food Prep

So I spent the last two days (not literally two days…just the leftover hours in two days after you put a toddler to bed) trying to make something for the Food & Beverage Prep industry, and it took me back to my days as a Burger King employee.

My first day as a BK employee involved watching three hours of training videos and then being thrown over to the “Burger Board” to start making burgers. Unfortunately, the training videos only covered sexual harassment and what to do if you are robbed.

There I was in the middle of the lunch rush, being asked to make four BK Burgers. “What the heck is a BK Burger,” you may ask yourself. After being bombarded by orders that I didn’t know how to make, I remember going home and HATING that first experience.

Hence, my Food Prep eLearning: Assembling the Perfect Burger. If I would have had the opportunity to practice making virtual burgers before being tossed to the burger wolves, my experience may have been a lot different

perfectburger

 

 

 

 

 

 

 

 

 

 

Demo

Download the .story file

eLearning Heroes Challenge: Parallax

I use Articulate on a daily basis to create interactive eLearning activities, but this eLearning Heroes Challenge was definitely a…challenge. This week, “Articulate Dave” asked the community to create a parallax using sliders in Articulate Storyline.

As Dave defined, a parallax is:

…a motion effect that’s used to simulate depth by animating background images slower than foreground images. 

Basically, it’s that fancy feature with your new iPhone that makes it seem like the background on the phone is moving when you tilt the phone around from side to side.

I plan to update later about what I did to create this effect. I’ve got to be honest; it took me forever (or so it felt like it), but I’m really excited about the end result.

And I always feel like I need to make the challenge relevant to some kind of subject matter. So…here ya go.

parallax-0215

 

 

 

 

 

 

 

 

 

Demo Available 

 

eLearning Heroes Challenge: Zooming

This week’s eLearning Heroes Challenge is Zooming and Panning. In this brief eLearning, I’ve used the zoom in feature in Articulate Storyline 2 to create the perspective of a learner as they look around the room to locate possible violations in a laboratory setting.

I have not used the zoom feature in my trainings yet in a professional setting, but this eLearning challenge has helped me become more familiar with this feature. Each time I start a new project, I like to see if I can utilize something new or advanced. So here’s to looking forward to new functionality in an upcoming project! 🙂

ELH_Zooming_0115

 

Demo Available

Download Available