I recently shared an interactive Meet-the-Team template for Articulate Storyline 2 that uses a nifty entrance and exit animation feature when you click on one of the team members. You can check it out here:

View Demo | Download File

It was really easy to set up using Storyline’s cue points and a few simple triggers, and can be applied in many ways. Here’s another brief sample I created that features the same type of interactivity:

View Demo

Notice how the blue pentagon shape flies in from the top and then, when the start button is clicked, flies back up the top? It’s a fun effect that’s super-easy to make. Let me show you how:

Add the Objects to Your Slide

The first step is to add the objects you need on the slide. For this example, insert a pentagon shape and a button with the text “Start” on it. Your slide should look like this:

Add Animations to Objects

One of the keys to this interactivity is the animations, so you’ll need to apply an entrance and exit animation to both objects. On the Storyline ribbon, click on the “Animations” tab to add animations to each object.

For the pentagon, add a “Fly In” entrance animation and, under Effect Options, make sure it flies in from the top. Next, add a “Fly Out” exit animation to the pentagon. Again, under Effect Options, make sure it flies out to the top. Leave the default duration to 00.75 for both animations.

We’ll also add a “Fade” entrance and exit animation to our start button. Leave the default duration of both animations to 00.75.

Adjust Timing of Objects

To do this, head down to the timeline panel at the bottom of the screen and adjust the timing of the objects on the timeline from their default time of five seconds to two seconds. To do this, click and drag the end line on the timeline left, toward the two-second (2s) mark. Once you’ve made these changes, your timeline will look like this:

Add a Cue Point

To insert a cue point, you first need to move the playhead (the blue line with the upside-down arrow) to the location where you want to insert the cue point on the timeline, which is the one-second mark. Double-click “1s” on the timeline to move the playhead to that point. Once the playhead is at the 1s mark, right click on the timeline and click “Create Cue Point at Playhead.” This will insert a cue point with the number 1 on it. Your timeline should now look like this:

Almost done! Now you just need to set up the three triggers that will execute this.

Set Up the Triggers

Right now your triggers panel looks like this:

To remove the two default player triggers that appear in the triggers panel, go into your slide properties (by clicking the widget icon next to the slide name in the slide layers panel) and uncheck the option for Next and Prev under slide navigation controls.

While you’re in the slide properties window, you should also adjust the “When revisiting” setting. From the drop-down menu, select “Reset to initial state.” Once you’ve adjusted those options, your slide properties window should look like this:

Once you click OK, the two default player triggers will be removed from the triggers panel. Now your triggers panel should look like this:

With a clean slate in the triggers panel, you’re ready to add the three triggers that will make this interactive.

Trigger #1: Pause the Timeline

The first trigger will pause the timeline when it reaches the cue point you inserted at the 1s mark. To do this, click the “New Trigger” button and set up the Trigger Wizard so the trigger will pause the timeline on the slide when the timeline reaches the cue point. Your trigger should look like this:

Trigger #2: Resume the Timeline

Your next trigger will resume the timeline when the learner clicks the start button. To do this, click the “Add Trigger” link in the triggers panel for the button and set up a trigger that will resume the timeline on the slide when the user clicks the button. The trigger should look like this:

Trigger #3: Jump to the Next Slide

Finally, you need to add a trigger that will jump to the next slide when the timeline for the slide ends. To do this, add a new trigger that looks like this:

And there you have it! Your triggers panel should now look like this:

And now you can preview your project and see your interactivity at work! Remember: it’s all about using the cue point to pause the timeline, and then resuming it right before the exit animations happen. Let me know in the comments how it turned out for you!

Want to try something you learned here, but don’t have Articulate software? Download a free 30-day trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning.

8 Comments
Matt Blackstock