Methodology
- Articulate Storyline 360
- JavaScript
ELH Challenge Info
This project was submitted to the E-Learning Heroes Challenge #356 – Animated Masking and Cutout Effects in E-Learning Design
Some Published Storyline File Hacking Was Needed For This One…
When I first spotted the theme of this week’s eLearning Heroes challenge my first thought for my best imaginative example of transparent cutout layers to date was this spooky example from 2019.
That particular project was fairly technical because I had gone to the trouble of using jQuery in order to calculate the mouse position whilst the flashlight area was being dragged by the user, to then make a layer appear when the values lined up to a certain point, i.e. the girl on the stairs.
As I started to think about it I realise now that I could have made my life a lot easier by including an additional ‘hotspot’ shape within a group and having this be the moveable object on the slide instead! Which was proved correct by this reimagining of my project for this week’s submission that you see above.
I did however have to repeat an important published file hack, in that Storyline for whatever reason will move the dragged object to the very top of the stack whilst it is being clicked & dragged, even if there are layers above where the dragged object sits, and then as soon the object is let go it will return to the z-index where it originated.
To get around this we have to use some additional CSS pasted into the output.min.css file which targets the specific layers above the draggable object via their ‘data-reactid’. As this value is dynamically generated during publication from Storyline, we have no choice but to scour the published code to discover what values have been assigned and then target them using CSS meant for that attribute, such as: [data-reactid$=”$c926″]{z-index:200000000!important;}
This was something else I learned during this example, which is that by adding a dollar sign to the end of the attribute ID in CSS, we are saying that we are only interested in any attribute ENDING with the value in quotation marks, so this ultimately saves us from having to write out a very long value and simply use the part that matters!
