Forum Discussion
Masking?
Although visual masking in the Storyline editor isnot possible, you can achieve it with some Javascript. Clipmasking works perfectly as you can see in my post here...
https://community.articulate.com/discussions/articulate-storyline/changing-state-directly-from-javascript?page=2
With some nice tricks you can then create a mask by adding a shape on top of your image in Storyline...then the javascript will use the x/y position of the element on top to clipmask the image.
Lets get that done...
As you can see in the above image... i imported 2 images. Mountains in the back and a grid of bodyparts image on top.
First thing you need to know when doing things with Javascript in Storyline ( in fact anywhere ) is how to use selectors. jQuery offcourse is a library for easy selecting elements, but that is not standard anymore in Storyline. So were gonna use Vanilla ( vanilla = plain, without any external libraries ) javascript to select our Storyline elements. I find the most simple method for selecting elements in SL the 'accessibility names'. Any element in SL gets default a 'acc-name'. The 'data-acc-text' property in the HTML is that. If you donot specifically change it, its the original image name. For this one that would be 'grid.jpg'
So to select the image you can use this code...var StorylineSprite = document.querySelector("[data-acc-text='grid.jpg']");
And because recently Articulate updated its internal Javascript tween engine to the newest GSAP you can then set the clip-mask for that image like this.gsap.set(StorylineSprite, { clipPath:"inset(50% 50% 0% 0%)"});
Like this you can set ( and animate ) the mask as wanted. Adding this sample as Storyline-clipmask001.story
If you want to dive deep into clip-paths this is a great resource...
https://css-tricks.com/almanac/properties/c/clip-path/
- NeilBlan4 years agoCommunity Member
Thanks for getting back!
I was imagining a tool similar to the track mattes in After Effects or
something like the boolean tools in Illustrator. This approach is
interesting though and I'll take a look.Do you have any more resources on using javascript in Storyline?
Thanks again!
*NEIL BLAN*
*Studio Technician*
+61 460 592 761
Episafe Pty Ltd Trading as Epigroup
14 Mews Rd, Fremantle WA, 6160
ABN: 69 159 739 894
The contents of this email and any associated attachments are confidential
and intended solely for the use of the individual or entity to whom they
are addressed. If you have received this email in error, please notify the
sender immediately and delete this email from your system. If you are not
the intended recipient, please note that disclosing, copying, distributing
or taking any action in relation to the information contained in this email
is strictly prohibited.- MathNotermans-94 years agoCommunity Member
Check my posts... most of my work uses Javascript in Storyline. At the moment creating a reusable setup to make multiuser games in Storyline. The basics for that i have working, im now working on a setup where a teacher or SME can create a multiuser game. In fact i do have the concept working. So a teacher can create a game with multiple teams where students then can login and play and cooperate together. What i need to figure out next is how i can make game conditions and events reusable. So the teacher then has the possibility to create a new game with a specific gameplay.
- KeithTrodden-485 months agoCommunity Member
Hi Math,
This is brilliant! Thank you so much for sharing!
However...
I have noticed that this clip-mask is either rectangular or a square.
Is it possible to do one as a circle or as an ellipse?Please reply here either way or here's my email:-
keith_trodden@yahoo.comThanks
- KeithTrodden-485 months agoCommunity Member
Hi!
Actually I have just figured out how to do this mask as a CIRCLE!
Check it out!
Cheers!