Office Navigation: How to Create a Custom Drag-Drop Interaction

View the published drag-drop interaction

This is a fun project I built two years ago during the beta for Articulate Storyline. My original idea was to drag the character over a door and immediately branch to a new slide or scene. Well, that took less than a minute!

I then started looking at other ways to add interactivity. Before long, I had nine triggers controlling the doors, character, and slide navigation—all assigned to one object.

The project opened some great discussions in the community about when to choose one interactive approach over another: drag-and-drop, click, or hover? Novelty or efficiency? Tom wrote about some of those discussions in a recent post on the building blocks of interactivity.

Whether you’re looking to try a new navigation technique or practice your advanced skills with Storyline, this project gives you a great starting point for designing better e-learning courses.

• Preview the published project
• Download practice files

Step 1: Insert a Character with Custom States

View this screencast on screenr.com

This interactivity works equally well with Storyline’s built-in illustrated and photographic characters. The photographic characters include front and rear shots, which is perfect for what you’re looking to achieve with this effect.

Select a character and create two custom states for your character. It’s a good best practice to rename your character object in the timeline.

Step 2: Create Open and Closed Doors

View this screencast on screenr.com

You’ll need two images of the same door for this step: open and closed. I couldn’t find an example when I put this tutorial together, so I created my own.

Both door graphics are provided in the source files, so you don’t need to spend time editing door graphics in Photoshop. For those of you who are interested in seeing how I put the doors together, check out this Photoshop tutorial.

Step 3: Open the Doors

View this screencast on screenr.com

Now it’s time to add some interactivity!

First, add a hotspot over the bottom area of each door. Use hotspots rather than the door objects; you don’t need the entire door to be an active area.

Next, add triggers to change the door from closed to open when you drag your character over the door.

Step 4: Close the Doors

View this screencast on screenr.com

“Close the door!” How many times did you hear that growing up? Let’s honor our parents’ requests by closing (resetting) the doors after we open them. Thankfully, Storyline makes it really easy to combine triggers to add more interactivity to your objects.

Step 5: Change the Character’s State

View this screencast on screenr.com

Dragging your character over a door should trigger two events: opening the door and changing the character’s state.

Just like with the doors, you need to reset your character’s state when it’s dragged away from each door.

Step 6: Branch Your Learners

View this screencast on screenr.com

Now that you have your navigation set up, it’s time to frame out the content slides for each of the two navigation choices. The reason you’re going with slides rather than doors is that you’re viewing the door navigation as a starting point, not a decision-making activity. In the context of a knowledge check or quizzing activity, slide layers make more sense.

We’ll do two things in this final step: Create new slides and add triggers that branch learners to a new slide when they drop the character on either side of the two doors.

On Your Own

Would you use this type of navigation in your projects? What are some other ideas you have for drag-drop navigation? Post a thread in E-Learning Heroes and tell us how you’re using custom navigation. We love to see the awesome Articulate Community’s work in action!