How to Create Engaging Comparison Interactions with Storyline 2

For a recent E-Learning Challenge, I created a nifty comparison interaction focused on one of my favorite games: darts. You know, the game where you throw sharp, pointy missiles at a board for fun? I started with a topic I’m passionate about and created an interaction where learners can compare dart flights. New darts players are typically more interested in throwing their darts than considering the equipment they’re using, so the goal was to create an interaction that would be compelling enough to get learners to participate.

I created all the graphic elements and interactivity right in Storyline 2. In this article, I’ll explain how I built the graphics, planned the interactions, and built it out. Let’s get started!

Design

It’s easy to create compelling graphics from scratch using Storyline shapes. In this interaction, I created the conveyor belt with nine Storyline objects and a couple of different built-in gradient fills. They include:

• 4 rounded rectangles (H=16px, W=8px); “Horizon” gradient fill
• 2 rectangles (H=8px, W=136px); 60% gray fill
• 1 rectangle (H=18px, W=108px); Linear Down/Dark Variation gradient fill
• 1 rectangle (H=18px, W=108px); Linear Up/Dark Variation gradient fill
• 1 rectangle (H=276px, W=108px); R242 G224 B202

You can see these objects individually and assembled below:

Title and Footer

The title and footer are also designed using only Storyline shapes. I created both using the pentagon and chevron shapes. To create a sense of movement, I applied transparencies at increasing levels, starting with a gradient that moves from 0 to 20 percent transparency, and then using 40/60/80 percent transparency for the small chevron shapes. To create a sense of visual connection, I aligned the footer to the angle of chevrons on the title image, as shown by the yellow lines below.

Development

There were two development considerations crucial to the successful operation of this interaction: 1) creating a slides map, and 2) creating precisely placed motion paths.

Slide Map

What slide will learners be presented with when they click the up or down arrows? It seems a simple question, but depending on the total number of objects and the number of objects presented, the answer can become quite complicated. Before building the interaction, I needed to know a) the layout of every slide and b) where the up and down arrows will take the learner. To do this I built a map of the slide movements. Here’s what the slide map for the Dart Flights Comparison interaction looks like:

If I had chosen to only use an up or a down arrow, it would have cut the number of slides in half.

Changing the total number of objects or the number of new objects presented on each slide can significantly impact the schematic. Here is an example map for the same interaction, with the flight being presented only one at a time. The total number of slides jumps from 6 to 18!

Precisely Positioning Objects and Motion Paths

The most crucial part of building this interaction was getting each motion path into a precise position. Without precise positions, the objects will “jump” on the screen in between slides. From the slide view in Storyline, you have control over the motion path, not the end position of the object. This allows motion paths to behave in some awesome ways that couldn’t otherwise be achieved. As a result of this functionality, you cannot select the end state of the motion path and use the align tools to align it with other objects. Instead, you need to intentionally manipulate the motion paths using the “Size and Position” menu (which is somewhat hidden for motion paths). You can see how I did this in this video demo. 

Production Tips

Use the Power of Duplication

One of Storyline’s most powerful features is the ability to copy states and triggers when you copy an object. Decide on the visual look of your objects early though or you’ll end up like me: going slide to slide and object to object applying a drop shadow.

Drag & Drop Slides

To allow the flights in each slide to operate as drag items, all the slides in this project are set up as free-form drag-and-drop quiz slides. While I believe the general effect could be achieved using layers, it seemed much easier to use slides for the following reasons:

• Letting Storyline Do the Work. Using free-form drag-and-drop quiz slides allows you to very quickly create drag items and drop targets.
• Drag-and-Drop Functionality. The Drag & Drop Options panel gives you a quick way to set up and edit functionality of the slides.

Apply Motion Paths to Groups

When you have multiple objects moving on a motion path, group them! Motion paths work just as effectively on groups as they do on individual objects. Take note: When you ungroup the objects, the motion path goes away.

Make This Project Your Own

When building an interaction of this nature, planning your design and slide map are a critical step to ensure correct functionality. Using a slide map built in a spreadsheet application is an effective way to lay out your course that could save you some frustration later. When working with motion paths, precision can make the difference between an interaction that is smooth as butter or rough as dry toast. Use Storyline’s alignment tools and Size & Position Options to get precise placement of your objects and motion paths. I’d love to see what you create using the tips and techniques in this tutorial—please share your projects in the comments!

Clint Clarkson is the VP of eLearning at Xpan Interactive, a digital-services firm that specializes in the delivery of custom eLearning solutions. He has 15+ years of evolution in Learning & Development as a facilitator, instructional designer, and leader. Connect with Clint on LinkedIn or follow him on Twitter.