Closed captions in e-learning

View Demo Download SL1 file Download SL2 file

A while ago I was talking to a fellow developer and we discussed closed caption boxes for slides with voice-overs. The default Notes pane that you’ll find in Articulate Studio and Storyline might not be what you want to use as it doesn’t fit the design you’d want as naturally. Yet having the functionality of showing a learner what narration is being played on the slide can be desirable in some projects.

This may be rather obvious if you know there are people that are hard of hearing or deaf but less obvious if you take into account the fact that many organizations use open office spaces and, by default, do not supply headsets to their employees.

So, for your convenience, I quickly set up this example and decided to share it all of you.

If you like it or have any questions just let me know in the comments below.

Creating a ‘Digital’ magazine style for your e-learning

As you might know I’m a big fan of the weekly Articulate challenges. I don’t always have the time to participate in all but I always peek in and sometimes even park them for when I’ve got the time as the challenges are always open. In Challenge #58 you can get your creative juices flowing by creating a digital magazine style for e-learning modules that are more text based.

I create a lot of text based e-learning as, with global companies, audio playback can be an issue in open office spaces or in places where the computers simply do not have audio capabilities (yes, it happens more than you think.) In this case a magazine style can work really well. So what do you need to create a professional looking magazine style template? Here are some tips to get you started

Welcome to the grid

Magazine layouts vary a lot, from the basic 1-2-3 column setup to more creative layouts. You need to figure out which kind of layouts you want to use and which match your course design. Luckily there are tons of cool layouts available. The pro’s call these layouts a ‘Grid’. Check out this page with some pretty nice grids for your inspiration. Here’s another example. As you can see, the possibilities are endless and you just need to figure out what it is you want, and need. Tip! Don’t go all out when starting with this. If you’ve got 4-5 different layouts you’re good to go.

Color me purple

Okay, so you’ve got your grids covered. Now it’s time to come up with a design (note: you can also try to find some design inspiration first and adjust your grids to match). Now I’m a creative guy but that does not mean I go about reinventing the wheel. Especially with so many cool wheels available to me. What I love to do for design inspiration is search Pinterest and Google images. While searching with the keywords ‘magazine’, ‘layout’ and ‘grid’ I found some really cool designs that could work like a charm when setting up an amazing magazine layout. Check out this, this and this. Oh and don’t forget this one.

As you can see, again, it’s all out there. Now you just have to put it together.

I click so I exist…

Okay that’s not exactly true but now that you’ve got your grids and design inspiration you want to consider what kind of interactivity you want to add. The basic ones are playing back some audio, (e.g. a mechanics course where you can recognize technical issues by listing to the car: playing the sound of a car with a hole in the tail pipe), clicking a still image to start a video (in that same place or enlarging it to a lightbox or full size video), you can use an image slider and some click and reveal interactions to show ‘more’ relevant content. There are plenty of cool videos on YouTube about online magazines and apps that can help you with some inspiration.

Another cool but (slightly) more advanced interaction you could add is a slider interaction. Stuff like a 360 image view or interactive graphs are easily done in Storyline 2 and can really bring that special something to your course.


If you really want to go that extra mile add some animations and transitions. Again, don’t go overboard here select a few and use them consistently. Tim Slade uses some nice yet simple animations and transitions in the example he submitted for this challenge. Or check out this example Melissa Milloway submitted. Pretty schweet right?!

Now go ahead… go play!



Articulate Gebruikersdagen 2014: Het Programma is Bekend!

Nog ruim een week en dan is het zover. De 3e Nederlandse Articulate Gebruikersdagen op 19 en 20 november in Utrecht. Ja! Dagen. Dit jaar voor het eerst een tweedaags evenement. Als organisator zijn we erg trots dat we de weer de kans hebben om een podium te creëren voor vakgenoten zodat zij hun ervaringen en kennis met ons kunnen delen. We hebben weer een interessante  mix aan sprekers dus dat beloven twee leerzame dagen te worden.

Aanmelden voor de Articulate Studio dag is nog mogelijk, de Storyline dag is helemaal vol!

