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.

Double-entrytable

  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

Double-tab navigation: Colored sand beaches

The Idea:

It was 2006, in those days social networks were not as popular as they are now, and people used to forward emails through large mailing lists. One day I received a PowerPoint about the colored sand beaches around the world and I was so amazed by the pictures it contained, that I saved it in my Documents folder.

A couple of months ago, cleaning up the folder, I realized I had kept that Powerpoint all that time, and decided to convert it into something more interactive. Click on the image to see the result:

coloredsandbeaches

The Research:

Searching on the web, I found lots of pictures, videos and articles about the coloured sand beaches. All images included are under Creative Commons licence; in total, almost 40 pictures and 4 videos were included. In the web of the University of Georgia, I found a sample image collection of sand from around the world. I picked the most representative samples, those from the beaches that I had written about.

Most of the information is from blog Sand Atlas and from the U.S. Geological Survey. Check the rest of the sources on the Credits section.

The Design: rounded tabs, borders and buttons!

Using basic shapes, I gave every element in this demo a rounded style. Top tabs are ovals that grow double the size when they’re selected and Bottom tabs are simply two overlapped ovals.

To create the double-tab interaction, I needed 50 layers and 20 triggers! And 12 T/F variables for the customized Menu. Enjoy!