Skip to main content

When the 360° image feature was added to Articulate Storyline back in July 2021 one of the first thing that I and several other developers tried to do straight away was add moving images to the background in order to create a 360° video project.

One of the ways that we thought we could get around the image-only upload option was to instead upload an animated GIF as the file, but as you can see any attempt to do that is frozen as soon as the project is published.

Although surprisingly the animation contained within the GIF file included in the project when published remains intact, which we can see by decoding the base64 version image that is used to feed into the 360°-image sphere object.

After investigating this further I discovered that the framework behind Articulate Storyline’s new 360° image feature is Three.js, an open-source cross-browser JavaScript library used to generate and animate 3d shapes within the browser using WebGL.

It is therefore a problem more to do with Three.JS not supporting animated GIFs rather than this being anything that Storyline can control itself.

I was able to find a number of extensions, some of which I actually paid for to experiment with on Storyline published projects but still the ability to convert a static 360 project into a moving one was turning into a minefield of unfamiliar code and console error messages which made me think I was chasing a rabbit down a hole.

Now we flashforward one full year and a moment of realisation when I was checking out another project that used Three.JS and VideoTextures.

Being able to use video as our background texture would in some ways be preferable because compression and image quality can be better controlled on larger pieces of animation, but the task at hand looked more daunting because it would require ripping out Storyline’s existing textureloader function all together.

Still I decided to give it a go and documented my struggles on Twitter until FINALLY I had a breakthrough.

This new method does require some customisation of more than one file within the published project, but it absolutely works across both desktop and mobile devices, with any and all Storyline triggers built into the project remaining completely intact.

The job isn’t completely done however due to the fact that our current method acts as a replacement for the textureloader function entirely, so If the project contains more than one 360 image then they will both end up loading the same video when the slide changes over.

I’m still looking into what might be possible by feeding an array into our VideoTexture instead of having an absolute defined video ID, and things are looking promising but either way I intend to publish the full working method along with some guided instruction on the Discover eLearning website.

You will also very soon be able to find more of our templates and starter guides for Storyline and more over on Gumroad, so keep an eye on our News feed for details of when you can get your hands on these great projects coming from Discover eLearning.

Chris Hodgson

Chris Hodgson is an award-winning Digital learning Solutions Developer and Director of Discover eLearning Ltd. He supports organisations of all sizes to implement engaging, meaningful, and impactful eLearning solutions. Chris has 15 years’ experience working in both private and public sector learning and development.

2 Comments

  • elias says:

    Hi Chris,

    is there a tutorial for this article? I would like to try to reproduce this project
    I’m M.A. student. in learning technology

    Thanks

    • Chris Hodgson says:

      I’m working on a new series of advanced developer tutorials covering areas like Articulate Storyline, WordPress, Adobe, and more. Keep an eye open for this coming soon!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.