Looping Animations in Articulate Storyline

Looping animations in Storyline, by default there is no such thing (wouldn’t that be nice). However during a recent Articulate e-learning challenge about button animation and effects, an idea popped into my mind that I wanted to share with you.

Back in the days of Articulate Studio’09 there used to be a next button in the default player that started pulsating when the timeline ended. This was a perfect way to indicate users that they should click that the content on that slide had played out and they should click the next button to continue.

When Storyline 1 came out with its new player as well as Studio’13, the pulsating button had vanished as a feature in the default menu. Now some years later I still see the question being asked from time-to-time how to enable the pulsating button.
looping animation

This is where looping animations come in. If I am able to change the appearance of a button with a fade-in and fade-out animation, two basic entrance and exit animations in Storyline, I could mimic such an effect. The fade effect should be really short and… it should loop until the user clicks that next button to jump to the next slide.

This is exactly what I made happen. Check the demo and tutorial video below to learn how. If you like you can download the Storyline 2 source file to see how I did it.

Play Demo   Watch Tutorial   Download file


Questions or remarks? Leave your comments below. Don’t forget to share!

Creating Animated Buttons in Storyline

Hey Everyone,

In this post I’ll share how you can add that little extra to your project by animating your buttons. In this weeks Articulate eLearning Challenge Community Manager David Anderson set the challenge to create creative buttons and he shared some awesome examples he found on the web.

Having seen these examples I set out to recreate some of those effects in Articulate Storyline 2… and it was easy!

Check out my demo and view the video tutorial to learn how to create these kick-*ss buttons! Feel free to download the Storyline 2 file to see how I put these buttons together.

View Demo    Video Tutorial    Download Source File

Note that HTML5 does not support all Storyline animations. Be sure to try out different animations before creating your buttons.

If you like this post or have some questions please leave me a comment below and feel free to share this post.

How I Get Things Done with Jeff Kortenbosch

As part of the ongoing Articulate e-Learning Heroes challenges David Anderson asked to record a Podcast or Vodcast explaining how we we get things done. He provided a nice list of interview questions and the result of my very first Vodcast (video podcast) can be seen below.

What’s your job title? What title do you think really captures your roles and responsibilities?

What software tools do you love?

What’s your workspace setup like?

What is your creative or design philosophy?

How do you stay fresh and keep building your skills?

How do you avoid burnout?

How do you save time and boost your efficiency day-to-day?

How do you manage your workflow? Do you have a project management tool you love?

What kinds of tasks do you love to do? What gets you excited to sit down at your desk?

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.

Whoa!

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!

 

 

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:

sidebar

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.

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 SCREENR.com 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!

http://office.live.com
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.

http://www.dropbox.com
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!

http://www.bufferapp.com
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!

http://www.pinterest.com
Design inspiration finder… Just type in some keywords that relate to your course topic and the most beautiful images, infographics etc. will appear.

http://www.iconfinder.com
Search for a gazillion icons and icon themes. There’s even a ‘license free’ button. Super easy!

http://www.dafont.com
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.

https://www.google.com/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.

http://www.pixlr.com/editor
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.

http://colorschemedesigner.com/
Brilliant online tool to get some cool and complementary color schemes

https://creativemarket.com/ | http://www.webdesignerdepot.com/category/freebies/
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.

http://community.articulate.com
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.

 

What does an e-learning specialist really do?

“Have you ever tried explaining what you do to your friends or parents? Anyone? Chances are you were met with a blank or quizzical look. While most jobs can be tough to explain to people outside your industry, e-learning design has to be one of the most challenging jobs to explain. The industry is relatively new and requires designers to juggle a variety of skills from writing to design to project management to counselling.”.

In this week’s Articulate e-Learning challenge we’re asked to create an explanation of what we do using the “What people think I do/What I really do” concept.

What my friends think I do
Honestly, I don’t think they have the slightest idea… I guess they’re just a little less clueless then my mom. The first thing that came to mind was “computer nerd”. So I googled it and found this great picture that reminded me of the best Southpark episode ever, the World of Warcraft episode, which as a retired WoW junkie seemed scarily familiar.

What my mom thinks I do
My mother, pretty much like most mom’s I’m guessing, never got beyond the “My son does something with computers” explanation and always telling a neighbor I could help fix their computer… (sound familiar?), when in reality the times that I actually unscrewed the cover of my PC to add some additional memory or change the video card, 8 out of 10 times I broke it. So no, I cannot and will not fix your computer. 🙂

What my boss thinks I do
This depends on the boss of the moment really, our company is going through a lot of changes and since most people from the management and leadership teams I’ve worked with over the past years no longer work here, most understanding of my actual job role and contribution to the company seems to have disappeared with them. Since the term “e-learning” is in my job title and they know we’re using Articulate software it must mean I develop e-learning in PowerPoint all day long, right? 😉

What my colleagues think I do
With today’s e-learning authoring tools you don’t have to be a rocket scientist to develop meaningful and motivational e-learning. With the pressure no longer on development, coming up with an effective, beautifully designed learning solution has never been easier. The speed in which we can deliver these powerful solutions might seem like rocket science to many.

What I think I do
I actually played around with this one a bit. My first thought was of MacGuyver, the guy that could do (really) anything with just his Swiss army knife, a potato, some duct-tape and a paperclip. With the ongoing financial crisis and constant company restructuring, we more and more often have to make due with scarce resources under an enormous workload. Since I couldn’t find a decent McG picture I went for the second best thing… The hamster wheel. 🙂

What I actually do
I love my job, as it places me at the frontline of nearly every strategic corporate program the company is launching and tries to embed in the organization. Everything, from Health and Safety to Personal development and Compliance, from Management programs to Sustainability, Diversity and Employee Engagement, I’m there; designing, consulting, project managing, facilitating, implementing and measuring the effectiveness the online learning programs to move the company forward and making it a better place to work.