Back in August we reported on a method which we had discovered to replace any 360° image interaction created with Articulate Storyline 360 with a video file, whilst maintaining all hotspots and trigger actions that had been built using the original image uploaded to Storyline.
The method is the true definition of a Storyline Hack! As it does require the editing of no less than two of your project’s source code files in order to replace the default texture loader function with a custom method that instead uses the VideoTexture capabilities of Three.JS.
Still the end result is highly effective, with interactions continuing to work as normal and across all types of device including iPhone.
But of course there are limitations that come from implementing a process which requires manipulating Storyline’s project files after publishing, so we intend to share this method with the eLearning development community for the purposes of experimentation, although as far as our own testing is concerned there would be nothing particularly wrong with implementing this method in practice if you absolutely need to get an interactive 360° video produced in Storyline!
You can watch the latest episode of our advanced Articulate Storyline 360 tutorial series right now on YouTube, or visit our Storyline Magic Series Episodes page on the Discover eLearning website where you will find all episodes published to date:
Be sure to subscribe to the Discover eLearning YouTube Channel to be notified of future episodes!
Discover eLearning are specialists in the development of engaging interactive digital learning content using Articulate Storyline 360, having created award-winning eLearning work utilising everything that the software has to offer, as well as our entries into weekly eLearning Heroes Challenge ran on the official Articulate website.
A copy of the written transcript for this episode of our Storyline Magic Series is available to read here:
Hello this Chris from Discover eLearning. Welcome to a new episode of our Storyline Magic Series for Articulate Storyline developers.
In this video I’m going to show you a working method for creating interactive experiences using 360-degree video in Articulate Storyline 360.
At time of recording, the 360-degree interactive image builder that was added to Storyline doesn’t currently support video files, including animated GIFs.
And though video support may be added one day with little to no notice, at this moment in time it doesn’t appear to be on Articulate’s priority list for the future – even though many users have been asking about it on the eLearning Heroes forums.
The method I’m going to demonstrate will allow you to replace your 360-image interaction with any MP4 video, and this also has proved to work across different devices, but because we do need to perform some customisation work at code level to achieve this, there are some limitations.
We’ll get into that later but let me now guide you through the steps:
The first thing we need to do is build our project as normal in Storyline using the very first frame of your 360-degree video as our image. I’ve got a video here that I want to use as the starting point for a children’s hunt and seek interactive game.
I’ve created the composition in After Effects and rendered the scene using a 360-degree camera that has given me my flattened final version which Storyline will be able to stitch together in the 360 Image tool.
With my scene built and ready with all hotspots and trigger interactions in place, I can publish the project out to my desktop.
Now we’ll open up the project folder and take a look at the files contained within. The first thing I need to do at this point is drop my 360-degree video into the root directory so that it sits in the same place as my story.html file.
Let’s open up the story.html file in Notepad++, or whatever is your preferred source code editor app.
We’re now going to create a video object which will be used to override the default texture in our 360-degree image scene. But we don’t want people to be able to see this video object, so just underneath where the div container sits with the ID of preso, create a new div with the style options of 1px width and height, and overflow set to hidden.
This will ensure that the video object included on the story.html page itself is practically invisible to the user when they launch the activity.
Now we will create our video tag within the new div and ensure that it has the ID set as video, along with the following options – playsinline and webkit-playsinline, muted, looped, and autoplay.
You can exclude the muted attribute if you wish but just make sure your user has interacted with the Storyline activity in some way first before the 360-degree image interaction slide is loaded.
The width and height value of the video should be the same as the image file you uploaded to Storyline, and the src should be set as dot-forward slash-and the name of your file. Finish up by adding a cross origin anonymous attribute.
We’re now done with what needs to be edited in Story.html, so we will return to the project folder and navigate to html5>lib>scripts>and here you will find a file called bootstrapper.js, which we will open up in Notepad++
You will notice that this file unlike our story.html file has been compressed or ‘minified’ in order to remove unnecessary spacing. This is good for performance and not so good if we want to make any edits to the source code! But this is where Notepad++ comes in very handy, as we can use the JSTool plugin to expand all blocks of code into a far easier to navigate format by clicking on JS Format.
Now the file is easier to navigate, we’ll do a search for Storyline’s TextureLoader function which applies the 360-degree image to the outer sphere of the 3D environment. This should appear at around line 1880 of the document.
Now make the following edits –> comment out the line that applies the TextureLoader to the n variable by adding two forward slashes at the start.
Then write onto a new line c-o-n-s-t texturePath with a capital P = document.getElementById video. End the line with a semi-colon.
On the line below this, add var n = new THREE (in capital letters) .VideoTexture(texturePath). End the line with a semi-colon.
Save the file.
And we’re ready to test the project, but you may notice if you try opening story.html from your local machine that the video texture fails to load. This is because we need to upload the project to our web server first, so let’s get this loaded onto the Discover eLearning website and take a look at the results from there.
As you can see we now have a fully functional 360-degree video with all Storyline hotspot and trigger interactivity still intact.
This method is of course far from perfect in terms of it being a suitable way of creating and managing 360-degree interactive video, but if you like me are fascinated in breaking Storyline360 apart to discover all the different things it can do then I encourage you to give this trick a try and let us know how you got on in the comments below.
So thank you again for joining us for another episode of our Storyline Magic Series.
If you’ve been enjoying the series so far please like and subscribe to the Discover eLearning YouTube Channel, and also visit the Discover eLearning website where you will find our advanced Storyline development tutorials that cover scripting languages like JavaScript, and many more courses that are coming very soon from Discover elearning.
Bye for now!
