Forum Discussion

DavidCharney1's avatar
DavidCharney1
Community Member
8 years ago

Here is another way we can mask out objects in Storyline 2 & 360

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.

     

  • ElenaGasheva's avatar
    ElenaGasheva
    Community Member

    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 :)

  • 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.

  • 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?

    • DiarmaidCollins's avatar
      DiarmaidCollins
      Community Member

      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

     

     

  • David,

    I just used this for a drop down of answers for a quiz. Fly in and Fly out really simplified the drop down.