Don't Scroll Past This Scrolling Text Template Tutorial

When I first saw we had a template named “Scrolling Text,” I thought “Oh sweet, like the Star Wars intro text!”

Turns out, the template is not quite like the Star Wars intro text, but it is probably more useful for an eLearning course than scrolling yellow text over stars. Probably…

Let’s take a look at what the scrolling text template actually is—scrolling chat bubble style text with an interactive element. This video also shows you how to make simple edits like changing the text in the file.


First, let’s look at the structure. Primary content for this file is presented in scrolling chat bubbles on the main layer. Once the 4th chat moves into position on the screen, a Selection Layer will launch, presenting the user with 4 choices. Based on that input, a Correct or Incorrect layer displays with additional messaging or remediation. The user can close the incorrect layer and return for another try.

Editing content is fairly straightforward on this template. You can change content on each chat bubble on the main layer simply by clicking and editing each chat’s text box. The buttons on the selection layer are standard Storyline shapes and can be edited as such. Similarly, all content on the correct and incorrect layers can be directly selected and edited as desired.

To change the images in each chat, select the shape of the image you’d like to edit, then press the Edit States button. In the normal state, you’ll find a PNG overlayed on a rectangle. You can edit or delete that image as needed.

To adjust the correct/incorrect answers, navigate to the Selection Layer and use the “Show Layer” triggers at the top of each button to change its target.

If you’d like to include fewer buttons on the screen, simply hide them, drag off-screen, or delete.

If you’d like to edit the number of chat bubbles, you’ll need to get your hands a little dirty. The functionality is pretty straightforward: we’ve got a set of arrows that, when clicked, control motion path animations (and states) of several groups. The trick, however, is that the 4th bubble’s UP animation controls the appearance of the Selection Layer. So, if you add or remove something from the thread make sure to adjust both the final positioning of those elements to make space for the Selection Layer AND the trigger that controls its appearance.

Log into your account and start playing with this template now! Or check out more tutorials like this on our support page.

Don’t have an eLearning Brothers account? Sign up for a free one today!


Already a member? Log in and start creating!