In late 2023, OFS Managing Director Lee began discussing the idea of interactive video learning and how Orange Fox Studios could branch into this exciting new medium for video and animation storytelling.
Join us as Animator and Content Creator Nicki explains how Stornaway.io is helping to shape the future of interactive video content and our edutainment dream!
TESTING, TESTING
In December 2023, we decided to trial our very first Interactive film. And who better to take the leap into the unknown and explore, than the one and only Mr Fred Fox! So with that, I set about making our festive advert for 2023, using Stornaway.io.
Stornaway.io is an adaptive interactive video platform that is extremely user-friendly and easy to learn. With a browser-based editor that lets the user map out the story visually, without the use for coding, and offers instant play-back so that progress can be constantly monitored in real time.
After the success of our first interactive film, we went on to develop and release two more: ‘January Blues’ and ‘The Fabulous Fables of Fred Fox’ – a compilation interactive page of all of Fred Fox’s stories, that can be browsed at the leisure of the audience.
You can check out all of our interactive films using the links below:
BUILDING ANIMATION FIT FOR INTERACTIVE CONTENT
Storytelling for interactive animation requires a slightly different approach and way of thinking. It’s not just about getting one great storyline, but about creating several branches of content that can be explored by the audience. This means the process can take a little longer to get right because finding the right narrative and making sure the branches of storylines can work alongside each other is really important.
Using our trusty Storyflow document for each interactive animation, I explored different ideas and narratives and also used Adobe Photoshop to draw rough storyboards to help visualise how the story was flowing.
I approached the interactive animations in a similar way to how I would approach a standard animation: designing the assets needed in Adobe Photoshop and Illustrator and then animating in Adobe After Effects. The difference came when I began exporting, as I needed to make sure I exported the film in sections, not as one whole film. I also animated the question banners in After Effects over the animation and exported them accordingly. I left the options buttons off these exports, as I would be applying the buttons later in Stornaway.io.
THE MOMENT OF TRUTH
My First impressions of Stornaway.io, were that it was set up in a very simple, straightforward way. There are tons of videos on their website to help get started and it was very quick for me to get used to how to navigate my way through the platform. It was very easy to see whether the story was working how I had intended it to, because of the instant playback button, which allows you to see in real-time how the story map is working in the platform.
Stornaway.io works by creating ‘islands’ and then mapping these islands out by connecting them as seen in the example below.
By clicking on an island, it brings up a panel on the right. This gives all of the options for the island. As shown below in the example, the first island for the January blues animation is the ‘START’. This island gives 2 choices, each can be seen linked on the map to new islands: ‘HOLIDAY’ and ‘HOME’. In the panel on the right, we see how each one of these choices is displayed on the screen, with customised buttons. When these buttons are pressed, it takes the audience to the next scene, aka the next island in our story map.
In the panel on the right, the island settings consist of:
- Island name – This can be displayed on the screen or hidden depending on preference.
- Onscreen choices – Each of these choices will then be connected to a new island containing the animation for that choice. There are pre-made buttons, or there is the option to use your own designs. I used my own buttons (designed in Photoshop and saved as png files) so that they were in keeping with the hand-drawn style of Fred Fox.
- Onscreen choice styling – Enables the onscreen elements to be customised. Here there are options for the duration of the choices being displayed, where the options are displayed on the screen and what colours to use (if using the pre-made buttons). I set my colours to transparent here, as I didn’t want anything conflicting with my hand-drawn button images. Being able to choose my own images for the buttons made a real difference to the interactive element of these animations because I was able to make it look in keeping with the animation itself and keep it all tied together nicely. Another great thing about the buttons is that they are customisable in size and placement on the screen which is very useful.
This was something that came in after I had completed the first two interactive films and meant that I could place my buttons wherever I wanted them, whereas before it was more limited. I think this feature would be even better if there was an alignment tool to ensure all buttons were aligned properly to the page and each other so that the composition is correct. I believe this is a feature that is currently in the process of being updated, so I’m excited to have that tool to work with in the future.
- Media – This enabled me to choose which animation clip I wanted to be associated with this island. There is also the option to use images here too, which I used when creating ‘The Fabulous Fables of Fred Fox’.
Overall, I think Stornaway.io is a great tool for creating interactive content. It makes the process very easy to break down and has added a new and interesting way for us to tell stories and interact with our audiences.
AN INTERACTIVE FILM WE ADMIRE
WHAT’S NEXT?
We are excited to continue working in stornoway.io, and to be able to explore further how this can be used for our clients. This platform offers a new way of approaching audiences, getting them involved in content and making them feel immersed in the stories we are telling. As well as using this to create engaging storytelling, we are keen to explore how interactive video can influence and enrich learning in schools, colleges, universities and in the workplace.
If you have an idea or are interested in discussing how interactive video content could enhance your brand or company, get in touch! We can’t wait to hear from you!
