A simple way to help beginners get started with Articulate Storyline

I was hanging out in the Articulate Storyline LinkedIn group the other day when I saw someone post a request for suggestions on how best to deliver Storyline training. Having delivered several courses this year, I thought I'd jump in with a quick reply mentioning an exercise that I have developed for this exact purpose. I have found the exercise to be really successful in getting newbies started with Storyline.

Within a few hours of replying, I had received several responses asking for me to share the resources, so I thought that rather than responding to each request individually, I would write a quick blog post to help. 

If you would like the zip folder with all of the materials you will need to teach this exercise (including a video of the training being delivered), then please click here and download it now!

The theory behind this training

As I'm sure you all know from experience, it's much easier to learn how to use software by having a go yourself. All trainers have their own way of delivering software training, but I have never seen a better method than giving someone a copy of the software and then working through an exercise together. 

I have found that most people who attend this training have a basic idea of Storyline, and most importantly have a good understanding of PowerPoint. This really gives you a great head-start when teaching Storyline!

I would go as far as checking with people attending the training beforehand to make sure they all understand the basic concepts in PowerPoint.

If they understand concepts such as basic slide design, adding and editing images, videos, transitions, animations and layers etc., there will be a lot less of the basics to teach once you start training Storyline.

Building confidence early-on

From experience, I have found that it's important to find an exercise that familiarises the audience with some of the key aspects of Storyline as quickly as possible.

This gives them a 'quick-win' and they will feel confident to attack the more advanced features later on in the course, because they have successfully mastered the basics. 

The course breakdown

So the exercise is simple - it's a short induction module for a new employee at Unreal Ltd. You can see the finished module that I help the group to build by clicking here

Introduction

I always start by giving the group 15 minutes to explore the finished module. I have the demo published and uploaded to my website, and then share the URL.

I ask the group to not only work their way through the slides (there are less than 10 slides in total), but also to look closely at the behaviour of the course, i.e:

  • How do the images and text appear on screen? 
  • How does the first slide move to the second slide?
  • What happens if you hover the mouse pointer over a button?
  • What happens if you click 'Next' before you have completed an exercise?

This really starts getting the group thinking about not only the look and feel, but also how they might go about replicating the different behaviours. You can even set a fun challenge - the individual who can create the most accurate replica of the behaviours in your course wins a prize.

(Although maybe pop down to the vending machine before the training starts to collect the prize, or else you may face a baying mob when they realise there was no prize!)

Software overview

Next step is a basic overview of the software. This essentially includes an explanation into how the Storyline layout is identical to PowerPoint, and also really focuses on the different windows or panes (ie. slide sorter, timeline/notes/states panes, trigger and layers panes).

I also take this opportunity to suggest that those who have dual monitors, make use of the new feature in Storyline 2 that allows you to undock your panes and move them to the second monitor to create more space for designing your slide.

(Personally, I love this feature, and actually have 2 spare monitors so I can keep the main display free for my slide design).

Designing the 'Meet the team slide'

Now for the meaty bit!! I always start with guiding the group through the design of the Meet the Team slide (shown in the image), which incorporates all of the most important features of Storyline. (if you haven't already visited the demo course on my website, now would be a good time to check it out to remind yourself of the features I've used).

I teach these features (in the following order):

  • Using the timeline
  • Adding animations
  • Editing states
  • Using layers
  • Adding triggers

I explain to the group that although this isn't the first slide in the demo, once they understand the theory behind the features used in this slide, they will be able to build the rest of the slides with much less guidance. 

Now I won't go through everything that I teach step-by-step because I hope most of this is quite obvious, especially if you're following the video through (and this blog post would be longer than a Jane Austen novel!) However these are the key steps:

Step 1 - Adding animations to the photos

Add the background and 6 images of the Unreal Ltd staff to a blank slide. I then use 'guides' to show the group how to make sure all new items on their slide line up. I usually explain the Align tool - most of the audience will have probably used this tool in PowerPoint but it's a good opportunity for a refresher.

At this point I also ask the learners to rename the objects that they have added to the slide and explain how important it is in Storyline to stick to a naming convention, otherwise later on in the course they will get confused. The next steps I teach are as follows:

  • Add an animation to an image
  • Edit the animation settings to 'fly in'
  • Use the Animation Painter to copy Animation settings to the other images

Once they have followed these steps, I ask the group to get into the habit of saving their work and previewing the slide, to make sure the behaviour is as they expect.

