How I Built a Warner Brothers Soundboard into an interactive scenario in Storyline

Mar 09, 2021

This week's e-Learning Challenge was to build a soundboard in Storyline.  For my scenario, I made you a new intern at Warner Brothers Studios.  Something is wrong with the soundtrack for the movie and you need to unscramble it.

a sample page from the interaction

As an intern you discover there are 13 tracks of sound that need to be matched to the correct scene in the movie.

Daniel, your new boss, gives you some basic instruction and gives you until the end of the day to get it done.  You will sort through the tracks and categorize them, then match each track to the scene from the movie.  Careful, if you get a track wrong you will lose your job and have to start ALL OVER AGAIN!


1. First I found a Warner Brothers Cartoon online that I thought would be good because of the sounds and dialog.  On you-tube, had some compilations of cartoons that might work.  I reviewed a bunch and select one.  I saved the entire cartoon as an mp4 (video plus sound).

2. In Articulate Replay I trimmed the video to only include the parts of the film I wanted.

Click on the track then click "Trim"  Drag from the left and the right to shrink the area you want to keep then resave.

3. Next, also in Replay, I created a second version with gaps between each scene of the video.   Move the timeline indicator to where you want to split the scene and click split button.  Then drag the split to the right to create some space between the scenes.

4.  Next I used a tool to convert an MP4 to an MP3 (sound only).

5.  Next I set up my main sound board page in Storyline.  This will be my sorting activity.

I used Storylines built-in convert to freeform slide, to turn it automatically into a drag and drop interaction.

6. Then I created the slide which would be replicated for each of the 13 scenes.  There were two versions: one just for dialog, one for music or sound effects.  They are the same except for the number of pairs of headphones.

Once I designed the slide I turned this into a "pick one" interaction.  

Here are the triggers each time the user mouse over a pair of headphones.

Each picture has a different Audio associated with it.  The video is the same for each trigger on a slide.  

Note:  The clock in the corner is made from a graphic image of a clock face from Storyline and two dials.

I adjust the initial values to change the hands on the clock each time.

I also change my avatar a little each time.

And of course I replace the movie with the current scene.  The movie was played set to mute each time, my audio triggers provided the sound track.

Finally, once the challenge was completed I reward the player with the opportunity to enjoy what they did.  This is just the original video with the sound turned back up.

And "that's all folks"

check out our new portfolio:


Be the first to reply