Animated buttons in Storyline

Did you know that animated buttons and tabs can be created in Storyline?

Animations can be added to the different states of a button or tab. Check my demo, and others great examples from the Weekly Challenge nº89.



Convert a double-entry table using Storyline

Imagine that you need to include a large double-entry table in your e-learning course, but you want to avoid scrolling up and down. You can convert this type of chart into an interactive double-tab navigation table in 4 simple steps using Storyline.


  1. Set up tabs for rows and columns. Each tab should have at least three states: Normal, Hover and Selected. Make sure each group of tabs is a Button set.
  2. Create as many layers as cells the table contents. Label each layer to avoid confusion when adding the triggers.
  3. Add triggers: “Show layer A-1 when user clicks Tab A and Shape 1 is equal to Selected” and the other way back: “Show layer A-1 when user clicks Tab 1 if Shape A is equal to Selected”
  4. Copy and paste the triggers to each combination of tabs.
Click on the image to see the result Essentialvitmins

Check out another example of double-tab navigation in this post

Design a Cover for an odd eLearning training title

This week the eLearning Challenge was one of the most popular and funniest ever. The objective of Challenge #73 was to:

  • make up an odd or silly title for an e-learning course
  • design a course cover slide using your silly title

After checking some Training Course’s Titles in various websites, I decided to come up with something related to the Workplace Safety.

Every company should protect employees with safety training courses. No matter if it is a big industry or a small office; these courses must help employees identify potential hazards in their workplace.

The title for the Cover I designed is “Hazard Hunters”, referring to the fact of being alert to detect and prevent different types of hazards. The font I chose for the Title is Stencil Font, commonly used for army-themed texts.ELHChallenge#73-Odd-cover

Most common hazards would be included in this Safety Course, so on this Cover, every category would be represented by an icon and colour.


Game Makeover #38: At the Airport Terminal

Checking previous Weekly Challenges, I decided to participate in this one: Steal this e-learning Template.

The objective was to repurpose this template shared by Jackie Van Nice into something of our own.

The Goal

Flying for the first time? We all have queries the first time we’re taking a flight, especially an international one; we are confused about the check-in process and the security controls. So I transformed this Game template into an experience at the Airport Terminal. Users pass through the main areas of Departures while learning Travel tips and Policies.

Click on the image to play the game

The DesignDream_destination-Game

As background images were from different airports, I applied a paintbrush filter to obtain a consistent style across all slides.

The result is an artistic effect, which combines with the main character who is flying to her dream vacation.

Questions were transformed into Drag-and-drop and Pick options, and the Progress meter was replaced by Navigation icons. Most objects are grouped elements made in PowerPoint, and the airplane, well…you might recognize it from the first challenge 😉

Take your seat, relax and enjoy the flight!

Free Bonus: this game is also available in Spanish.


Interactive Screenshots for Online Training

Sometimes updating a software implies getting used to new interface components and functions.  This was the case, for example, of PowerPoint 2010 for those who were migrating from 2003 version. From my experience (and many users’) it was hard to accept the “ribbon interface” the first time I faced it, until I learnt to use it and discovered the advantages over the older version.

Weekly challenge # 26 was about creating Interactive Screenshots for Online training, so taking as a reference my personal experience, I built an example where the learner could compare both versions, switching from the new interface, to the old one he’s used to.

Migrating-from-older-versionIn my demo only four relevant differences were included; there are many improvements I still need to explore!.

I applied the technique of creating a Lightbox effect on slides, explained by Tom in this video. This emphasis effect is very easy to accomplish, and helps the users to focus on one part of the screen.

Drag-and-Drop #16: Prepare the Premium Cheese Burger

The weekly challenge #16 “Creating drag-and-drop e-learning interaction” was posted on December last year, but as I’m learning to use Storyline, I thought it would be nice to start from the basics and practice the built-in freeform questions.

The challenge was to show some creative ways to use drag-drop interactions. With some ideas in mind, I finally chose a simple task, like preparing a cheese burger, and started creating the activity in Storyline. The objective of this activity is to drop all the ingredients in the correct order, practicing as many times as necessary.

cheese-burgerOn preview mode it worked fine, but when I published the output file, default Prev/Next buttons appeared on the Review Quiz slide. As I read in this thread this is a common issue, I duplicated both slides, hid the duplicated ones, and linked them, creating a loop, so that the learner doesn’t notice he is swapping from one slide to another.  It’s not the ideal solution, but it works, and I also added a reset button in case any of the items are blocked.

Premium Cheese Burger is a generic name; however, you might find the real burger I used for inspiration, in the menu of the largest chain of fast food restaurants. 😉

Please taste/test it and enjoy!

Three basic layouts for “Meet the Team” examples

I’m so happy to have taken part in the Weekly challenge #43 “Interactive org chart”, that I’d like to contribute with my thoughts of what I learned about this topic.

If we analyse how the info and images were displayed in all the demos shared in the challenge, I think we could recognize three basic layouts:



Team Member photos:

Depending on the number of participants; the options are: group or individual pictures. While the group picture visually gives the appearance of companionship, it is also more static. Individual pictures are easier to arrange within the screen, we can add different transitions and backgrounds.


Continue reading