Methodology
- Articulate Storyline 360
- JS (P5.JS Library)
- Adobe Photoshop
ELH Challenge Info
This project was submitted to the E-Learning Heroes Challenge #381 Mixology and Beverage-Making Classes with E-Learning
I Am Definitely The Newest Fan of P5.JS!
No that’s not the name of the latest boyband to come out of South Korea! But actually a JavaScript library which in their own words is ‘focused on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else!’
I believe the makers of this JS library are doing a great job in that regard, as even though with my project I was predominantely focused on the mobile orientation event capabilities, it’s clear that using the library can produce many more engaging and interactive experiences which would be great to further explore what is possible combining with Articulate Storyline.
For this experience I am heavily utilising the DeviceOrientationEvent Web API, which with a bit of JS coding inside Storyline is capable of updating a standard number variable whenever the user rotates their device.
Due to time constraints I didn’t do a number of things that I originally had planned to, like adding ingredients interactively, or adding more rotation state changes (there are only 4 on each side in my demo, but adding more would have produced a far smoother animation).
I will record a detailed tutorial covering how this project was produced in an upcoming Storyline Magic Series, so stay tuned for that. For now hopefully this demo gives you some inspiration for how you could use the DeviceOrientationEvent capabilities in your own Storyline projects.