Hierbij het programma voor de twee dagen:


  • 09:30 – 10:00 INLOOP MET KOFFIE EN CAKE
  • 10:00 – 10:05 OPENING COEN FLACH
  • 11:20 – 11:40 KOFFIE/THEE
  • 13:00 – 13:45 LUNCH
  • 15:00 – 15:20 KOFFIE/THEE
  • 16:10 – 16:35 RENE KOPPES – HTML5 TIPS EN TRUCS
  • 16:35 – 16:40 AFSLUITING COEN FLACH
  • 16:40 – 18:00 NETWERK BORREL


  • 09:30 – 10:00 INLOOP MET KOFFIE EN CAKE
  • 10:00 – 10:05 OPENING COEN FLACH
  • 11:20 – 11:40 KOFFIE/THEE
  • 13:00 – 13:45 LUNCH
  • 15:00 – 15:20 KOFFIE/THEE
  • 16:35 – 16:40 AFSLUITING COEN FLACH
  • 16:40 – 18:00 NETWERK BORREL


Tot dan! Ik heb er zin in.

Adding a video presenter to Articulate Storyline


View Presenter video demoDownload prepared .story file

A while ago I did a demo for an Articulate Challenge on using characters in e-learning where I added a presenter video to the course (also referred to as ‘talking head’ video). I think this is a great way add a human touch to online training and give the learner someone to connect with while going through the content. The success of MOOCs (massive online open courses) which use mainly video lectures are a great example of  successful presenter video.

The demo I created was built in Articulate Studio which has a default feature to add video to the course player. Unfortunately for Articulate Storyline users this is not a default feature for the Storyline player. Luckily you can create something like this fairly easy. As with most things there are many different ways to this and I show you just one of the ways to make this happen.

Making some choices before getting started

Before we start adding video to the slide in Storyline you need to think about the consequences of adding a presenter video, how does it affect your layout, what size does my slide need to be… stuff like that.

If you take a look at a default Storyline slide you’ll see it has a 4:3 format (720×540 pixels). When you turn on the menu, on the left or right hand of the slide, via the player options you’ll get a 16:9 format (960×540). What you want to do is emulate that sidebar without using the actual player side bar. So here’s what you need to do:

  1. Change the size of your slide from 720×540 to 960×540 (Design tab > Storysize)
  2. Add a rectangular shape to you slide and size it 260×540 and align it top-left or top-right (depending on where you want the sidebar)

You should end up with something that looks like this:


As you can see you’ve now created a sidebar without sacrificing your content area would you use a default 4:3 format.

The rest is simple. Record or add existing video via Insert> Video, re-size it (max width 260 px) to fit the sidebar area and, if you prefer, remove rectangle place holder sidebar.

That’s it.

For the lazy ones among us you can also download a prepared .story file with the sidebar right here.

Add a knowledge check to your video

It’s a great time to be working in the online learning industry. Technology has never been more accessible and things that would cost you an arm and a leg in the past are things you often can do yourself these days. Take video for example; recording, editing and publishing video materials is a breeze and that makes it super as a media asset in your learning solutions.

The thing is, that by default, video is quite static. You can only watch it, not interact with it. Luckily with Articulate Storyline you can add content on top of your video at specific moments in time having additional content appear making the ‘just video’ an even richer experience (when done correctly off course). You can choose to have users interact with the video to show additional content or choose to show it when you deem it valuable.

Recently I was taking a Coursera course, which, as you might know, is mainly video content with additional assignments. During the video lecture they had little knowledge checks pop up, pausing the video and forcing you to think about the content that had just been shared with you, or was about to be shared. This is a very simple but effective way to get you learner into action and to stir their brain.

Luckily such techniques are not only available when you have a massive budget. You can easily build something like this in Articulate Storyline. Check out the video below to learn how! (Note there are many ways to do this, this is just an example)

There you have it. Simple and effective.

As you can imagine, you can use this for any type of video and, as I mentioned earlier, you can test knowledge you are about to share, triggering the user to think and perhaps, rethink their answer along the way or just test them after the delivery of the information.

Maximize your image quality in Articulate Studio

From time to time I hear people complain about the loss of image quality when publishing a course in Articulate Studio’13. In this short video I’ll show you how you can maximize your image quality output.

1. Make sure your imported image meets your quality needs

Sometimes that image you insert into PowerPoint just isn’t that great to begin with. Be mindful that, when copying from different PowerPoint slide decks or from the internet, the quality may not be that great and that a quick copy-paste action might actually decrease the quality. So start with a proper quality image to begin with.

2. Adjust the Articulate Publish settings

Articulate Studio has got some default compression standards you should know about. When publishing a course I tend to customize the default settings to my specific needs. You can change video, audio and image compression right there before publishing.

3. Don’t forget PowerPoint

Although you’re publishing your course using Articulate Studio, most of your content editing is done in PowerPoint and this, as it turns out, has some image compression settings of its own. You can adjust these by going into File > Options > Advanced. Here you’ll find the image size and quality settings and this is where you want to turn on the ‘Do not compress images’ feature. This way PowerPoint will not compress that perfect image you just inserted. Unfortunately this is not something you can make a default PowerPoint setting so you’ll need to do that for every project you’re working with.

