#FREEBIE: Minimalistic Storyline player menu and navigation controls

Hey everyone,

I’ve been playing around with a new menu with navigation controls.

Check out the YouTube video right here

The template contains

  • the menu plus nav controls on the left and right side of the screen
  • Dark and light grey versions for left hand section
  • Dark and light grey, blue, red, green and yellow versions for the right hand side

Everything is put on a Master slide so you can adapt anything you want right there. If you have any questions or comments drop me a line in the comments or contact me directly.

Play with it here  |  Download the Storyline2 source file here

Enjoy!
Jeff

 

This post appeared first at community.articulate.com

Custom Feedback Master Slides for Quizmaker and Storyline.

Mike Enders shared a post called Create E-Learning Courses With Custom Learner Feedback in which he shared how we can change the default Storyline quiz feedback popups.

In this post he shared the wellness course feedback and I decided to template that one for Storyline 2 and Quizmaker’13 because it’s just awesome!

Since most Storyline projects I do are wide-screen I’ve opted for a 16:9 resolution. The Quiz-maker file is set in the traditional 4:3 format.

FeedbackMasterLayouts

You can simply change the color scheme in the Feedback Master slide. If you want to change the default texts for the Correct/Incorrect/Try again titles and the Continue button you can do that via the Player > Text labels.

How-to Video   Quizmaker'13 file   Storyline 2 file

 

If you like this post let me know in the comments!

 

This post appeared first in the Articulate e-Learning Heroes community.

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.

My 1st Articulate Guru Awards entry!

View Demo

Today I’ve uploaded my first entry to the 2015 Articulate Guru awards. The Guru awards are hosted by Articulate and are open to anyone that wants to show off their mad Articulate skills.

This is my first time entering the Guru awards and I must say I’m excited, and a little nervous, about it. I want to do something good, heck I want to win (which is odd as I am the least competitive person I know). Although most entries will probably be Articulate Storyline based I decided to submit an Articulate Studio 13 demo.

The demo I submitted is a Call Center interaction based on a Storyline interaction Tim Slade created and shared in the Articulate community.

The demo features:

  • fully animated interface to enhance the user experience,
  • branching scenario using the challenge-choice-consequence model. This means that your scenario will develop based on your choices. It allows users to (re)try different options and gives them the opportunity to correct any mistakes they’ve made along the way.
  • illustrated characters with facial expressions to enhance user feedback and add to the emotional experience
  • Avatar selection to personalize the course experience.

The cool thing, if I say so myself, is that anyone that sees this demo automatically thinks it is built in Articulate Storyline and it’s not. It is 100% Articulate Studio and it only took me about 6 hours to build and 2 hours to bugfix, making sure all scenarios for all avatars where branching correctly.

This demo is probably one coolest things I’ve built in Articulate Studio and it shows how incredibly powerful and versatile it still is. Articulate Studio is where it all started for me and this Articulate Guru entry is my personal tribute.

 

Aren’t you using Articulate Studio yet? Get a free 30 day trial version at Articulate.com. You should really check it out!

Ebola outbreak training

Last year we faced a horrible Ebola outbreak. The Articulate community responded with an awesome challenge: Design a learning interaction around the Ebola outbreak. You don’t have to create a full course on the Ebola virus. Instead, focus on something short and quick to address one area of the virus.

For my entry I chose to transform an infographic and create a simple, Articulate Studio based, e-learning interaction that could actually be used in the field if necessary.

This course:

  • Is 100% PowerPoint built for easy translation into multiple languages by anyone that understands PowerPoint
  • features a linear single button navigation to make sure all content is delivered to the trainee
  • Uses basic animation and transition effects to create a dynamic feel to the course
  • When Track and Tracing of progress is required, just publish with Articulate Studio and upload to your Learning Management System

 

View Demo  Download File

Any thoughts or comments? Please let me know below!

 

Interactive list of Do’s and Dont’s

View Nicole's demoDownload PowerPoint template

Today I bumped into a featured Articulate Storyline2 template that Nicole Legault created. It’s a really nice and simple way so share do’s and dont’s with your learning but could also be used presenting them with bold statements and asking how these feel (e.g. statements managers could make regarding sick employees: “Reporting in sick is a choice!”). You basically could turn any bulleted list into something like this (just don’t overdo it).

I loved the simplicity of this template so much I quickly decided to create an Articulate Studio version for it in PowerPoint.

The template features:

  1. 4 slides, including a start and finish slide
  2. Easily adaptable color scheme, font’s etc.
  3. A background in the PowerPoint slide master
  4. Works for all versions of Articulate Studio

If you want to add additional slides just copy the last one and duplicate the ‘card’ shape. Rotate it in a different position so the cards in the deck keep stacking up at slightly different angles. When you’ve created all additional slides make sure you’ve got your next buttons in place (just copy them from the existing slides, by default they’ve got a hyperlink to the next slide). Voila, you’re done!

So many kudos again for Nicole for designing and developing the Storyline template. She Rocks!

If you like this PowerPoint/Articulate Studio template or have any questions please let me know in the comments below!

Using interactive charts and graphs in e-learning

View demo

In a recent Articulate e-learning challenge we were asked to create interactive charts, graphs and tables as these are easily the most overlooked assets in online training. For some reason clients prefer to keep the graphs, workflows or tables identical to the one that’s in their slide deck even if it means cropping and scaling the hell out of them making them virtually useless.

For this challenge I combined some Diversity and Inclusion related material I saw passing by in my twitter stream and remembered I had just seen the most gorgeous graph design on dribble that I had saved into my ‘inspiration’ folder.

In this example the user can explore the graph and add more information to it by clicking the legend at the right hand site. What I like about this approach is that it plays with my personal expectations of what the numbers will be like. Any surprises from my end when seeing the actual results will only embed the learning in a stronger way.

The demo was built in Storyline but could just as easily been put together in Articulate Studio.

So what do you think?

Animated Menu for Storyline 2 /w source file

View demoDownload SL2 fileHow it's done video

Hi folks,

I created a simple animated menu that a user can open via the ‘sandwich’ icon which you see more and more in responsive design these days. What I like about this interaction is that is frees up the player real-estate and allows the user to focus on the actual content while the menu is but a simple click away.

The menu:

  1. is based on a Slide master for easy maintenance
  2. has a smooth intro and exit animation
  3. features a Hover and Completed state
  4. is slightly transparent so any background image can subtly bleed through

 

You could expand some of the menu’s features by adding a help/more info, downloads/resources and contact icons at the bottom.

Check the Demo here and Download the Articulate Storyline 2 source file. If you want a closer look under the hood then check out this YouTube video on how I built the menu interaction.

Hope you like it, let me know in the comments!

Jeff

Free Bulletin Board eLearning Interaction

View demoDownload SL2 fileHow to... Video

Hi folks,

Here’s a new interaction I put together. This one is based on the Bulletin Board interaction you can find in Articulate Engage’13.

By default it features:

  • An introduction slide layer
  • 6 content slides layers (notes)
  • A summary slide layer

If you want some more notes just copy one of the existing notes, add a variable and duplicate a content layer and update the Summary slide triggers to add your new note(s).

There’s an additional scene in the .story file with the graphics (all combined shapes) I used to create the notes so you can change it to any color scheme you need.

Hope you like it, let me know in the comments!

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.