Get to Know Storyline Cue Points

Storyline 360 is a powerful e-learning authoring tool that lets you create just about any kind of interactivity you can imagine. Take a look at this simple but cool click-and-reveal style interaction created with Storyline 360.

View Example

Take note of the use of entrance animations and exit animations. Notice that when you click on a Team Member button, a layer with additional information flies in smoothly from the right-hand side of the screen, then flies back out to the right when you click the Close button. Want to know how I created this cool interactivity? With cue points!

What Are Cue Points?

Cue points are indicators or flags that are inserted directly on the Storyline timeline. To insert a cue point, right-click anywhere on the timeline and click Create Cue Point at Playhead. This will insert a numbered cue point on your timeline, which you can drag around on the timeline and place wherever you want.

Take note of the three circled cue points on the timeline.

You can use these cue points in your triggers to build certain types of interactivity, as demonstrated in the example above. Let’s take a closer look at how I created that example.

How I Created This Interactivity

In the example shared above, I created a cool effect using animations, a cue point, and three triggers. With this combo of features, the content flies in from the right side of the screen, then flies back out again when the user clicks a Close button. Here are the steps I followed to build this slick effect:

Build a Slide

I started by designing my slide’s base layer. I created a beautiful-looking slide that has four buttons on it—a button for each team member.

The slide has been designed; it includes four buttons that will each link to a layer.

When I click the Team Member buttons, I want more information about that team member to appear on the screen.

Create the Layers

My next step is to create the layers that will display additional team member information. I created my first layer and named it Team Member 1. On this layer I added several objects: a gray rectangle shape, a Close button, some text, and an image. I grouped all of these objects together; this makes them appear as a single object on the timeline. I also edited the duration of the timeline so it’s two seconds (2s) long in total. If you’re wondering why so specific, stick with me here—each of these steps is important.

The first layer has been created, the objects are grouped on the timeline, and the timeline duration is set to 2s.

Add Animations

Animations are important in giving this interactivity the polished effect I want. Select your group of objects on the timeline and apply an entrance animation and an exit animation to it. Remember: it’s important to apply the animations to the entire group and not just individual objects within the group. You want all the items to fly in together, and fly out together; this is why it’s important that they are grouped. For my example, I use a Fly In from the Right entrance animation and a Fly Out to the Right exit animation, both with a duration of 00.75s.

Insert the Cue Point

The next thing I did was insert the cue point. This is simple to do: right-click anywhere on the timeline and click Create Cue Point at Playhead. For this example, place the cue point precisely at the 1s mark on the timeline. Remember, the timeline should be 2s long in total.

Create the Triggers

With the cue point in place, we can now create the three triggers that power this interaction. The first trigger will pause the layer’s timeline when the timeline reaches the cue point.

The second trigger goes on the Close button. This trigger will resume the timeline.

The third trigger hides the layer when the layer’s timeline ends.

Here’s what happens with these three triggers in place: the layer’s timeline starts and the entrance animation happens during the first second. At the 1s mark, the cue point is reached and the timeline is paused and remains paused until the learner clicks the Close button. When the learner clicks the Close button, the timeline resumes, the exit animation occurs, and then the layer is hidden when the timeline ends.

Once the first layer is working perfectly, I can simply duplicate (x3) and update the content in each layer to save time. That’s how animations, a cue point, and three simple triggers can get you this sleek, interactive effect. You can download the file here to take a closer look at the triggers.

Want to try something you learned here, but don’t have Articulate 360? Start a free 30-day trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.