Forum Discussion
mouse trails
I'm adding a game at the end of the course where users will click moving objects, effectively, "spraying" them with water. Is there a way I can add some sort of animation that makes it look like a stream of water that follows the mouse? Any help would be greatly appreciated!
I have attached a simple example that you could expand upon. It "attaches" the objects in Group 1 to the mouse, so they move with it. Use space to turn on or off the animated water stream. Click on a fire to put it out.
See it: https://360.articulate.com/review/content/b4cbf794-1b56-4a6e-b062-a82cfc3ef623/review
This runs a short JavaScript on timeline start. It watches for the mouse to move, and adjusts the position of Group 1 to match, with an adjustable offset.
The animated GIF came from https://tenor.com/view/hot-summer-drink-water-sun-gif-1186220646279868592
Great example by Nathaniel! We could use additional CSS to create a similar effect where the water.gif is used as the background only when fire images are clicked. It would be great to also display points, like in a real game. Check the attached video demonstrating this. Creating this effect to look more realistic and with better graphics may take some time. I don't recommend if you are not familiar with JavaScript and CSS as it can take significant amount of time to update and tweak the code the way you want.
No, I am unfortunately not familiar with Java or CSS...I wish I were though, that looks great!
It would be possible with some kind of JavaScript library loaded and tweaked in Storyline.
Some direction for that would be helpful.
This is incredibly helpful!! Thank you very much!
