I love the scrolling panel in Storyline…Is there a way to make it automatically scroll?
This is a great question! We liked this question so much, in fact, that we’ve now added the solution to our workshop materials. Let’s jump right into how to build the auto-scrolling panel, and then we’ll look at some possible use cases.
Building the Scrolling Panel
1. Insert a Scrolling Panel
Tip: Keep in mind that the scrolling panel may cover your content, so you’ll want to make sure it’s out of the way.
2. Insert a text box (above or below the scrolling panel) and populate it with text.
3. Move the text box into the scrolling panel.
4. Add a Line Motion Path to the text box (not to the scrolling panel).
5. Change the Path Options to the following:
a. Change Direction to Up.
b. Change Easing Direction to None.
c. Adjust Duration so that the text is not moving too fast. (Don’t you hate it when it does that in movies?)
Note: 59 seconds is the maximum length of duration for an animation in Storyline.
6. Adjust the motion path’s end point.
Tip: Move the motion path end point to where you can see the bottom of the text box at the bottom of the scrolling panel.
7. Adjust the trigger as necessary. For example, you can change the timing of the animation to start at a cue point or a specific time in the timeline.
Tip: Since this will be an “auto scrolling” panel, you may not need or want to see the built-in scroll bar. One option is to cover it up, but that might be challenging if you have a textured or picture background. A more elegant solution is to drag the size of your panel wide enough so that the scroll bar extends beyond the edge of your canvas. This may present a challenge to those of you who always color inside the lines, but try it anyway…be a rebel! “Where the sidewalk ends…” ~Shel Silverstein
Now, let’s think about some other options…
Need to synchronize your scrolling panel with your audio?
You can easily adjust the duration to match the pace of your narration. Or, you could use a shorter motion path (for example, the same height as your scrolling panel) and then set the path options to a Relative Start Point. Now you could use cue points in your timeline to determine when to trigger the motion path. The Relative Start Point allows you to trigger the same motion path multiple times.
Need a horizontal scrolling panel?
For a ticker-type motion (think MSNBC), you can move your text box in a horizontal direction. You can also add a trigger to move the box again when the animation completes.
Download our sample .story to see the three different auto-scrolling panel techniques mentioned in this blog entry.
When will you use this?
An auto-scrolling panel is a simple, yet elegant solution, but what’s it solving? Other than it being a cool looking option, when would you use this? Here are a couple of cases to consider:
- We often receive requests from organizations who are trying to make their e-Learning courses more handicap accessible (ADA 508, WCAG, CDPA, etc.). Using the auto-scroll panel to create Closed Captioning may help meet some of these guidelines.
- Mobile learning options are often challenging for many reasons. One of those reasons is the limited amount of screen real estate with which to work. Scrolling panels are helpful for adding more content in smaller spaces. And let’s face it, sometimes that scroll arrow is just really small on a mobile device.
- If you are publishing to HTML5, the standard scrolling panel supports swipe gestures, so you may not need to auto-scroll. However, swipe is not supported in the Articulate Mobile Player, so the auto-scroll panel may be a great option to consider.
Note: Using a motion path to create an auto-scroll does not negate the swipe option in HTML5.
Building an auto-scroll panel is quite simple, yet it yields some pretty cool results. Check out our sample and give it a try. Be sure to let us know how it worked for you!
That’s Storyline, and I’m sticking to it!
~Ron
Update: Please note that the interface of the faster new trigger workflow (in Storyline 360 update 3.33.20625.0 or later) will appear slightly different! While the process is the same, this article uses screen captures from the classic trigger workflow.
Wow! Well done! This is genuis. Can’t wait to try it out.
Thanks, Patrick!
This directly answers a question that I had – up until now that is. Thank you for sharing in a manner that makes learning process accessible. Much appreciated.
Great, thanks Alphonso!
Very useful example.
Many thanks
So glad it was helpful, Vladimir!
Very nice! Useful for me. Thanks
Vlado
Ron,
Thanks for sharing these options. Is there any way to “fine tune” the length of the relative start point motion path?
I have text moving 6 times, with two lines of text visible each time. Each time the movement (up) triggers it goes a hair too far. When dragging the motion path shorter, the cumulative motion is now slightly too short. I’ve tried dragging the path stop (red button) both direction to tune, and cannot find a “happy medium”.
Any ideas to fine tune?
Hello Randy
That is a great question. The good news is that the answer is YES. The bad news is that it is not all that intuitive to find. Of course, you know that or you would not need to ask this question. Let me try to explain the steps here, but feel free to reach out to me directly (price@yukongroupinc.com) and I can send a quick video demonstration as well.
Here are the steps:
1. Right click on of the objects on the screen
2. Choose “Size and Position”
3. This opens up the “Size and Position” dialogue box – You will notice the size and position information for your object. Leave this dialogue open.
4. Choose the animation tab
5. Click on the motion path animation that you want to adjust. You should notice that the size and position information has changed. It is now telling you about the length and position of the path
6. Adjust the numbers here and you can edit these charateristics pixel by pixel.
I hope that helps.
Thank you for the pro-tip Ron!
This has allowed me to synchronize my closed caption feature with my audio driven timeline.
These Articulate Trainers really know their stuff!
Randy
Thanks – this post was exactly what I needed.. and I’m so glad I read the comments, because I had no idea about using the Size and Position dialog for motion paths!
Awesome!
Glad we could help, Terry!
Thank you! This was really helpful. I needed to put a large amount of text on a slide and the scrolling box seemed like the best solution. It worked well, but it was difficult to grab the scroll bar. I was pulling my hair trying to make the scroll bar larger, when I thought wouldn’t it be nice if it would just scroll automatically. I googled for directions and found your article with clear directions to boot. It works wonderfully. Thank you so much!!
Jane
That’s great, Jane! I’m so glad it worked for you!
Thankyou for sharing this