So far I'm seeing that Storyline has many great features and it seems like they thought of everything. However, I don't see anything that allows for masking. Am I missing something? This is a pretty common feature in other programs...and very useful.
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
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?
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.
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.
I'm glad that Math has been able to pop in and help you here.
It looks like your email signature came through when you replied via email. You can remove that if needed by clicking ‘Edit’ beneath your response. Here’s a quick Peek video if you need help.
12 Replies
there is no masking in Storyline, you can aproximate that but it is not a current feature
Thanks for confirming.
Hi CK1 CK1,
why don't you enter a geature request here
Geert
I miss masking too:( I'm a masker. Definitely put in a feature request.
Photoshop is must!
Hi Vivek,
This thread is a bit older, but you're welcome to submit a feature request as well.
Hi Vivek,
You can send along feature requests here and those go to our product development team.
Would be great to have masking!
-Just putting in my two bits...
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/
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
*neilblan@epigroup.com.au *
www.epigroup.com.au
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.
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.
Hi Neil,
I'm glad that Math has been able to pop in and help you here.
It looks like your email signature came through when you replied via email. You can remove that if needed by clicking ‘Edit’ beneath your response. Here’s a quick Peek video if you need help.