Tips for eLearning Audio recording on the go

So you’re looking to record audio for your e-learning courses but you don’t have a big budget.

First, let me clarify something for you. A Mercedes is going to cost more than a Daewoo. The price difference will become ultimately clear when you drive them. A Mercedes is a higher quality car than a Daewoo. The same thing goes for microphones. That doesn’t mean that a Daewoo is all you need to get to where you need to be.

I don’t own a Mercedes microphone but got a couple of very simple but sufficient microphones. I’ve got a simple Logitech USB desktop microphone and a basic Logitech microphone headset. Both where below €28,- and more importantly both have a noise canceling feature. I mainly use them for screencasts with voice-overs, video tutorials etc. and they work brilliantly. The price is great as I record anywhere and everywhere, so when it breaks I just get a new one.

There are a couple of basic things you need to take into account though.

1. Always record in the same place

For a single project I always record in the same place. That way the background noise and acoustics are the same throughout my entire course. So that doesn’t mean I’m in a single spot every time I record my audio, you can find me in my home office in the attic, at the kitchen table or in one of the many meeting rooms at the office,  but it does mean that I use a single spot per project. When selecting a spot I check a couple of things:

  • Is there an air-conditioning system and how much noise does it make (I prefer to be in a room without)
  • How much traffic is passing by this spot (co-workers walking to the coffee machine, cars and trains, that kind of background noise)
  • How are the acoustics of the room
  • What is the availability of the room

If I think it’s a place I can record, I setup my laptop and microphone and do a little random recording and listen back to the quality of the recording on my headset and listen for the before mentioned background noises. If they’re hardly there you’ve found a good spot.

2. Use the same tools during your project

Now when you start recording, and this may seem obvious, within your project, always use the same tools. Don’t switch microphones and use the same recording program. These things simply effect your recordings, making them stand out from the other files you’ve already recorded.

I sometimes use Audacity to record my audio but usually I record in Articulate Storyline, Studio or Replay using the built-in recorder. They’re simple and effective and give me the quality I need.

Tip! Check your recording levels before you start recording. For some reason my laptop ‘resets’ the recording level to 80, which means I have to manually set it to 100 before I start recording.

3. Let others know you’re recording!

Very thoughtful, those colleagues that pop in to ask if they can get you anything to drink or, when working at home, your wive that comes up to tell she’s going to the market. For some reason this is always in at the end of a long take… So tell them you’re recording, put a post it on your door and get rid of those well intended but annoying interruptions.

Happy recording!


This post is part of the weekly Articulate challenge on Audio Recording.
Read many more tips right here in the challange recap.


Time-lapse video for dummies

View org. chart demoView time-lapse video

For a recent Articulate eLearning Heroes challenge I created an interactive org chart. Once I posted it I got a lot of positive reactions and questions asking me how I set it up. Inspired by a time-lapse video done by fellow Articulate Super Hero Tim Slade I set out to create my first time-lapse video.

So for those of you new to the term a time-lapse video, simply put, is basically a video put on fast forward. So a video of sunrise to sundown displayed in 3 minutes would be called a time-lapse. You might have seen such a thing on tv or in a movie. The same principle can obviously be applied to a software instruction or demonstration video as well.

So what kind of tools do you need to this, I wondered. I need something to record my screen so I can create a record me building the interactive org chart. I need a video editing tool that can fast-forward my video and add some up-tempo music to accompany the video and a place to host my video to share it with the world.

Recording your video

Now I’m lucky to have Articulate Replay, a super simple yet powerful screen recording tool but there are quite a few other options out there. There’s where you can record 5 minute videos, which you can download to your local machine, as well as other software programs you can use to capture what is happening on screen. As I said I started Articulate Replay, pressed the record screen button and started recording the video without audio. After 21 minutes I was done and published the video to mp4 format.

Editing your video

moviemakerUnfortunately I did not have any video editing software on my pc and did not want to spend any money on it so a quick google search led me to Microsoft Movie Maker, a free software tool that allows me to edit videos, Yeah!

