Storyline: Interactive Video with Animation - Downloads

2,100 Downloads

Have 60-seconds to try something new? In this fun, interactive video tutorial/microlearning project, just hover over the animated markers to quickly learn more about the steps being performed in the video. Be sure to hover over all six steps to complete the lesson!

View this project in action

This project uses interactive markers and motion path animations to bring the content to life. It also features the fonts Oswald and Franklin Gothic, and a free origami video from Content Library.

Note: My demo also uses a free music track provided courtesy of danosongs.com.

*This template will work for folks using Storyline 3 or Storyline 360 (included in Articulate 360). Want to try them out? Get a free trial of Storyline 3 or Articulate 360.

30 Comments

Crystal Sims

6 years ago02/06/18 at 6:29 pm (UTC)

how do you make something like this ADA compliant?

6 years ago02/06/18 at 6:53 pm (UTC)

I am also interested in making this ADA compliant!

6 years ago02/07/18 at 8:18 pm (UTC)

Hi Crystal and Nona. As designed this project isn't ADA compliant for several reasons. Obviously the markers requiring the user's mouse to hover over them would need to be rethought/reworked. You might also want to remove the snazzy animation from the title text at the beginning and the step checkboxes that appear at the end, or make non-animated versions of these. And you'd probably want to add closed captions to any videos. You can learn more about how to make Storyline 3/360 projects compliant in this article: https://articulate.com/support/article/Storyline-360-Making-Your-Course-Accessible

Heather Vogt

6 years ago02/06/18 at 6:46 pm (UTC)

Thanks for sharing!

6 years ago02/06/18 at 10:20 pm (UTC)

You're welcome, Heather!

Autumn Strausbaugh

6 years ago02/06/18 at 6:56 pm (UTC)

I'm trying to preview, but it is just spinning and not finishing loading. Any suggestions?

Eric Bryant
Autumn Strausbaugh

6 years ago02/06/18 at 7:57 pm (UTC)

What browser are you using? I had a similar issue with IE, but when I copied/pasted the URL into Google Chrome it worked fine.

6 years ago02/07/18 at 5:43 pm (UTC)

Chrome, I just tried a different computer and it worked fine. Likely, just slow due to firewalls on my work computer system. Love this technique.

Trina Rimmer
Author
Autumn Strausbaugh

6 years ago02/06/18 at 10:19 pm (UTC)

Hi Wendy. I tested this in Safari, Firefox, and Chrome on my end and it's working fine for me. What browser are you using?

Maree Eilman

6 years ago02/06/18 at 9:58 pm (UTC)

Great job!

6 years ago02/06/18 at 10:20 pm (UTC)

Thanks, Maree!

Paul Arrighi

6 years ago02/07/18 at 12:52 am (UTC)

I agree with Maree, this is an impressive 'deep and rich' example and so simple to build - shhh don't tell too many people! Well done Trina :)

6 years ago02/07/18 at 6:27 pm (UTC)

Thanks, Paul! And mum's the word on how easy this is to create in Storyline.

Kim Verhiest

6 years ago02/07/18 at 7:29 am (UTC)

New to this but I wanted to include this exact thing in my first eLearn piece - this is perfect, thanks Trina :)

6 years ago02/07/18 at 6:26 pm (UTC)

Wonderful, Kim! Glad to hear this project was so timely!

Sue Meismer

6 years ago02/07/18 at 1:33 pm (UTC)

Hi, Can this be done in Storyline 2? Is there a thread here for how to do it? Also, I know there were posts about how to stop the video and add quiz questions as a review? In your example, that would mean replaying the video, but stopping at each step without instructions and asking multiple choice questions about what to do (can other types of questions be used?)

6 years ago02/07/18 at 6:23 pm (UTC)

Hi Sue. You can recreate this project in Storyline 2. The only thing I used that was Storyline 3/360-specific was the free origami video I found in Content Library. But you could easily duplicate the same effects using Storyline 2 and a video of your own. Regarding adding quiz questions, there are lots of different ways you could tackle it, but if you wanted to quiz folks on individual steps in a process, the "easiest" way would be to split the video at the appropriate points, and insert the individual sections into their own slides before the appropriate questions. We also have a few Content Library quiz layouts that feature video placeholders, so you could play around with using that approach to save yourself some time.

John Backewich

6 years ago02/07/18 at 1:51 pm (UTC)

Good morning. I am also a nwer Storyline 2 user. Is it possible to get this in the earlier version? Thank you. Looks great.

6 years ago02/07/18 at 6:26 pm (UTC)

Hi John. Glad you like the look of this one! Sorry, but this particular download is only available for Storyline 3/360, however you could create a similar project of your own in Storyline 2.

Paul Kizilos

6 years ago02/07/18 at 8:55 pm (UTC)

Really nice interactive video example. It gets me thinking. Thank you!

Marie-Pierre Dionne

6 years ago02/08/18 at 2:32 pm (UTC)

That's a great to use markers and videos.

Jason Thompson

6 years ago02/21/18 at 9:07 pm (UTC)

Well done! I'm going to apply this concept to a virtual tour I'm working on.

6 years ago02/21/18 at 11:21 pm (UTC)

That's awesome, Jason. I hope you'll tell us how your virtual tour goes over with your audience once it's launched. Good luck on your project!

Edina Szabo

over 4 years ago09/08/19 at 10:58 am (UTC)

Hi Trina! I love this example so I tried to recreate it. Unfortunately my markers don´t show when I start playing the video. Any idea why that can be?

Darwis Parawiro

4 years ago03/19/20 at 3:10 am (UTC)

Hi Trina! I like it, very hopeful for me

Tarangini Bhadra

2 years ago04/26/22 at 10:34 am (UTC)

Hi Trina! Though discovered quite late (my bad), this is smart and beautiful. Love the way you have strategically placed the markers at the same spot making the interaction quite husslefree. Have downloaded my copy too!