Project Description

We LOVE a challenge at Crosscut and are always looking to push the boundaries to create engaging video content. So when De Montfort University approached us with the idea of allowing students to control their characters outcome by making decisions within a video, we began working out exactly how it could be done.

The idea, quite simply mirrors that of an Interactive Fiction book whereby the reader and make decisions at the end of each chapter, and then turn to a certain page to continue the story based on the decision they’ve just made. A great example of this is Famous Five: Adventure Game Books.

Making Friends - Interactive Video

The schematic for ‘Making Friends’

Now this all seems quite simple, but when you get down to it, creating a map of different paths becomes a rather complicated affair. DMU wanted a total of 8 units or ‘stories’ focussing on different aspects of starting University; from applying to funding through to making friends. Each of these modules started off by introducing a character and a choice. In module 2: making friends, for example; we meet Deborah. Deborah is a fresher on her way to her halls of residence for the first time to move in. It’s obvious that she’s nervous and once her parents have left, we offer the viewer a choice: ‘Leave Door Open’, ‘Look on Accommodation Facebook Page’ or ‘Stay in Room and Unpack’. Depending on which decision the user makes, they’re taken to the next part of the story with an outcome based on their decision. Each story is relatively short but allows us to determine what the viewer may be susceptible to when starting University (whether it be bad at budgeting, or suffering with anxiety in social situations etc). At the end of each story, the system then offers a PDF download with tailored information based on their decisions.

When is came to style, DMU were very clear with their brief. They loved a style of character animation we’d done for them previously, and so they wanted to use that same style but within real environments in order to show off the campus simultaneously. Whilst our character animator, Miriam Bean was working on the designs, we set about filming each background for every scene. We manually rotoscoped elements of real environments around the campus in order to seamlessly embed our animated characters within the scenes.

Animation, Crosscut Media

Two characters interacting within one of the University’s lecture theatres.

Interactive Video on Smartphone App

The final project displayed on a smartphone

Concept: Tick. Style: Tick. Now for the nitty gritty of it – how on earth was all of this going to work? After hours of research, meetings with programmers etc, we settled on an all-in-one e-learning software package that would allow us to bring all of the elements together. We could add the interactive buttons and output as a responsive HTML5 file that could be embedded within the University’s website. Articulate Storyline is an incredibly powerful piece of software and although it looks like nothing more than a glorified Powerpoint, the features available made the process far more straight forward than any other system we looked at. The main view allowed us to recreate the schematics we’d drawn up for each module before dropping in each section of the video and adding interactive button overlays.

 

The process was labour intensive and confusing at times, but overall the experience was seamless and the output was spot on. Once outputted, the HTML5 file was simply uploaded to the University website and thanks to it’s built in responsive player, we could also convert the page into a progressive web app, allowing students to access the project from their smartphones.

So there we have it; a fully interactive video that works across all devices. Challenge: complete. We loved working on this for De Montfort University and it really showcased our collective skills across the team and our suppliers. If you’d like more information or would like to talk about a similar project, please don’t hesitate to get in touch.