Inspiration
Claymation
Children’s Television Art-style
Expressive Character Design
Year

2022

Methodology
  • Articulate Storyline 360
  • New SL 360 Image Feature
  • After Effects Animated VR Compositions
  • 360 Panoramic Video (Published in Premiere Pro)
Mobile User Update

Project now fully working on mobile (tested with iPhone and iOS). If you discover otherwise on your device please let me know!

A Working Prototype Project That Swaps 360° Video Into A Published Storyline Project

This demo is a true definition of a Storyline Hack!

As soon as the 360° interactive image features were added to Storyline 360 I immediately began exploring the published output to understand how exactly the end result was rendered in the browser.

When I discovered that Three.js was behind the 3D viewport environment shown to the user I began exploring what would be possible but at the time failed to find a way to bring moving images (Animated GIF of Video) into the published project, or to find how exactly we could add GIF support to Three.js.

But now one year on and with a bit more JS coding experience under my belt (and a lot of determination to push through the countless errors I saw when breaking Storyline’s code!) I have managed to get this working.

I think this will make a fantastic advanced tutorial which we’ll look to make available soon on the Discover eLearning website, as I saw on the ELH forums that a lot of devs are demanding video support for the 360° image feature but Articulate at this moment has confirmed they have no intention of pursuing it.

You can read about the journey to get here over on my Twitter account – https://twitter.com/Skriss/status/1560262489081688065?s=20&t=Z4fVP7NMUwPAzFL0Eup01g