Computer Arts magazine, as part of their ‘behing the brief’ series, has just published a digital production ‘making of’ feature on Being Henry, the interactive film we recently produced for The Brooklyn Brothers and their client, Land Rover.
Make sure you buy a copy now - the rest of the magazine is superb, with features on The Partners, Mike Joyce and valuable insights on minimalism by Adrian Shaugnessy. In case its not easy to get this issue, here are some quick scans of the article, containing some exclusive images from the digital production process.
And here is a part of the interview in an extended, unedited format, outlining our production challenges:
CA: What is the idea of the project? Who is it aimed at?
LR: ‘Being Henry’ is an interactive film about choices. Each choice the user makes takes Henry on a different journey through a multiple strand story, and each choice also dictates a particular specification of Range Rover’s Evoque model – the results of which you find out when the film has played at the end.
It is not aimed at anyone in particular; good content is viral across the board, especially one that packs action, comedy and drama scenes within a few minutes of interaction.
CA: What was it about this project that excited you so much and made you want to get involved?
LR: The most exciting thing was that while everyone agreed that ‘story is king’, the interactive side of the project seemed to be taken equally seriously by all the stakeholders. We were not going to go for tech gimmicks, but rather with a very ‘filmic’ interactive interface. That was exciting for us and we knew we could make a difference.
CA: Exactly what elements of the brief / project was Less Rain responsible for?
LR: We pitched together with Somesuch & Co, our live action-production partners. Nick Gordon, the director, had written an initial treatment that was diving deep into the characters and their relationships. We had a good idea of how the interactive parts would work as an interface so they would interfere with the storytelling process as little as possible. We sat together and worked out how to film the interactive parts and join them with the linear parts in such a way that the final experience felt like one thing.
Less Rain was responsible for technical direction, prototyping all the interactivity to get sign off from all the stakeholders and building the end product using Adobe Flash.
We were also responsible for the design, art direction, 2D and 3D animation of the interfaces surrounding the interactive film itself; loading screens, homepage, the video player as well as the end screens that reveal the car.
By being responsible for the delivery of the end product, we ended up doing a lot of quality control, working with all the post-production houses to ensure everything clicked into place.
CA: Can you talk through the main stages of production on the areas of the project you were responsible for - what was your pipeline from start to finish? Please outline the major challenges you faced on this project and tell us how you overcame them
LR: The first stage was really proof of concept for the main interactive interfaces, the so called ‘decision points’. Somesuch & Co shot a series of tests outside their offices that we then used to build a prototype to work out the interaction, as well as how the final footage should be shot so decision points can be easily and reliably assembled. It was utterly important to work closely with Somesuch and complete the tests before the shoot in L.A. started.
We created a flowchart diagram showing the progression through each storyline as well as the assets needed – this became the master document that guided the editors, post-production facilities as well as our own development team.
After numerous iterations, our prototype started evolving into the skeleton for the whole film; we used dummy assets to create the scaffold that would host 72 different linear videos, so that when the final graded footage would arrive we could deliver the end product within a couple of weeks. During the whole life cycle of the project, we often had to modify this framework overnight to demonstrate a new piece of functionality or get sign off on interactivity. By the end of the project we had reached version 40.
Then scriptwriting and storyboarding started in L.A. The scripts were regularly sent over to us in London to check that things would work interactively. We were present during pre-production and the shoot in L.A., working with the director to make sure all the interactive moments were set and shot in the most appropriate way. During decision points, Henry needed to walk backwards for a few steps, then stay still for half a minute and the walk forwards a few steps towards the other direction. His body needed to be filmed moving from one side of the screen to the other in slow speed, so the individual frames of his movement would not be blurry. Unfortunately after the 2nd day of shooting, Leo Fitzpatrick that played Henry hurt his ankle, which meant he could not walk backwards very well, especially in slow speed - that was a real challenge.
Shooting in L.A. was a very intense time, as there were only 7 days to shoot over half an hours of feature film quality footage. Even if you pin everything down in the storyboard, there are bound to be new things you discover on set; we had very little time to think through how they would affect interactivity and make a call on how to shoot them. Fortunately, the live-action production team was so tuned up that they were able to overcome for lost time and get on camera what was needed.
While the shoot was taking place and still using dummy assets, the London Less Rain team spent most of their time working out an intelligent way of preloading video assets so the user would not experience any stuttering or buffering between sections. We wanted great looking footage, and we wanted it to be available on demand, and those two demands aren’t necessarily compatible. We’d seen other high production interactive films and found delivery slow, so we were determined ours wouldn’t suffer that problem. We tested performance of the videos on content delivery networks, and worked out the best logic for buffering slices of the movie on demand. It was no small task when a decision point in the movie can have four or five potential paths forward and you are trying to ensure playback will begin instantly.
We also worked on the video compression settings, making sure we had a good trade-off between quality and download speed. We worked on the ‘video player’ player module, implementing an XML based subtitling system as well as making sure we can switch between low / medium and high resolution without losing any video frames.
By the time we had ‘locked’ picture, our prototype had evolved into a fully blown framework, ready to receive all the proper visual assets. We set up a production pipeline between Primefocus (post production), Silversun (compression) and ourselves and started replacing our dummy content with real one, albeit not with the final sound and colour grading. The final sound was added later in with the help of Soundtree (music) and audio post by Pure Soho, Grand Central and Angeli Sound.
With the ‘real’ content in, it became apparent that we had to deal with a few additional challenges.
Being Henry uses a mixture of JPEG images and F4V videos to assemble a ‘decision point’; while you drag Henry on screen you see the content in JPEG form, but when you release your mouse we switch to F4Vs. We needed to make sure that the transition from one medium to the other was visually as seamless as possible. Furthermore, we needed to restrict the filesize of the JPEGs used in each decision point to under 8 MB to avoid waiting time (videos load much faster than JPEGs), which meant that some decision points needed to be shortened. So we found ourselves talking with Nick Gordon and The Brooklyn Brothers way after editing was finished to decide on the limitations that the ‘medium’ would impose on the ‘content’.
Despite all the preparation, there were a few moments where we had to come up with software techniques to complement what was initially shot. A decision point always starts with Henry being still on screen, waiting for your interaction. The agency felt that Henry was a bit too still during these moments, so we were called to artificially animate the footage to feel like it had been shot with a handheld camera. We loosely held a piece of paper in front of our webcam for a few minutes, recorded all the data and then used it to create a ‘handheld’ effect.
Most of the interaction on Being Henry has to do with clicking and dragging. One of the challenges we had was to prepare the user for it, but without any detailed instructions on screen. To this end, we created an initial language selection interface where user would pick their country of residence by clicking a dragging a horizontal row of country names; this experience was the best introduction on how to use the site.
Another challenge was to keep the user engaged while we were pre-loading the first video of the film. We created a loading scene that disguised itself as narrative content – showing a still frame of Henry sleeping and going from night to day as the clock ticked between 0.00 and 10.00 am. The duration of the loading scene depends on how fast you load the first video of the film; a good connection will take you though the loading scene very fast, with the clock going from 0.00 to 10.00 am in a few seconds.
Once the site had launched we then set about converting the website to be used on a touch screen as part of a global Range Rover Evoque Experience tour, which is produced by Imagination and which takes place across 45 cities worldwide. We needed to redesign the very minimal interface to work on the larger screen and with touch rather than click. Old assumptions for the website had to be rethought and the homepage needed to be much more animated; in an ‘exhibition’ environment the content has to compete much harder for the visitors’ attention. Finally, we built in a custom analytics software so we could track which paths through the film people in different cities took.
