[Series] How I Built This Video Gallery Interaction in Articulate Storyline

View the media gallery interaction

In this tutorial, I wanted share some production tips I used to build this media gallery in Articulate Storyline. If the template looks familiar, you may remember this interaction from last month's Studio '13 tutorial where we built the same project in Articulate Studio ’13. 

How I Built This Video Gallery Interaction in Articulate Storyline

The media gallery interaction is a great way to present multiple images or videos that your learners can browse through one at a time. If you work with a lot of video-based courses, this format will make a fabulous addition to your e-learning toolkit.

Working Out the Design Comps

Whenever I’m working on a new idea for a template, I prefer to work out my design ideas in Photoshop.

Working Out the Design Comps

PowerPoint and Storyline would work equally well for the types of projects I design, so there’s no real advantage for me to use Photoshop. But it just so happens that I started with Photoshop many years ago, so it’s typically my first stop for pushing pixels.

Thinking in Layers

Photoshop works well with Storyline because each uses layers to manage slide objects. While they handle layers differently, the overall concept is the same and that’s helpful for working with objects and their stacking order.

 Thinking in Layers

The goal for this template was to keep everything editable within Storyline. This means that even though I set up my design comp in Photoshop, everything I built needed to be built in Storyline so it could be edited or changed by you, the user. See how thoughtful I am? :-)

Creating the Theme Fonts and Colors

I always like to begin my projects by setting up the theme fonts and theme colors. Doing this helps me visualize the final product I’m building during the development process.

Creating the Theme Fonts and Colors

Bonus tip: If you create your design comp as well as your theme fonts and colors in PowerPoint, you can easily import that PowerPoint template back into Storyline and your theme fonts and colors will be retained. That's really helpful if you are working from a design template created in PowerPoint.

Creating the Button Graphics

I played with a couple of ideas for building the buttons. One was to place the video title and description inside the button object. There are some benefits to this approach because it creates a single object for each button. Single objects are generally easier to manage because you’re working with fewer slide objects.

Creating the Button Graphics

The other approach I looked at was separating the title text and descriptions from the actual button. This means that the button graphic is its own object—independent of the text descriptions and titles.

The benefit to this approach is that the title text and descriptions are editable from the slide level. That’s the approach I took with this template.

Creating the Button Graphics

Each button is made up of three states: normal, hover, and selected. The selected state also includes an indicator graphic to show which video is currently selected.

Creating the Text Placeholders

I went with placeholders to make editing text as easy as possible for a single-slide interaction. I don’t often use placeholders, but since I wanted to make this super easy to edit, I used them here. Again, looking out for ya. :-)

Creating the Text Placeholders

On the slide master, I included placeholders for the video title and video description, as well as the thumbnail video titles and descriptions.

Also, on each slide layer, you’ll see that there is a placeholder for each of the videos and video descriptions.

So, David, why use so many placeholders for a single-slide interaction?

Thanks for asking.

If I were building this project in the real world, for a real client, I probably wouldn’t have gone with all the placeholders. That’s because I think it’s easy enough to manage the button objects by editing their states to update the text and graphics.

I like the placeholders in this case because this template was built for sharing. I also wanted to make it simple to open and edit.

There’s no right or best way to approach your e-learning templates. Here, I felt that the end use pointed me toward using placeholders.

Setting up the Video Slides

This is where Storyline shines!

If you’ve worked with the previous template we created in PowerPoint, you remember that we had a total of nine slides. That’s because PowerPoint-based authoring dictates that you need a new slide for every visual change you want to show on a slide area. That’s not the case with Storyline and slide layers.

Storyline’s slide layers act as slides but they’re all on the same slide. So each time I want to show a new video, I just add a new slide layer. Easy, right?

Setting up the Video Slides

Next Steps

I have some variations of this template that I’ll share. In the meantime, I’d love to know what you think about the interaction and how you would use it in your course. We don’t see a lot of portrait layouts in e-learning, so I’d really like to know if you’d consider changing the orientation for a project.

I’d also like your help testing the template and feedback on how it worked for your own projects. Please leave a comment below to share your tips and insights!

Related Tutorials

Here are some related articles in the How I Built This series:

Follow us on Twitter and come back to E-learning Heroes regularly for more helpful advice on everything related to e-learning.

Peter Mattsson
David Anderson
David Anderson
Jeff Kortenbosch
Joanne Gruttner