Methodology
- Articulate Storyline 360
- PhotoShop
- JavaScript & CSS
ELH Challenge Info
This project was submitted to the E-Learning Heroes Challenge #358 -Create a Custom Table of Contents Menu for E-Learning Courses
Creating This ‘Cool’ Mouse Cursor Effect Was Pretty Tricky!
I was about halfway through creating an entry in Articulate Storyline 360 for this week’s E-Learning Heroes Challenge when a fun idea came into my mind. Instead of the user having the standard hand pointer to melt the blocks of ice, what if instead they could melt the blocks using the actual 2022 Winter Olympics torch!
Of course a ‘Get Out Of Jail Free’ method for doing this in Storyline would have been to have the torch as a draggable object and perhaps cause the ice melt to happen on the ‘Object Dropped On’ interaction, but custom mouse cursors is something I’ve never worked on before with a Storyline project and I quite liked the idea of researching the challenge.
The biggest problem I faced with this was the fact that although making a custom mouse cursor appear (and also animate!) in the project was easy enough, for whatever reason when an object is made ‘interactive’ in Storyline it will override any custom scripted behaviour and instead returns to the classic mouse hand pointer icon.
In the end I could only get around this by applying custom CSS directly to the objects in question (no animated torch for these areas of the project unfortunately), but I was pretty happy with the compromise and the end result.
If you are interested in what custom code was written to create the result seen above, you can check out my Twitter thread which I wrote over the weekend that I built this project – https://twitter.com/Skriss/status/1487720714044121088
