By using the Scrolling Panel in Storyline we can create some interesting masking techniques. Might be very helpful with animations and interactions. Here is a video showing how to use it:
We have just switched to html5 output only and dropped flash as everyone in the organisation has IE11 and the html5 of Storyline 3 is so much better than SL2. Then we started hitting problems like the wipe animations no longer worked in IE and mobile (mask animation not supported). This has fixed that problem. I'm sure I'll find some more issues but at least this is one less. Cheers David.
Glad to hear this helped you out! Also, keep in mind that the IE11 and Edge browsers do have limited support for HTML5 animations so we have that documented here for folks!
Create the object that flies in, and give it an animation. Copy it, and edit the hover state of the hover-over spot. Give it a Hover state, and paste the fly-in object as the hover state.
The scroll panel will only have a scroll bar on the right side if the object inside of the panel is larger than the panel itself.
Try increasing the size of the scroll panel area so that it is larger than the objects inside of it, and the scroll bar on the right side should disappear.
This is pretty cool. I realize I'm late to the party on this. I sometimes like to mask text so that lines of text build in sync w/the audio. I find if I shrink my text box height to the height of my top line of text, if I keep the scroll box larger on the bottom, I don't get a scroll bar on the side. I cut and paste the scroll box along my timeline, pulling down on the bottom/increasing the height of the scroll box as I go. Are there easier ways to mask now?
Hi Bart. I know it's been a while since you posted this but, yeah, unfortunately, there is no real easy mask feature available in Storyline (yet - if ever) apart from the awesome scroll panel trick shown above.
It's hard to imagine what you are describing there but it looks as if you are attempting something like "closed captions", is it? You mention you cut (copy?) and paste the scroll box along the timeline and stretch it to accommodate the new text.
Could you not just treat each line as its own text box and lay them out as you progress along the timeline? And each line of text could be animated in, making it a little more dynamic and interesting.
This would be easier than inserting text into a scroll panel that could easily be 'scrolled' by a user if they hover over the box and scroll.
I could be wildly off the mark, and apologies if so.
25 Replies
Thanks for sharing David, that's a neat trick!
Great Tip David, I see lots of possibilities. Kudos!
Great Tip David!
Great find. Well done.
Thanks! I am actually surprised how often I am using it now.
This is great - thanks for sharing David.
I get a feeling this may be something I use all of the time now :-) Thanks for sharing.
What a clever idea. I can see this being used all over the place. Thanks for sharing.
you bet!
Phil, if you do use it sometime - would love to know how! Still experimenting with it.
This is awesome. Where can I find the hint box tutorial?
That. Is. Seriously. Awesome!
We have just switched to html5 output only and dropped flash as everyone in the organisation has IE11 and the html5 of Storyline 3 is so much better than SL2. Then we started hitting problems like the wipe animations no longer worked in IE and mobile (mask animation not supported). This has fixed that problem. I'm sure I'll find some more issues but at least this is one less. Cheers David.
Glad to hear this helped you out! Also, keep in mind that the IE11 and Edge browsers do have limited support for HTML5 animations so we have that documented here for folks!
Hi all,
Could you please share the Storyline file. I have been trying to make mine work unsuccessfully. Thanks!
Hey Elena and welcome to E-Learning Heroes :)
This was posted a while back, but hopefully David is still subscribed here.
You are certainly welcome to reach out to the user directly via the 'Contact Me' option on the user profile if you do not hear back soon.
Feel free to share what you have worked on so far as well via your .story file and someone may be able to pop in and help you out as well :)
This post was removed by the author
Create the object that flies in, and give it an animation. Copy it, and edit the hover state of the hover-over spot. Give it a Hover state, and paste the fly-in object as the hover state.
Hi David, For the life of me I cannot figure out how to make the side bar of the scroll panel not show. Any tips? Thanks for the tutorial.
Hi Michele!
The scroll panel will only have a scroll bar on the right side if the object inside of the panel is larger than the panel itself.
Try increasing the size of the scroll panel area so that it is larger than the objects inside of it, and the scroll bar on the right side should disappear.
Thanks. I finally got it to work. I'm not sure why it wasn't before. I'm so grateful for this tip.
So glad that Alyssa was able to help you out here, Michele. I appreciate you chiming back in with an update.
Welcome to E-Learning Heroes by the way :)
This is pretty cool. I realize I'm late to the party on this. I sometimes like to mask text so that lines of text build in sync w/the audio. I find if I shrink my text box height to the height of my top line of text, if I keep the scroll box larger on the bottom, I don't get a scroll bar on the side. I cut and paste the scroll box along my timeline, pulling down on the bottom/increasing the height of the scroll box as I go. Are there easier ways to mask now?
Hi Bart. I know it's been a while since you posted this but, yeah, unfortunately, there is no real easy mask feature available in Storyline (yet - if ever) apart from the awesome scroll panel trick shown above.
It's hard to imagine what you are describing there but it looks as if you are attempting something like "closed captions", is it? You mention you cut (copy?) and paste the scroll box along the timeline and stretch it to accommodate the new text.
Could you not just treat each line as its own text box and lay them out as you progress along the timeline? And each line of text could be animated in, making it a little more dynamic and interesting.
This would be easier than inserting text into a scroll panel that could easily be 'scrolled' by a user if they hover over the box and scroll.
I could be wildly off the mark, and apologies if so.
We can use the fill with picture inside the shape fill options to have a image masked.
Its actually the reverse method of masking a image, but might work in most cases