At this point they are all usually happy with how the animations appear, but are looking to now replicate the staggered effect of the images, which leads us on nicely to the next step.

Step 2 - Staggering the items on the timeline

I demonstrate how to stagger the images to appear on the screen one after another, by staggering the location of the images on the timeline. If the group hasn't used something like Windows Movie Maker or Adobe Premiere before, then this may be the first time they have come across a timeline.

So this provides a really good understanding of the concept of a timeline. I follow this procedure:

  • Ask the group to check the demo for timings and notice in which order the images appear
  • Move images along the timeline so the appear one at a time
  • Ask the group to organise the objects so they are in order (with the first image being at the bottom of the timeline and the last picture to appear at the top of the timeline)

There is usually a little trial and error in this step as the the group starts to understand the concept of the timeline. One problem that I have noticed that many people have at this point, is that by dragging their objects along the timeline to appear at staggered intervals, they also accidentally adjust the end point of each item. This will be where the item disappears from the timeline. So this is a great opportunity to teach the 'Show Until End' feature.

You can also use this step to explain how dragging items up and down the timeline affects the layering of the photos on the slide. (Dragging up and down as opposed to dragging along the timeline). Once the six images are appearing on the slide in the correct order, I move onto the next step. 

Step 3 - Adding hover and visited states to the images

In this step I teach the concept of States.

This is a really useful technique to learn at this early stage in the course, because later on in the course I ask the group to use pre-built Storyline buttons that already have States included.

The next steps are:

  • Check the live demo and notice the hover and visited states 
  • Select image and click Edit States
  • Add Hover state (2pt border around item)
  • Add Visited state (50% transparency)
  • Use the Format Painter option to add state settings to other images

Step 4 - Adding layers

By this part of the course your group will be full of enthusiasm and confidence! So I use this energy to tackle layers, which can often be a challenging concept especially for those who have never used software such as Photoshop before.

I usually try and give a basic overview of layers by explaining how sheets of tracing paper would appear if we drew on each in marker pens. The steps I ask the group to follow are:

  • Add an additional layer
  • Rename the layer
  • Add the extra image and text box
  • Explain layer settings
  • Duplicate layer and edit image and text for each person

Step 5 - Adding triggers

Once the layers have all been successfully added, I move onto Triggers.

This is probably the most challenging concept for the audience to grasp, so I usually try and schedule lunch before I try this!

I explain how there are already a couple of Player triggers in the Trigger Pane which affect how the module behaves when the learner clicks the Previous and Next buttons, but how we can add our own triggers which will be based on what happens when the learner clicks on the photos in our slide.

The steps are as follows:

  • Add trigger on base layer
  • Edit trigger
  • Copy and paste trigger for each image

You can see the trigger settings in this image.

Step 6 - Adding conditions to triggers

In order to really help the group grasp some advanced Storyline concepts within this first slide, I ask them to refer back to the demo and notice how the learner cannot move onto the next slide until they have visited each of the different people on the slide.

Please be aware that before you teach this technique, you will need to ask the group to add a second slide! This is important because if you show them how to add a condition to the Next button trigger, the only way the group will be able to see if that trigger works is to have a second slide to try and move onto!

Once they have all added a second slide to their course, I guide them through the adjustment to the Slide Trigger required to imitate the behaviour of my demo:

  • Open the Slide Trigger that allows the learner to progress when the Next Button is clicked
  • Add a condition to the Trigger
  • Replicate the condition explaining the boolean functions of AND/IF (in this case we will be using AND but you can explain the concept of IF)

And that's your slide complete!

And you're there! The rest of the training should follow on nicely from here, because you have taught many of the key concepts in that one slide.

Other things you can teach with this demo is adding and editing audio (there is no narration but you could easily add some), quiz questions (I have added 3 different types to this demo), the player template and publishing options.

But what about the rest of the demo?

In this post I have only described how I teach one slide of the full course, but hopefully that will give you a great start in teaching your own Storyline course.

If I receive enough comments asking for me to carry on describing how I build the rest of the course, I will write another blog!

But that should give you a good headstart in teaching the basics. And if you only have time to run a 1 or 2 hour training session, that will probably be more than enough to fill the session!

That's all folks

If you enjoyed reading this article, you're going to love my free 5-day email crash course - 5 Common Mistakes to Avoid When Starting an Elearning Project.

And before I disappear, I would also like to take this opportunity to say thanks to Montse Anderson whose original slide design (found here) inspired my demo course.

Ant Pugh

108A Tooting Bec Road, 108A Tooting Bec Road