Round Two: Using Scrolling Panels in eLearning

Two people in video chatting, covered by breaking news banner

After viewing some of the other submissions for ELH Challenge #169, I really liked the idea of using motion paths in conjunction with scrolling panels. This would allow you to move something from place to place, while not always seeing that object. I thought a great way to use this idea would be to create a “Breaking News” banner that could be used on top of videos.

The Method

I started with a stock video from the 360 Content Library, then I played around with a few ideas of how to execute this idea. A horizontally scrolling news tickers actually wouldn’t need scrolling panels to work because the sides of the slide naturally create areas that hide where information appears.

Instead, I built a vertically “scrolling” ticker. My version had four news items located within a scrolling panel on top of a red background. Each news item is located underneath the red rectangle (outside the scrolling panel) with two motion paths: the first to bring the news item on to the rectangle; the second, to move it offscreen. The second actually had the same starting and ending points as the first motion path, but I used a relative starting point to keep the movement smooth.

Articulate Storyline construction process with scrolling panel

Once I built all of these motion paths, I created a series of triggers so the first item moves onscreen when the slide loads, then moves off so the second can come on. These triggers ensured the cycle would continue indefinitely. This is what the triggers look like:

Diagram explaining how the triggers in this project work

Lastly, I added a bit of Javascript in order to capture the learner’s current system time to display it in the small grey panel. There were two triggers that executed the Javascript: one when the slide initially loads and one when the news item cycle completes. This is what the code looked like:

Javascript code to set a variable to the current time

The Result

Click here to see the full interaction. I’m very pleased with how it turned out. I think this would be a great attention-grabber at the beginning of a compliance course.

Click here to download the .story file (Storyline 360).


Leave your comment