This week’s E-Learning Heroes Challenge is Creating Interactive 360° Images.
This brand-new feature can be used to build interactive panoramas, virtual tours, exploration activities, escape rooms and much more.
The Articulate team have released a comprehensive range of tutorials to help both new and experienced Storyline users get to grips with this fantastic update:
- Adding and Editing 360° Images
- Adding Markers to 360° Images
- Adding Hotspots to 360° Images
- Controlling Navigation in 360° Images
- Adding Interactivity to 360° Images
@Articulate Storyline updates like 𝟯𝟲𝟬° 𝗜𝗺𝗮𝗴𝗲𝘀 only come along 'Once in a Lifetime'.
— ᴊ ᴏ ɴ ᴀ ᴛ ʜ ᴀ ɴ_ʜ ɪ ʟ ʟ (@DevByPowerPoint) July 30, 2021
To celebrate this brand-new feature, my latest @ELHChallenge demo is a panoramic tribute to Talking Heads. pic.twitter.com/sM8puNFFH9
And You May Find Yourself...
And You May Find Yourself...
… trying to change the built-in labels, because as cool as the 360° image feature is, you’d like more control over how the labels look and where they appear?
In my first iteration of Once in a Lifetime, I used the built-in labels to complete each song lyric and my demo looked like this when viewed on a desktop computer:
But I didn’t anticipate how these labels would behave when my demo was viewed on a mobile device.
Each label filled the right hand side of the screen and kind of ruined my layout.
Where possible I try to adopt a ‘mobile first’ approach to e-learning design, as the latest statistics show that mobile devices account for 55% of all website traffic. These users would not experience my demo as it was truly intended. So I went back to the drawing board and began to investigate what items could be triggered – and therefore controlled – using a 360° image.
By linking the state of my custom labels to a variable, I was able to control when they appeared using the adjust variable trigger within the 360° image.
This also allowed me to fix the location of each label, which is useful as I cannot predict how a user will navigate each panoramic image.
With a greater degree of control over the behaviour and appearance of each interaction, I achieved a more consistent layout across the five scenes.
And You May Find Yourself...
… trying to switch between several 360° images while minimising any lag?
Soon after this update was released, the brilliant Chris Hodgson began poking it to see if it could support animation. TL;DR, unfortunately it cannot at present. Nor does this feature currently support state changes to ‘toggle’ one 360° image for another. Honestly, it feels churlish to highlight these limitations, but I know how the Storyline community likes to push the software to its limits.
However, both Chris and I arrived at the same conclusion. The best way to jump from one 360° image to another while minimising lag is to use layers.
Hey Jon. Simplest method right now I think is to have multiple 360 images on each slide layer for all states and use hotspot triggers to show/hide between layers, whilst trying to smooth out the positional change that may happen with a slow fade or something like this.
— Chris Hodgson (@Skriss) July 29, 2021
Layers not only allow for a continuous soundtrack (see above) but also remove any load lag between slides, especially on mobile devices. However, panoramic images are larger than usual and my tests showed that each layer took a moment to load when it contained a 360° image interaction.
Chris’s suggestion of using a slow fade to smooth the transition is a good one. But I thought the slight jolt between scenes suited the tone of my demo. With the base layer briefly revealed as each panorama loaded, I replaced the slide background with a GIF of TV static. It’s not a bug, it’s a feature!
And You May Ask Yourself...
“Doesn’t the soundtrack of this demo go against all of your previous advice about not using copyrighted material, Jon?”
Well, er, yes – I suppose it does.
Some of you may have read my recent Twitter thread about the use of GIFs and memes in e-learning. I was especially interested in the use of copyrighted material from TV shows and movies in courses. The discussion about whether or not this constitutes Fair Use was really interesting and this debate is certain to intensify in the age of TikTok.
In the past I have followed the rule: ‘If in doubt, leave it out’. Music copyright is a particularly thorny area. However, there are certain exemptions for karaoke tracks and cover versions, as well as the wider legal arguments for Fair Use.
The 4 Factor Test of Fair Use
I am not a lawyer but here is my defence for using the Talking Heads classic, Once in a Lifetime, in my latest demo:
- The purpose and character of the use is for teaching and is transformative – as it has changed the work for a new utility. My caricature of David Byrne parodies his appearance in the music video of the same song. I am not profiting from the use of the song and have given credit to its original authors.
- Whilst the song is a highly creative work, it is also a widely published work and its use is important to the educational objectives. In this instance, to highlight the software features being demonstrated.
- I have used only a small quantity of the song and it is also missing its distinctive lead vocals. The amount of material I have used is appropriate for the educational purpose.
- My demo will have no significant effect on the market or potential market for the copyrighted work and although published on the Internet could not replace sales of the copyrighted work. I will not be distributing a copy of my demo for this reason.
For more on Fair Use, check out this advice from Columbia University Libraries.
My God, What Have I Done?
This is definitely a once in a lifetime thing. I promise that I will never use the music of Talking Heads in a demo again. If any member of the band is reading this, I’m a massive fan! I plan for Once in a Lifetime to be played at my funeral. Please don’t bury me with legal fees before then.
As always, if you have any questions about this demo – excluding legal advice – drop me a line directly or ask me in the comments below.
Same as it ever was.
Hello!
Thank you for this post; it’s been really helpful!
I have a question please. Can we use 3D panorama photos we’ve taken on our phones for this feature? I’m having some difficulty getting them from my phone to the laptop, and I would really appreciate any advice.
Thank you!
Hi Georgette – that’s a great question. I haven’t yet tried this feature with my own panoramic photos, but I assume as long as the quality is good any 360 photo taken on a mobile phone should import and perform in the same way. Then again, if your phone is saving the image in a device-specific file format, you may run into problems. All of the images I used in this demo are in JPG format, if that’s any help? You may need to convert your own image from another format.