#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.

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.

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!

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!

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.

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.

Web style tabbed interaction for Articulate Studio

View demoDownload PowerPoint file

A while ago Phil Mayor from eLearning Laboratory created a cool Storyline 1 web style tabbed interaction template and shared it with the Articulate community.

A lot of people liked it and since I’m a big fan of Articulate Studio as well I decided to recreate the interaction in PowerPoint so that it’s available whether you’re a Storyline or Studio user and shared it in the comments of Phil’s post.

This template features:

  1. Easy adaptable color scheme
  2. Several content pages with their own theme color
  3. Smooth animations for a professional organic experience

Again, many kudo’s for Phil’s interaction and I hope you enjoy the PowerPoint/Articulate Studio version.