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

Sep272013
Written by David Anderson — Posted in Articulate Storyline

Drag-Drop Navigation in Articulate Storyline

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.

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!

5 responses to “Office Navigation: How to Create a Custom Drag-Drop Interaction”

1

Can we please have the source files/photos to play around with this? THANKS.

Michelle // Posted at 4:55 pm on October 7th, 2013
2

Hi Michelle –

Yes, I just posted the practice files in our downloads gallery: http://community.articulate.com/downloads/p/201864.aspx

If you have any questions, please let us know!

David Anderson // Posted at 7:11 pm on October 8th, 2013
3

You sure know how to distract someone!

Thanks for the great sharing and insights. You mentioned that you are always looking for inspiration from news/information sites….and trying to clone what they are doing using Storyline…. Any recent website finds that are providing lots of inspiration?

Thanks David!

Andrew Moss // Posted at 11:15 am on October 23rd, 2013
4

Thanks for the wonderful tutorials. They were great! I wonder whether the interactions are Section 508 compliant. Can the character be moved by keyboard instead of mouse? If so, how can assign the key to the tigger? Thanks.

:Lily

Lily // Posted at 9:58 pm on February 25th, 2014
5

Hi Lily –

Storyline’s Flash output is 508 compliant. We have more specific info here: http://www.articulate.com/support/storyline/storyline-is-508-compliant

The character, however, can’t be controlled with the keyboard. You can execute most Storyline functions using a keyboard. Exceptions include drag-and-drop and hotspot interactions. We have some more info on that here: http://www.articulate.com/products/storyline-section-508.php

I hope that helps!

David Anderson // Posted at 6:11 pm on February 26th, 2014

Comments are closed on this post. Need more help? Post your question in the E-Learning Heroes Discussions.

Recent Comments

  • Sylvia Wright: Way to go San Diego!!
  • Mandar: Has the blurry font issue been addressed in SL 2? In SL 1 we have the problem that the fonts in the published...
  • Dr. Michael J Fimian: Congrats once again! This is sort of getting to be a habit. But a good one… MJF
  • Marc Zoerb: Hi Julie: Do know of any orgs that have organized around girls (vs. women) learning to code? I have a 5th...
  • Peg John: Just another reason why I like the Articulate products and the folks that create and support them.