Nov 13, 2012

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.

15 Replies
Math Notermans

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

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

Neil Blan

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!


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

Math Notermans

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.