I basically opened my video in Movie Maker and clicked the Edit tab where I found the playback speed feature and played around with a different time settings and decided to go with 16x playback speed as I did not want my video to last much longer than 2 minutes and this turned out at 2:40 and seemed to play at a reasonable pace, viewers still being able to see what was happening. After that I added had to find some nice music to add to the video. I chose Pharell Williams – Happy, as it always makes me happy and has that up-tempo beat that works well with fast playing video (try adding some ballad and you’ll know what I mean). Again Movie Maker came to my aid as I could set the audio to fade in and out at the beginning and the end of the video and even assign at which time the audio should start (there was a 14 second intro in my mp3 file before the music actually started playing).

Shareing your video

With that all done I saved my video ‘for Youtube’ getting a high-resulotion mp4 file which I was able to upload to YouTube since I have a free account there. Obviously there are other ways to share your video like Vimeo, Instagram and Facebook. …And that’s it really, so go ahead and try it yourself!


My first podcast… Aaaarggh!!

Last week I did my first podcast. It was one of the weekly Articulate community challenges hosted by David Anderson. The mission, should we choose to accept it, was to record answers to interview questions and post them online. Now I do regular screencasts, which I enjoy a lot and most are done in one or two takes. So I figured doing a podcast would be easy-peasy.

…but it wasn’t. It took me hours to do and what feels like a gazillion takes!  So why was this so different from doing a screencast? It’s just answering questions and you’re not even recording your actions on screen together with your yourself on the webcam. By all accounts this should be simpler. This was the main thing on my mind after all those hours I spend trying, and failing, to create the podcast.

It was when I looked at my process it all became very clear to me. When I do a screencast I prepare some basic things, visuals for what I’m going to show, when recording myself I prepare the environment (remove the laundry hanging behind me and pushing all those boxes outside camera range) and that’s about it. I start recording and voila, the magic just happens. Now for the podcast I prepared my answers to the questions and I figured that was it. Record it and done… not so. For some reason ‘scripting’ myself is very unnatural. When I screencast I just start talking about what I’m doing and why without any kind of script. So working with a script made me over analyze… well everything really. Am I talking at a good tempo, how is my pronunciation, am I talking at a constant volume, am I keeping to my script, how’s the background noise, does it feel natural. All these question were going through my mind when I was recording… that and remembering to breathe!

I hadn’t guessed I could talk so much in a single breath, however after a little while it becomes increasingly difficult. #$%^!@ since when do I need to think to breathe??? Stop all this thinking!

So I sat back and stared at my laptop for a while and did nothing, trying to clear my mind and, when the frustration subsided, I tried again. I told myself no need to keep to the script exactly it was just preparation, you know the answers to these questions. Relax! It doesn’t need to be perfect.

I pressed the record button and just talked…

I wasn’t the only one participating in this challenge, check out the other contributions right here.

What’s in your e-learning utility belt?

As an instructional developer, elearning designer, or whatever you call what you do when you create online training, you run in a lot of cool tools that will make your life easier and make you into that super amazing elearning guru that your are… Collect them and create your very own Superhero-eLearning-Utility-Belt.

In this post I’ll share some of my favorite free tools with you!
The new free online version of Microsoft office. So much better than Google docs. I mostly use Word as I’ve got a paid version of MS office 2010 but it the ease of use of the new online office, connected to my Microsoft OneDrive really makes it easy to create, edit, store, print and share my documents when and wherever I need.
What can I say, my professional life is in my dropbox. My software, my administration, source files. It’s all safely tucked away in my dropbox. My computer can crash a gazillion times (as windows machines do) all I need to do is install my dropbox client, leave on my pc for the night and I’m good to go!
Social media/marketing tool that allows me to buffer my tweets, linkedin and other social media posts in a way that I can go online post and retweet whatever I deem valuable and it automatically spreads the messages at optimal time intervals over the various media. Brilliant!
Design inspiration finder… Just type in some keywords that relate to your course topic and the most beautiful images, infographics etc. will appear.
Search for a gazillion icons and icon themes. There’s even a ‘license free’ button. Super easy!
Need a new font for your project. Find it at DaFont. Be sure to keep things simple and clean. Don’t go overboard on all the mad fonts that you can find. The advanced search feature let’s you filter for license free fonts.
Even better then DaFont, is google web fonts. I just love these clean fonts and so should you. They’re free and easy to use.
Super easy Photoshoplike online image editor. When I’m not using powerpoint to edit images and don’t have photoshop handy this is where I go.
Brilliant online tool to get some cool and complementary color schemes |
Designer websites that offer freebies. You can get amazing stuff for free. Just download it and store it for whenever that project comes along that needs just that. I especially love backgrounds and UI examples.
How can we miss this one… The tutorials, the forums, the blogs, the downloads, the freebees from fellow Articulators… I would not be where I am today without this amazing community.