4 Easy Steps for Creating a How-To Video in Storyline

Am I the only one loving the trend of quick how-to videos in social media feeds? You probably know the ones I’m talking about, like the drool-worthy recipe videos from Tasty, and the brilliant little gems from Tip Hero.

In fact, here's one of my favorites from Tip Hero:

What’s so great about these videos is not only do I get the occasional new recipe to try out with my family but I find tons of instructional design inspiration. That’s because most of them last less than 90 seconds and are 100 percent performance-oriented. They focus on just what you need to know to solve a single problem or perform a solo task—and that makes them the perfect example of microlearning in action. Short in length, they’re easy to absorb and fun to watch. And because they’re usually just video (no spoken audio) you can watch them anywhere and get the gist of what you need to do.

You might be thinking, Great idea, but how do I make these when I’m no video-editing pro? I thought the same thing—until I realized I could use Articulate Storyline to create my own how-to project inspired by videos like the ones shared by Tip Hero and Tasty. Here's my project: 

View this Storyline 360 project in action

View the original Storyline 2 version of this project in action

And here’s how I pulled off this design in four easy steps using Storyline 360.

Step 1: Browse and Insert Free Content Library Videos

I knew I wanted my project to feature several short videos interspersed with some text, so I opened up Storyline 360 and began inserting blank slides in Story View. On the slides where I wanted text, I quickly dropped in some placeholder verbiage. Then I turned my attention to the video slides.

I decided to use free stock video footage from Content Library to save myself some time scouring the web—but you can just as easily insert your own videos. Here’s how I browsed and inserted free videos from Content Library:

With the slide selected, click on the Insert tab in Storyline 360 and select Video from Content Library Grouping.

This launches the Content Library video browser, where you can type in some keywords to search for just the right video for your project.

Type your keywords into the search field and hit “Enter” on your keyboard to search.

Then, you can just browse through the results using the scroll bar. You can also preview videos by clicking the Preview button that pops up when you hover your mouse over the video thumbnails.

When you’ve found just the right video, click the Insert button to insert it into your project.

Step 2:Adjust Slide Timing

I wanted to keep the transition from video to text feeling very fluid and, well, video-like. One way to create that feeling is to keep the video slides and the text slides at about the same timing.

Most of my video clips were trimmed down to about five seconds. To give my static text screens a similarly short timeline I just went into each slide’s timeline and dragged the end point right or left until it aligned with the 5s mark.

Step 3: Adjust Triggers to Advance Slides Automatically

To keep viewers from having to click to advance, I decided to eliminate the previous and next buttons and use Storyline’s timeline trigger to advance the slides automatically. Here’s how:

First, remove the next and previous buttons from all your slides by going into the Story View tab and selecting a slide. Then, hit Ctrl-A (or Command A on a Mac) to select all of your slides.

With all of your slides selected, you can adjust the slide properties all at once. For this project, I chose “Automatically” from the Slide Advances dropdown. Setting the slides to advance automatically dynamically creates slide triggers for each slide to jump to the next slide when the timeline ends.

Finally, I de-selected the Prev and Next checkboxes under the slide navigation controls since they’re not needed. 

Step 4 (Optional): Add Info Buttons to Select Video Slides

As I was building this project, it occurred to me that it might be smart to make some optional related content or resources available to the viewer with a quick click of their mouse.

This is easy to do with some buttons, a layer, and some triggers.

First, I added a new layer by clicking on the “New Layer” icon on the slide layers pane and I named it “Info.” On this new layer, I added a black rectangle (with 15 percent transparency) to the top of the screen to serve as a backdrop for the text I’ll be adding later.

Then, I added a close button and a trigger to hide this layer when the user clicks on the button.

Back on the base layer, I inserted an "info" button with a trigger to show my newly created layer when the user clicks this button.

Fine-Tuning

If you have a few more minutes to polish up your how-to video project, here are some more steps you might want to take.

• In my project, I made sure that the info buttons on select video slides appeared about 1 second into my base layer timeline. This gives the viewer a moment to absorb what’s being shown on screen before their eye is drawn to the info button.
• I added a little wipe animation effect to the black rectangle on the info layer just to give it a more seamless effect.
• I also added an abstract video to act as a motion graphic background for my text slides. I found just what I needed in Content Library (see step 1) by searching for the keyword “abstract.” Once I found that video, I used the color picker tool to pull out shades of blue to use for my text.
• In the original Storyline 2 version of this project, I added looping background audio following the steps outlined here. (Note: I chose to leave the background audio out of this latest version so you could compare and decide which version you prefer!)

More Learning

And that’s it! There’s really so much more you can do with video in Storyline. This project is just the tip of the iceberg.

For more ideas and inspiration for using video in your Storyline projects, don’t miss these free resources on E-Learning Heroes.

• The Secret to Creating Great E-Learning Videos E-Book
• How to Create Interactive Videos 
• Storyline 2: Meet the Team Video Interaction by Montse Posner Anderson

What video trends are you inspired by? We’d love to hear from you! Leave a comment below, or feel free to jump into our Building Better Courses forum to hear from your fellow e-learning pros.

And don’t forget to follow us on Twitter and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning.