Recently, one of my co-workers had the idea of building an e-learning project that teaches how to wrap a gift. I loved it and decided I wanted to build it out with Articulate Storyline 2. But as soon as I started building, I found myself befuddled: I wasn’t sure exactly how to demonstrate the process! But soon I got the idea to build out the step-by-step process using simple shapes directly in Storyline. Let me walk you through the high-level process I used for this one.

View the published output.

Create My “Look”

My first step was to create an overall look-and-feel for my slides. I added a wooden textured background that looks like a hardwood floor so it looks like you’re wrapping the gift on the floor of your home. I also added a semi-transparent white rectangle area at the top of the slide, where the instructions are displayed. The text stands out a lot more over this shape. Finally, I used red shapes for the wrapping paper, and a graphic of the Storyline 2 box shot as the gift. 

Build Out Each Step On A Slide

I decided to build each step in the gift wrapping process is on its own slide. Red shapes,  representing the wrapping paper, are adjusted for each step to show how the gift looks at that step of the wrapping process. At the top of the slide, I numbered each step and added instructions for that slide. 

Make It Interactive

Once all my steps were in place, I added my interactivity. The drag and drop freeform slide feature was really handy here for dragging the scissors to cut the paper, and to drag the gift and tape pieces into place. I also added some click areas for steps where you click on the piece of paper to fold it over. For each step, I added an extra hint to clarify exactly where you need to click, as indicated by the arrow and handwritten text.

Create An Intro And Summary Slide

With my interaction created, I added an intro slide and a summary slide—two elements to make sure my course is “wrapped” up with no loose ends! (Haha!)

So that’s a great way to illustrate a task-based step-by-step process in Storyline using shapes and interactions. Do you have any step-by-step interactions of your own that you’d like to share with the community? If you do, please leave a comment below. You should also follow us on Twitter and come back to E-learning Heroes regularly for more helpful advice on everything related to e-learning!

Want to try something you learned here, but don't have Articulate software? Download a free 30-day trialand come back to E-learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any comments, please share them below.

2 Comments