Storyline Magic Series - Episode 13 Alpha Channel Masking For Objects And Layers

[@kuyamick_82]

Awesome! Will this still work if we are publishing to Review 360?

[@voltroncoco]

Awesome! This is so creative and efficient. Thank you so much for this wonderful tutorial i've been looking for, but i wonder if i can target a specific layer inside master slide using baseLayer.nextSibling method in javascript(?) I just want to make a navigation buttons layer to be always on top of any other layer (i'm thinking to make the styling of that layer z-index to be like 9999), and if i can target any layer i think many possibilities will be created with that.

[@discoverelearning]

HI @voltroncoco have you had success targeting just the elements themselves using the data-acc-text method and applying the CSS rules to the objects this way?

[@voltroncoco]

@@discoverelearning Yes i have succeeded that, but there are two problems: (1) when i have applied CSS rules on one of the object i want to put on top of everything (using zIndex = 9999), it will still be blocked when i open a pop up layer; (2) the navbar layer (inside master slide) contain many buttons which will be efficient if I can control the layer instead of the object. Actually I have seen a tutorial where we can toggle a variable inside Storyline to trigger navbar layer be opened everytime it changed, but if there's a way to make it more efficient, it will be nice.

[@learnomancer]

This is amazing! Thank you Chris for sharing this. I saw the video Nejc made recently and was wondering if there's any way to mask a video. What a fun implementation. I just tried this and it works when I preview it in Storyline, but doesn't work when publishing a web version (local). I tested using Chrome, Edge and Firefox. I followed the steps you've outlined. I'll need to look into this further, since this is really new to me, but I'm curious if anybody else is experiencing this. By "doesn't work" I mean that the slide is a white screen when published. Anyway, even if it doesn't work from Storyline, at least it will work from a Javascript web object. Now all that's left is to force a use case for this 😅

[@discoverelearning]

You will get a CORS policy warning if you're trying to preview your content locally in the browser. Storyline's own preview panel can circumvent this, or you would either need to upload your content to preview it on the web, or fire up a local web server e.g. with XAMPP. I like your channel content btw it appears we have shared interests! :) CH

[@learnomancer]

​@@discoverelearning Hmm, ok. I understand. Thanks for the detailed reply (and for all the great content you share) 😀

[@vanluc03ha]

tôi đến từ việt nam tôi rất thích chia sẻ của bạn nhưng mà ở 2:48 tôi ko tìm thấy công cụ cắt backgroud trong storyline 360

[@hiawrj]

Wouldn't it be easier, now that we are already inside Photoshop, to just invert the mask. So that what is transparent becomes solid, and what is solid becomes transparent. Then save as PNG and import that into our Storyline project. Now we have the same mask as in the video, that we can put an image behind or a video behind. We can even animate it, without the background following. Or am I missing something crucial where all this coding (except that it's cool and it's always great to learn :D) has a benefit. :)

[@discoverelearning]

We only opened PS during the video to show the mask image generated by SL with transparency, so we're actually assuming here a developer might be working exclusively in SL360. So sure, if you wanted to use other apps to create overlay images to use as masks instead that's one option, but there are two possible complications with this: 1) If the slide design is ever changed then you have to redo the entire image. 2) Sometimes the colour profile between the images can be slightly off so it might be noticeable where a PNG overlay has been used.