Forum Discussion
Motion Paths
Hi,
This example - http://articulate-heroes-authoring.s3.amazonaws.com/Examples/Storyline/SL2/Icon-Animations/story_html5.html by Ian Monk is brilliant.
How was it even done. Can anybody suggest...
Basically masking is a technique from video and image editing. Creating a second shape to define what part to show/hide of the first shape. In Illustrator thats achieved by compound masks, clipping masks and opacity masks ( https://www.youtube.com/watch?v=45YgKyF6B00 )>
Photoshop has its channels and layer masks to create masks. ( https://www.educba.com/what-is-masking/ )
In webdesign CSS is used to create clipping masks. ( https://css-tricks.com/clipping-masking-css/ ) You can use CSS clip-path in Storyline. Do check some of my samples to get that done.
However the easiest way is the approach by Ian ( and in Mike's sample ). Using the same colour as in your background, elements that have that colour will hide elements behind it. Only mishap of that approach is that you cannot have gradients or images in your background...as that will show. If you need images or gradients in the background, CSS clippath is your only option in Storyline. Here some samples of mine showing how to use 'clippath'.
https://community.articulate.com/discussions/articulate-storyline/changing-state-directly-from-javascript?page=2
Kind regards,
Math
