Interactive Filmmaking Round Up Report


Interactive Filmmaking Round Up Report
Gemma McKinnie

Over the course of a year, Sheffield Doc/Fest collaborated with Crossover Labs and film festivals around the country to run a series of workshops on interactivity and filmmaking. All six interactive platforms: Klynt, Racontr, Korsakow, Popcorn Maker, Treehouse and Storygami, give filmmakers the ability to create interactive elements for their films, without the need for a programmer to build them.

For many participants, the workshops were also an introduction to interactive filmmaking as a concept. The medium is still quite new, and so filmmakers were eager to learn not just about the practicalities of using these platforms, but also about the thought processes and principles that go into the design of an interactive user experience.

The workshops were modelled in part on the hackathon format. Participants were first introduced to the platforms by that day’s speaker, who taught them about the features and workflow of the software. But they were also encouraged to bring own media files to the sessions, and later in the day would build interactive experiences using content they had selected. Combining the intensity of a hack with the more freeform sensibility of a workshop meant that participants could play with the platforms in a friendly, relaxed setting, and still gain practical experience and proficiency with the technology. Another advantage of this format was that it allowed participants at any technological skill level (from newcomers to expert programmers) to learn about the principles of interactivity, and test those ideas in an applied setting.

My role was to attend every workshop, try out the platforms, and write a report that would explain what each of them offers to filmmakers who wish to add interactivity to their films. I then chaired a panel session on interactive filmmaking at Sheffield Doc/Fest 2015. The reports, and a conclusion which summarises our findings, are listed below.



“The software was born because of our needs in production”, says Maria Gemayel of Klynt. Designed as an in-house tool by Honkytonk Films, she explains that producer Arnaud Dressen and director Samuel Bollendorff wanted “quick and easy” software that would make Journey to the End of Coal (2008), a film about the working conditions of Chinese miners, into an interactive online experience. The original prototype of Klynt, created in 2008, was known as ‘Webdoc Editor’, and brought a ‘choose your own adventure’ function to online documentary narrative. The Honkytonk experiment was successful: the first interactive documentary to ever feature on Le Monde’s website, Journey achieved 1.5 million page views and won the Prix SCAM 2009 Digital Interactive Artwork award. The first public release of Klynt then came in 2011, and was developed in Flash.

Since its release, Klynt has moved beyond independent production companies. It has progressed laterally across online services and institutions, as they begin to recognise the potential of interactivity as a tool to expand the scope of their reports. Newspaper groups, from La Repubblica to TV5 Monde to Agence France Presse, have used it to allow their online readers to choose their routes through a visual article. NGOs such as Enfants du Mekong and Greenpeace, meanwhile, are using it as a means of allowing multiple important stories to be told in a democratic way, without an implied narrative hierarchy in place. The Honkytonk website now has a one-line summary description for the Klynt app: it’s a ‘research project’, that’s ‘designed for creative makers to explore the art & craft of interactive storytelling’.

Its progress has been steady, keeping up with the emergence of Web 2.0. Klynt v.2 came out in 2013 in HTML5, with the Klynt Player released as open source software. Klynt v2.11, the newest version available, is responsive, so that the films made with the app can be viewed across platforms, from computers to tablets and smartphones, without difficulty.

Klynt comes in professional and light versions, and a one-month free trial can be downloaded from Its setup is relatively easy. Like the learn-to-code website Codecademy, Klynt tells you how much of the installation process you’ve completed as you go. The layout of the app’s media editor should be familiar to any user of professional video editors such as Adobe Premiere Pro and Final Cut Pro. On the left side of the screen is the media library, where sound, video, images and audio files are stored. At the bottom is a timeline. To import media, use the left hand menu, and click a file – audio, video, image – to drag and drop it to the timeline. Each piece of media is automatically recognised and categorised by its type of compression. Here, Klynt emphasises ‘good practice’ and advises that users compress files in the recommended settings before uploading them. Recommendations are available in Klynt’s Documentation pages – and when using Klynt, it becomes clear that not following their advice could lead the filmmaker into dead-ends of file incompatibility and sequential cul-de-sacs. Keeping the Documentation open beside you might be another example of good practice – it is extensive and easy to navigate. Even though Klynt does not require its users to code, its use of the principles of coding to organise much of its workflow means that a basic knowledge of HTML and CSS are definitely helpful. In fact, as an Open Source project, Klynt Player can be modified and customised if you are familiar with coding in Javascript or CSS.

On the right side of the screen is the storyboard, presented in a familiar ‘mindmapping’ style. Colourful boxes can hold selected files and information, which the filmmaker then links together as they wish by drawing lines between each box. These sequences can also be set to different sizes, to differentiate visually between sequences and sub-sequences. In this way, the user experience for their webdoc (or report) is developed. Intriguingly, the new Mindmap widget exposes the storyboard itself to the webdoc’s audience. In that context, it is intended to act as a menu, providing an overview and a guide to the interactive experience as a whole, and allowing the user to avoid repeating sequences. So the mindmapping style is simultaneously utilised by Klynt as a development tool for the filmmaker, and a reference tool for the viewer.


Klynt’s interface

If you want to direct your viewer to an external website relevant to your project, the URL can be embedded into a button to create a link. With the iframes feature, it also becomes possible to embed external content from Youtube videos inside your project. In this case, the filmmaker picks the Youtube video, clicks ‘embed’ (share) and can then copy the code that Youtube provides into Klynt.

Accessible via the footer, Google Maps can provide geolocation information – a technique that has proven useful for projects that focus on particular geographic spaces. Several maps can be created if required. Klynt’s Miniplayer is designed to embed seamlessly in selected websites, and to maintain the correct aspect ratio for projects across different websites and screens. Its default aspect ratio is 970px x 545px. It’s advised that you select your preferred AR at the beginning of the process to retain consistency across your media. If you change the ratio later, not everything you have added to the project will adapt.

Your interactive project can be edited up until its publication online. Klynt, however, is not an editor in the sense that Premiere Pro and Final Cut Pro are editors. Klynt is for finalised media, which the filmmaker wishes to adapt into an online interactive experience. It was emphasised throughout the tutorial at Sheffield Doc/Fest that it is good practice to immediately give a name to each sequence that you create for your project, so that you can keep track of each one. The names of your sequences can also be seen by the user later on, and will form the end of the URL for that webpage.

The Desktop application for Klynt is local – you therefore need to know where all of your relevant files are stored on your computer. Its folder contains the file index.html (the home page for your finished project) and other necessary files. It’s important to note that Klynt duplicates all the files which you import from your hard drive into the app, which might cause storage space problems for larger projects. Uploading your project to the Internet can be tricky (and requires the separate purchase of server space and domain names), but Klynt offers a step-by-step guide to the process.


The Kylnt workshop at Sheffield Doc/Fest 2014

Klynt negotiates a delicate balance between simplicity and complexity: on the one hand, it presents filmmakers with an interface they’re familiar with (most will have used mindmaps and video editors before in their careers). This can let them develop an instinctive workflow for their project. In turn, they can give their viewers a stylish and original interactive narrative experience. However, simultaneously, Klynt has taken inspiration from the dense, specialized world of web coding to develop the underlying principles of the software. And occasionally, the language of code wins out over the language of film. Filmmakers without a predisposition for technology might be intimidated by the difference… but it’s important to point out that without Klynt, filmmakers would have to learn to code from scratch to achieve the same level of control over the online presentation of their work. Or they’d have to pay considerably more than the cost of a Klynt licence to hire someone in to do it for them.

Klynt ensures that all content created belongs to the filmmaker, and does not revert to Klynt through use of software. It holds regular webinars for beginner and advanced users of its software, available through their website. Klynt costs $599 for the full ‘pro’ edition and $199 for the ‘lite’ version, which comes without responsivity, iframe integration, or analytics from the project.



Racontr, like Klynt, has been designed and built to allow storytellers to create interactive experiences with their material. But unlike Klynt, Racontr is currently a cloud-based application. Movies can become multimedia, data can become dynamic, and audiences can be gathered and cultivated within your projects.

The advantages of a cloud-based app are self-evident: no downloads are required in order to start a project, for one. The web-based aspect also introduces a social element to Racontr, allowing other site users to comment on your work after you publish it. Having a developing project online allows for a team of makers to be highly collaborative: multiple team members can work remotely on the project at the same time. However, it’s important to note some Dropbox-style issues with the cloud’s Autosave function: if two people are working on the same page simultaneously, you can’t be sure which version was saved by the program. When developing your interactive experience, you’re also reliant on Racontr’s website being functional at all times. After completion, though, project files can be downloaded for €149 fee, to be rehosted elsewhere. As Racontr’s site is still in beta, this is a necessity for now.

The group that developed Racontr also organises Storycode Paris. They’re French-based, obviously, and so the default language of the Racontr site is French. If you’re not a francophone, be sure to scroll down to the bottom of the Racontr home screen before you log in. There, you’ll find a British flag icon, which will translate most of Racontr’s pages into English.


Racontr workshop at Encounters 2014

A dynamic project can be created with Racontr in a few weeks, with some media assets to use as raw materials and a little design know-how. “The concept is that if you are a graphic designer, or like a graphic designer, you can make something”, says Gerald Holubowicz, our hackathon leader at Encounters Bristol and one of the Storycode Paris team. Smoking 2.0, an interactive project which mapped contemporary smoking practices, was made in three weeks at a workshop in Paris. Participants used Google Docs, embedded into Racontr, to create an input form for an audience questionnaire about their own smoking habits. Holubowicz points out that including a form can not only bring you more information about your chosen topic, but “can serve as a validator” for a project (that is, if you present it at the end of the experience, you’ll find out how many people actually made it all the way to the end). Clickable parts of the interface were indicated with a red flash, providing a tutorial for the user within the interface by showing them how to navigate within the project.

Mike Knowlton, one of the founders of the Storycode group, described Racontr at a Tow-Knight Centre talk in May: “It’s different from ‘website-in-a-box’, crank-it-out type of things. This is more like Flash, but it creates HTML5, CSS3 compliant code”. But it does have a striking capacity for coping with wide ranges of material, and our own hackathon showed that, as Gerald said, fully-fleshed projects can be made in weeks, rather than months of development. The level of compatibility with other formats is impressive: for example, you can upload your Photoshop files straight into Racontr without converting them first. It also automatically converts all of the major video formats. However, the Racontr team do recommend resizing images to your desired dimensions before uploading them, to “avoid time-consuming resizing when uploading your content in Racontr”. It might seem like a minor point, but it soon becomes major if it’s not observed: if you come to a program like Racontr with a completed project (a film, an album, a curated collection of photos), and you’re looking to add interactivity, don’t necessarily expect to be able to simply throw everything in and then modify it to specification within the program itself.

It is possible to have multiple projects in development on your account, and you can switch between them easily on your account page. Click ‘editor’ to resume working on them. In the header of the ‘scenario’ screen, you will find a navigation bar that can take you to your media library, or let you set the project’s page properties. In this pop-up screen, you can name your project, and make it compatible with ‘dinosaur’ versions of IE simply by ticking a box. If required, change the canvas size for custom display. You can choose between fixed size and full screen, and if you have a project full screen, you can modify the iframe to control and adjust it further. This is a particularly useful feature for when your projet is finished and in circulation: clients or distributors don’t have to host a project themselves, but they can embed it with the iframe code. Bear in mind that the project cannot be adjusted once it has been exported: if a project was made in 900px frame, it might get compressed when embedded elsewhere. And if you have a Google Analytics account, the page properties pop-up is where you put in the code to track statistics on usage. The fonts option, meanwhile, allows you can choose between the Racontr library or upload your own. After you’ve chosen your preferred settings, go back to ‘scenario’ to create your home page.


The Racontr interface

Editing each page, and its features, has been streamlined for ease of use. A very simple vertical toolbar is to be found on the left side of the screen. It allows you to control the content and actions of each page you edit: the embedded media, the hyperlinks, and the animations. You would usually require a jQuery library to get a similar level of creative control over animating your web pages. Here, the system becomes a combination of drag and drop, and then setting the parameters for each movement you want to create. Import your media by clicking the plus sign, and create an ‘action layer’ to make the asset dynamic in some way. Action layers can be resized manually, by grabbing the corner of the box. It’s important to rename every sequence for clarity – but also be sure to name every layer descriptively, as well as every page and piece of media. Click on the lowest icon in the vertical toolbar to see your layers listed according to their level on the page (that is, which assets and actions are on top of which. This becomes important as you add more layers). Select multiple items on the list to lock them and move them together. As well as the animation options given by action layers, there are options for simpler elements of design. You can generate basic geometric shapes to use as borders and backgrounds for text and other media. Tweaks to the shape’s opacity, its corners, its colour, can be made through the ‘element properties’ icon in the toolbar.

To animate your elements, you must create keyframes in your timeline. The timeline can be found minimised at the bottom of the screen. Keyframes can be moved at will, and deleted easily. To decide what will happen when an icon is clicked, go to ‘click action’. Tell ‘click action’ which type of action to apply – parameters such as width, scale, and opacity can be controlled. Changing the opacity to zero will cause the element to disappear when clicked, and you can time the fadeout with the delay option. By clicking ‘back’, you can reverse the action.

Racontr’s FAQ contains useful info such as a list of Racontr keyboard shortcuts. For those stuck for inspiration, or who need help assembling interactive features, there are a few templates, plugins and freebies available. It’s recommended that Racontr is used with Chrome rather than Firefox or IE, and there is currently no responsive option. Racontr is free for the first 500mb, and you can buy more space on the cloud as you develop more projects (one extra GB for €5/month, or five extra GB for €20/month), or purchase plans ranging from €290-990/month (if billed annually). These are obviously aimed as business users and large production companies; but the option remains for indies to make compelling interactive experiences even with limited time and money resources available to them.



“What is a story?” asks Florian Thalhofer at the Korsakow hackathon in Brighton. The audience’s responses consider ‘structure’, ‘communication’, ‘changes in situations’, ‘ideas’, ‘message’, ‘experience’. But no single answer wins out. “Humans are narrative creatures” he says. “Causal thinking forms decision making… but Korsakow is not the linear-causal way of thinking”.

Korsakow is an open-source tool available for PC and Mac platforms. Its name was derived from a psychological phenomenon known as Korsakoff’s syndrome. In Korsakoff’s, alcoholics with short-term memory loss begin to compulsively tell stories, in order to preserve a sense of narrative in their lives. With narrative, with stories, comes a sense of purpose and meaning. The “linearity of getting drunk”, as Thalhofer puts it, is the organising principle Korsakow uses to allow filmmakers to approach narrative in a more open way. Instead of holding to a linear structure, a K-film can shift, deviate and diversify as it goes on, according to the choices the audience makes at select points. The results of their choices can be entirely predetermined or entirely randomised, according to the filmmaker’s design.

For Thalhofer, this method of presenting a story confers a significant advantage: it potentially bypasses the usual editorial constraints a filmmaker faces. Online, the storyteller has the latitude to use content that might have been cut from a traditional film, particularly if it wasn’t perceived to ‘progress’ the narrative in an efficient way. Sometimes, he wryly notes, the initial response to K-films is that they’re boring… but, he adds, an appreciation comes later. The audience adapts to a more interactive mode of watching movies, learning the rules of engagement as the experience unfolds. So what is lost in narrative pacing may be gained in giving the software’s users – filmmakers and audiences alike – the freedom to explore multiple aspects of a story that might have been simplified in a more traditional format with more standardised editorial preferences.

IMG_0594 - Copy

The Korsakow workshop at Brighton Cinecity 2014

Korsakow films are, as the team puts it, always rule-based, often non-linear, and often interactive. And since narrative logic in Korsakow can be determined by rules beyond those of traditional story development, filmmakers have come up with playful and experimental conceits that would be difficult to realise in traditional film formats. Matt Soar developed an abstract, randomised K-film called Fibonacci Korsakow, which uses a database of Vine videos as its source of content. Soar used the Fibonacci sequence as an algorithm to determine how many video clips would appear on screen at a time. As more appear, they spiral outwards, appearing in new arrangements every time the film is played.

Released in 2000, the first Korsakow workshop was held at Mediamatic, Amsterdam, in November 2001. Version 5, the software’s most recent release, was programmed using Java. It’s crucial to realise that if you’re installing the software on to a PC, you’ll need Quicktime on your computer, including the legacy file ‘qtjava’. This file doesn’t come automatically bundled with the ‘minimum’ or ‘full’ QT installation, and if Korsakow isn’t running at all on your PC, this may be why. Download Quicktime again, select ‘custom’ download, and be sure that you’re installing the qtjava file as well.

No programming experience is required to use Korsakow, but an understanding of how programmers think is still helpful for understanding how menu nesting and asset management is handled by the software. Korsakow has a much simpler, less polished interface than those of other interactive filmmaking software, with a less ‘consumer-facing’ style that is characteristic of its open-source background. From the main menu, the user can create their SNU: Korsakow-speak for the Single Narrative Unit, or the smallest cohesive piece of a given project. First, drag a media asset into the Korsakow window. Double-clicking the media asset in the main menu will bring up its individual SNU Editor, where it can be SNU-ified for integration into the project: in- and out-keywords can be added, and start and end points determined. An in-keyword describes the SNU, and an out-keyword matches it to other SNUs in the project. Labelling the SNU with keywords determines the behaviour of the unit in relation to the whole K-film… they are considered so important, the Korsakow manual refers to them as the ‘DNA of a K-film’. It may be counterintuitive to make keywords so crucial to a project’s narrative development, but this function does allow the user to match up SNUs as they wish, and in potentially complex ways. When a media asset has been successfully SNU-ified, it will have a red, white and blue cube icon next to its name in the main menu.

Each SNU can be assigned a Preview image that will represent it onscreen, and subtitles and text can be inserted through this process. These, along with the SNU window, constitute the ‘basic widgets’ of an interface design for a K-film. As well as these, Korsakow also allows for media control widgets (play buttons, volume control). A K-film can also be made more interactive or complex with the history, multi-link preview, or commenting functionalities that are available as ‘experimental’ widgets. This final type, however, is not supported. Widgets are to be found by selecting the option in the Tools tab. The Settings tab can control the interface and grid, including its size and background.


The Korsakow interface

For creating a relatively simple project, Korsakow recommends the default interface, which presents one SNU widget with three Preview widgets underneath it. The interface will be the layout of the film itself, and so it represents what the film’s audience will see and the choices they will have when they reach a particular screen. For more complex projects, which either require more choices or demand a freer, more experimental approach to narrative, the Interface Editor is available. A novice may wish to begin with the simpler default version and progress to the more sophisticated editor as they become accustomed to the software. The user can preview and test their project at will by exporting it to their web browser. There is an extensive manual available at, including a video that provides useful explanations for Korsakow jargon. There’s also a succinct quick-start guide for more confident users.

As well as making films for consumption online, Korsakow has been adapted for use in multiple-screen installations. (For installations, Thalhofer uses the older version of the Korsakow software, version 3 – there was never a Version 4). At a screening of his own Money and the Greeks, the live audience was able to decide the direction of the narrative themselves. They would vote with laser pointers. The show also included two live guests, positioned in front of the audience, who were experts on the film’s topic. They could speak when selected by audience members to respond to events unfolding on screen. Another screen nearby showed text messages as they came in from the audience. In this instance, the interactive method had an explicitly political purpose: mimicking the democratic procedures of voting and consulting information sources in order to implicate the audience in the film’s central issues.

Korsakow recommends tinkering with another K-film before starting on your own: the files and interfaces for an example project, ‘Circle of Life’, are therefore made available for free to all users. The Korsakow application was previously free to download and use, but was moved to a licence-based model at the beginning of 2015. A basic licence is available for £33.28 at the time of writing. Non-commercial Korsakow projects with a budget of below 2500 US dollars are covered by the basic licence, and are therefore owned by their creators. Completed K-films can be hosted on a web server through the usual process (uploading your files to a server using an FTP client). Alternatively, a completed Korsakow project can also be uploaded to Korsakow Publisher for a set-up charge and a yearly fee.



Mozilla’s own foray into interactive filmmaking comes as part of their Webmaker kit, and part of their ‘mission to create a more open, web literate world’. The ‘Popcorn’ filmmaking tool is accessible via two routes: Popcorn Maker, and Popcorn.js. Popcorn.js is for those with access to a programmer, and is the resource used in Mozilla’s interactive film hackathons. Popathons, run by interactive platform developer Philo van Kemenade and filmmaker Gilles Pradeau, are 48 hour events which team up coders with storytellers and user experience designers, challenging them to develop a prototype for an interactive media project.

Popcorn Maker is an in-browser editor, intended, as Mozilla says, to allow its users to ‘remix the internet’. With a straightforward, clean graphical interface, it is designed to be user-friendly and intuitive. Like other interactive filmmaking tools, its layout mimics most mainstream video editing software, with a timeline, monitor, and toolbar providing a library of functions. But its display is minimalist and uncluttered, and interaction rarely gets more complicated than drag-and-drop, press a button, or copy-paste a link.


The Popcorn Maker interface

To import a video into a project, the user pastes in the YouTube address; to include a photo, they use the relevant Flickr URL. In fact, much of Popcorn Maker’s functionality comes from its compatibility with other platforms. Users can extend the scope of their work by using 3D models from Sketchfab, or audio hosted on Soundcloud. In keeping with the principle of ‘remixing the internet’, all media files are hosted online, not by Mozilla’s own servers. Your Popcorn Maker project is really a collection of hyperlinks. This fits well with Mozilla’s philosophy of freedom on the web, encouraging users to reach out and grab content from wider afield than their own hard drive. But, as Pradeau points out, if a linked video is removed from YouTube, it’ll be lost to your project as well.

Signing in allows a user to save their project, and clicking ‘Publish’ will make it searchable and viewable on A project’s URL will remain constant even if you re-edit your work later. Mozilla’s emphasis on a culture of remixing means that your work is not only expected to draw from the internet, but can be offered up in turn to be remixed by fellow Webmaker members. If someone chooses to remix your work, a new version is generated, while your original (and its URL) stays intact.

By building this collaborative facility in, Mozilla follows through on the principles of democratic access and engagement that they promote. Your audience is able to contribute and become part of the creative process, in a way that is consequential and artistic, rather than just following the mechanics of clicking on whatever external links you embed in your film.

While Popcorn Maker was built with a JavaScript library, Popcorn.js is a JavaScript library in itself, with the wider range of functionality and freedom that affords. If you know how to code, or you’re working with someone who can, you can design and build a web-based interactive video project from the ground up, and host it on your own site.


The Popcorn workshop at Stoke Your Fires 2015

With Popcorn.js as his main tool, Justin McIntosh of Rebellious Pixels created Right Wing Radio Duck (, a dynamic mashup of Donald Duck cartoons and Glenn Beck’s radio show. As the audio-video mashup plays, detailed text annotations flash up around it. These notes offer definitions and descriptions for various ideas referenced in the film, and provide links to the source media used to create the mashup. In this way, the interactive functionality points users in two directions. It feeds extra information into the experience, giving it more depth and context. But simultaneously, it directs the audience outwards, encouraging them to navigate away from the site and explore further. A simpler version of the project could theoretically have been made with Popcorn Maker alone, but the site’s HTML framework means that the detailed annotations can be displayed outside the frame of the video screen, and don’t clutter the video.

The URL’s title is ‘semantic remix’, and the concept of ‘semantic remixing’ is a complex issue for interactive storytellers and user experience designers. At first, viewers will presumably orientate themselves by focusing mainly on the video, simply ignoring most of the notes that surround it. An audience not used to non-linear story structures might find these detailed text pop-ups distracting or confusing. But again, this disorientation can be seen as part of the political aspect of the project, and of remixing in general. As an artistic intervention, it takes familiar cultural images and sounds and reworks them to create something new. Importantly, this use of interactivity forces its audience to be conscious of how they’re taking in the story, and demands that they re-watch in order to get new perspectives and narrative experiences.

Philo van Kemenade suggests that Popcorn Maker has played an important role in showing how time-based narrative dynamism can be created through the web. But Popcorn.js has been an acknowledged trailblazer for the interactive documentary format, used to create experiences such as Katarina Cižek’s Highrise. ‘The project put webdocs on the map’ Philo says. ‘It was a collaboration with Mozilla, and it came out of their philosophy of democratising the web: that it is not just something you use, but something you make’. Popcorn.js was just one of the JavaScript code libraries used in the immersive, in-browser, dynamic 3D documentary, which allowed the viewer to explore various highrise buildings. As the Highrise website says, Popcorn ‘is the event sequencer for the documentary, triggering the launch of JavaScript code at precise times to display camera moves, animations, video and audio playback, and pulling in semantic data from Flickr and Wikipedia’. They explain that using JS libraries allowed their team to build within an entirely open-source framework (it’s even available to view on Github).

If you’re interested in what the Popcorn.js library is capable of, the user manual is available to browse on their documentation page, Though a large-scale interactive project will need to be built by a programmer, it’s worth a look for filmmakers as well. It provides a jargon-free insight into what functions the code recognises. As Popcorn.js was constructed with filmmakers and filmmaking in mind, it borrows from the vocabulary of filmmaking to describe certain functions (e.g., ‘to cue’ a decision in your project means to programme a timer into it, and trigger it automatically). Popcorn Maker is almost too straightforward to even require a help page, but its own short guide is refreshingly honest about troubleshooting potential problems. And as it says: the code is open source, and anyone who encounters a problem is welcome to get involved and fix it themselves.



Interlude’s interactive platform, Treehouse, is named after its central metaphor: with interactive platforms, narratives can be made to ‘branch out’ in all sorts of directions. As a video plays, multiple-choice options present themselves to the viewer, who can then choose which branches they’d like to climb out on to explore further. That idea of playfulness and exploration is crucial to the Treehouse philosophy, and it’s visible in many of the high-profile projects made with the application. Vania Heymann’s interactive music video for Bob Dylan’s Like a Rolling Stone is just one example of that concept writ large. Viewers, presented with an interface designed to look like a TV, could ‘channel-surf’ as the song played, and see the lyrics mimed in real-time by the stars of every programme they came across.

With a desire to bring interactivity to their band’s own music videos, Interlude’s founders originally made the tool for themselves. But as interest grew in the Internet’s capacity to give an audience a non-linear film experience, they released Treehouse as a self-service platform for filmmakers. “Getting someone to lean in, to engage, is our biggest goal”, says Interlude’s Omri Anghel, echoing his colleague Yoni Bloch. Omri suggests that, compared to non-interactive experiences, there’s an up-to-eightfold increase in the likelihood of a viewer sharing a Treehouse link with others.

This is where the Treehouse philosophy takes on a more serious character. As well as an in-browser editing platform, the Treehouse dashboard also offers users access to metrics that tell them how viewers are engaging with their project. Those with Premium accounts can collect more precise analytics, right down to seeing user decision-making broken down choice-by-choice. Metrics used in marketing are useful for documentary filmmakers, suggests Omri, as well as for narrative feedback generally.


The Interlude Treehouse workshop at Flatpack 2015

This is an approach to creativity that sees online interactive filmmaking as part of a continuum – not necessarily with traditional film and video, but with other online services, products and experiences. Treehouse, from the visual style of its website to the language by its founders, recognisably draws from the ambitious, aspirational culture of Internet start-up companies. This is a world which believes in the critical importance of receiving quantifiable statistical feedback from your users, as often as possible, and in learning about and improving upon ideas based on the new information gathered. From an artistic perspective, this might seem unromantic, and overly business like. But the form of interactive storytelling is still new, and the culture of the internet demands that, if people are really going to engage with it in a meaningful way, a story must capture their imaginations as quickly and decisively as possible. Whether this is a good or bad thing, the internet is undeniably a competitive environment for media content, and demands that careful attention is paid to the behaviour of an audience.

As with other interactive platforms, the Treehouse editing interface resembles that of current digital video editing software, from Adobe Premiere Pro to Final Cut Pro. The user’s media library is to their left, their monitor in the upper centre, and a set of tools for changing project settings to their right. But the timeline that appears at the bottom of the screen is very different. Instead of following the usual layered design of a video editor, it is three dimensional. Treehouse doesn’t refer to it as a ‘timeline’ at all, but as a ‘tree area’ (or as a ‘canvas’). Users can pull their media assets from their library and into the tree area to create a node. Nodes are then connected together by dragging from one (the parent) to another (the child). The more detailed editing choices, concerning the individual contents of each node (the exact points that a button appears or disappears, for example) are decided and developed within the monitor and its toolbar options. This is known as the Node Editor. Here, choice buttons can be designed and added. Their style, placement and duration can be decided by the user. If you want to give your viewers an Easter egg option, add an invisible button. Use the transform tab function to change the opacity of a button element. Place it over an image in your video to make the image into a link that takes to user to another node.

But these element features need a strong narrative structure underlying them if they are to present meaningful options to the viewer. “It’s not just about creating choices or decision points. It’s about creating valuable choices”, Omri points out. As an interactive narrative experience is developed, decision branches will multiply out exponentially, and the tree will usually start to become a bit unwieldy. But the tree area, with its diagram-like structure, is optimised for rearranging the narrative’s progression as simply as possible. The user can more easily focus on creating narrative choices that are both clear and rewarding. The tree area’s own layout can be adjusted via the grey floating toolbar, known as the ‘tree toolset’. The interface can be enlarged, or dragged around so the user can more easily navigate to other parts of their tree. As the nodes on the canvas are inevitably not very detailed, simple icons appear within any nodes that contain media, to represent their content visually (so a node containing a video generates a small camera icon). Users can also hover over any node to see a thumbnail from the media file inside it.


The Interlude Treehouse interface

Even when the viewer reaches the end of a narrative path, they are not necessarily finished their experience. The film can be designed to play again, with an alternative introduction, so that viewers can see what would have happened if they had chosen other options at various points. In the vein of other interactive platforms such as Mozilla’s Popcorn, Treehouse has factored in the idea that replaying – climbing other branches – should be an intrinsic part of the experience, one that users will expect to have available to them when they participate. The philosophy behind Treehouse, Omri says, is that if your interactive piece is an “internet based concept, or project”, you’ll “therefore prefer videos to be online”, and design them as internet-based interactive experiences. Finished projects can be published to Interlude’s community platform, the Playhouse, and a client can be given an iframe if they would like to embed the project into their own site. As Treehouse is responsive, it’s compatible with most operating systems, across desktop computers, mobiles and tablets. New users are offered templates to play with, intended to introduce them to the Treehouse workflow – but the pre-designed Interview and Quiz formats will save a lot of time for users with those particular mechanics already in mind.

Treehouse’s editing suite is elegant, but also robust. Despite being web-based, it’s capable of handling large media files without a struggle, and boasts a reliably accessible and consistent online experience. This will potentially make it appealing to newcomers who are curious about what interactive software is, as well as to more heavy-duty, tech-literate filmmakers, who might have already designed an ambitious interactive project and would like to implement it with minimal frustration or fuss. Its core concept of interactivity is, like a few other platforms, based primarily on the choose-your-own-adventure mechanic. However, its deceptively simple tools are allowing users to experiment and innovate with interactive forms, beyond simply offering audiences multiple paths through a story. It’s revealing that the projects available in the Playhouse are so formally diverse, and that many of them (from quizzes to interviews to games and beyond) are difficult to imagine in a more traditional long-form film format. They appear to have been developed, filmed, and edited with their potential for audience interaction in mind from the start. This emphasis on the significance of interactivity as the central method of storytelling, and not just an add-on, has allowed Interlude’s platform to help push the boundaries of what it means to make something ‘interactive’.



‘Technology should leave storytellers alone’ is one of the founding principles of Storygami, the interactive platform created by Guy Gunaratne and Heidi Lindvall. It’s comparable in some ways to Mozilla’s Popcorn Maker: rather than a tool for connecting multiple videos in a branching narrative, it allows filmmakers to create interactive overlays for a single video project. Image galleries, social media feeds, blogs and other text can all be added to the main video. The viewer can then access this content as the main video plays, by clicking buttons as they appear on screen, or choose from a full list in the menu bar to the right of the video. The team says that their research suggests a 50/50 split between those who like the timed approach, where the buttons appear in the frame, and those who preferred to choose from the menu and explore interactive content at their own pace.

The origins of Storygami are worth exploring in more detail, as many aspects recur in the histories of other platforms. It’s a start-up, but its founders come from filmmaking rather than business backgrounds, and the idea itself came about as a solution to a problem they experienced directly. ‘The rectangular boxes of video seemed restrictive’, they tell the workshop. They knew they wanted to be able to push their narratives beyond a traditional film format… though at first, they weren’t sure what that might mean.

They started by founding a documentary production company, CODOC, not long after they graduated. It created content for brands, but also provided a base for their video journalism and human rights work. Together, they created a three-part doc on Sri Lanka, ‘The Truth that Wasn’t There’, as well as ‘Forgive me Mother’, a film about Uganda. They were enthusiastic and ambitious. With an earnest video manifesto and a motto of ‘online discussion, offline discourse’, they aimed ‘to contribute to debate’ on human rights issues. However, they were left feeling overwhelmed by their complex, emotionally-charged subject matter: ‘we weren’t equipped to tell these stories’, admits Guy. They found themselves with enormous amounts of material, but would need to cut most of it to serve the needs of a linear film narrative. And as they point out, going to larger companies with the extra material wouldn’t help: ‘Knowing that your interview with a displaced person in a camp in Sri Lanka is going to end up as a soundbite in a newsclip really sucks’.

Storygami Workshop

The Storygami workshop at Thinking Digital 2015

They decided that a solution to this problem might be to include the extra material as part of a larger multimedia online experience. Storygami’s first iteration was used by CODOC in-house, to build bespoke interactive experiences for individual clients. But in May 2012, they pitched in a Virgin Media Pioneers competition to make the tool into an online platform. From there, their R&D began in earnest, as they investigated which interactive features would be most useful, engaging, and accessible for particular audiences.

The agility of Storygami is impressive. The principles of seamlessness and simplicity are not just applied to the audience’s experience of interactivity, but to the filmmaker’s own use of the platform. It’s easy to learn how to use Storygami… and once you’ve done that, it’s then very easy to turn out multiple interactive projects in one day. ‘We wanted to get past the idea that interactivity is very time consuming and bespoke’, Heidi tells the workshop. By 2014, Heidi and Guy were still building bespoke interactive experiences for brands, but decided to put their ideas to the test in a more intense environment. They returned to their interest in making politically-engaged films which could also handle narrative complexity, and travelled to Hong Kong to film that year’s protests. They used Storygami to make interactive videos that demanded detailed contextual information, and at the same time, needed a very fast turnaround. From that experience, they introduced an embed feature, so that interactive videos made with the platform could be inserted into other sites without losing their interactive features.

The team say they’re now in a ‘growth phase’, and are currently participating in the San Francisco incubator ‘500 Startups’. But they emphasise that they’re ‘resisting gearing the product towards’ advertising and marketing uses alone. ‘We’re focusing on the product and building it as well as we can’. They refer to Reddit’s ‘model of listening to its users and working out of their feedback’ as an inspiration. Realising the need for users to be able to access content beyond their desktops, the platform is now responsive, and there are plans to develop an iPhone app (for watching videos made with Storygami, rather than for making them).

Storygami is compatible with Vimeo and YouTube in the free version. Unlike Popcorn Maker, there’s no community forum on the site itself, but projects can be shared with others by embedding them into other sites. In the free version, users can choose from templates as starting-points from which to build new projects. These aren’t, however, ‘templates’ in the sense that Interlude’s Treehouse uses the word, so they don’t give users pre-designed interactive structures for their video. They simply offer users choices in the colour scheme of the project. But with a Brand or Starter account, users have more latitude when it comes to the colour and layout of the project’s borders and menu, including the option to add your own logo above the video.


The Storygami interface

When creating a Storygami video project, most of the workflow revolves around placing and timing ‘markers’. These markers (known as ‘elements’ on a few other platforms) are the buttons which allow the audience to access interactive content. Solid markers are not yet resizeable, so they’ll always appear to the viewer in a standard size; if the marker is made invisible, it can be positioned over an object in the video to make it interactive. But all markers can be given custom labels as the project is developing, via a list below the video monitor. The list is hierarchical, so markers can be prioritised or deprioritised by dragging them up or down the list. With Brand and Enterprise accounts, it’s also possible to add a marker for external HTML, so that when a viewer clicks the link, it will open another site for them in a new tab. For all accounts, a menu bar is automatically generated for your video, to be filled with a list of the interactive elements in your project.

Storygami’s advantage lies in its tendency towards minimalism and speedy construction. It has a short learning curve, both for new users who wants to build an interactive project, and for viewers who might be new to interactive concepts. As projects can be cloned simply by renaming them, a user can make their own interactive template, and apply the interactive structure they built to their next video projects. As a new and growing start-up, Storygami may develop in new directions, and are still experimenting with new features as they scale into a larger company. The free service is available through signing up to the site. The paid services are tiered, including a Starter account, with custom branding and 50 standard videos for $49/month; a Brand account, with 50 premium videos, advanced analytics, custom branding and customer support at $399/month for 1 year; and the specialised Enterprise account for custom builds.



As I’ve taken part in Doc/Fest’s interactive filmmaking workshops, I’ve learned that the platforms emerging in this field are offering two distinct types of interactive capability.

The first allows a user with multiple video clips to organize them into a variety of possible narrative experiences. Clickable buttons can appear at certain points of a video, and allow the audience to choose their own route through the story. Broadly speaking, Klynt, Racontr, Korsakow and Interlude Treehouse fall into this category. If we wanted to label it for convenience, it’s sometimes referred to as the ‘choose-your-own-adventure’ narrative format.

The second is what has been dubbed ‘time-based’ interactivity. Here, there’s usually just one main video. As it plays, buttons or icons can appear at pre-determined times, for the viewer to select if they want to (or there’ll be a menu to the side for them to browse). The button allows the viewer to explore the video’s story in more depth. It might open up an image gallery, or the biography of someone interviewed in the film. Our other two platforms, Storygami and Mozilla’s Popcorn Maker, could both be characterised as ‘time-based’… or again, to give them a label, as ‘press-the-red-button’ platforms (like a more sophisticated version of the BBC’s interactive service for TV).

It’s a bit of an oversimplification, but those are the two prominent forms that are surfacing. I think there are a few things to be read into that. You can see how, as it develops into a medium in its own right, interactivity is now conceptualised in different but complementary ways. One the one hand, with Storygami and Popcorn Maker, it’s a tool that can expand the capacity of the film’s frame, giving it depth. On the other hand, it’s a tool which offers breadth. It can expand a film’s capacity for narrative progression and deviation. Audiences can be asked to choose the story… and perhaps to change it as well. You might end up giving the audience a feeling of freedom and power. Or, by forcing someone to make choices, you can make them feel trapped, because they’re being compelled to decide something. Both types of interactivity are considered ‘non-linear’ storytelling forms, but they aren’t the same non-linear forms.

Some of the ‘choose-your-own-adventure’ platforms allow you to add annotations within the frame as well, but that hasn’t made the second type of platform obsolete. If you want to make a project that has annotations in the frame, the advantage held by using Storygami or Popcorn Maker is that they’re both very fast. A video can become an interactive project within hours. For both platforms, the user pastes a YouTube URL into the interface, and starts adding overlays (buttons, etc.) using the platform. Afterwards, the interactivity won’t show up on YouTube itself, but a finished Storygami project can be embedded on other sites. Or for Popcorn Maker, you can share it in the communal makers’ forum on the site.

A big difference between the two ‘press-the-red-button’ platforms is in their philosophies. Popcorn Maker, developed by Mozilla, invites its users to ‘remix the Internet’. Many users take videos made by other people, and create mash-ups with other media content. Storygami, meanwhile, is a start-up, designed to keep ‘technology out of storytelling’, in the words of co-founder Guy Gunaratne. The idea is to take your own stories, and use Storygami as an efficient, unobtrusive way to give them complexity, without having to stuff extra content into the video’s own central narrative. This form has obvious applications in political and educational narratives, where the viewer could have extra information made available to them at relevant points, but could pursue it in their own time and order.

But the ‘choose-your-own-adventure’, narrative-branching platforms also have their political and educational uses. You can use Klynt or Racontr to create the kind of ‘immersive’ interactive experiences you might have already seen in online journalism. Both platforms are well suited to taking a long-form story (which might comprise of lots of video clips, photos, audio, archive reports, etc) and restructuring it, so that it’s experienced by viewers as an investigation or an exploration. The key with these platforms is the emphasis on a story’s narrative unfolding in a particular sequence, or sequences. A story can then be experienced from many different angles, as a viewer makes their way through different routes. They might choose to start again afterwards and make different choices, finding new sequences or uncovering content they previously didn’t look into. Though they are similar in style, an important difference between Klynt and Racontr is that Klynt is downloadable software, while Racontr is an online platform. Personal preference might therefore dictate which to choose for a particular project.

Somewhat similar in form is Interlude’s Treehouse. Like Klynt and Racontr, the interface has a layout comparable to editing suites like Adobe Premiere Pro or Final Cut Pro (such as a project monitor and a media library). But all three platforms incorporate the visual structure of a mind-map to allow users to design their branching narrative pathways. An advantage in Treehouse is simplicity: the mind-map only represents the narrative’s pathways. Each node represents a media asset, and lines can be dragged and dropped from one node to another to represent a path. All the more detailed aspects of creating interactive elements (adding markers, buttons, and so on) are implemented on the on-screen monitor. Like Racontr, Treehouse is an online platform, and it also has an online community for sharing interactive projects. While Racontr’s community shows a preference for reportage, in Treehouse’s ‘Playground’ you can often find music videos and tutorials: the emphasis seems to be on clever short-form implementations of interactive features.

Korsakow, meanwhile, is something of a wild card. A distinctive characteristic of the platform is the potential not just for narrative choices, but for narrative randomisation. A project’s pathways can be predetermined, but ‘K-films’, as they’re known, can also generate new possibilities with every choice made by the viewer. This freeform approach to narrative logic has led to more abstract formal experimentation in Korsakow’s community, such as ‘Fibonacci Korsakow’. A K-film by Matt Soar, it takes from a database of Vine videos to make a viewing experience that never repeats itself. Florian has described the Korsakow philosophy as ‘rule-based’ filmmaking, where the filmmaker, rather than plotting out every permutation of a narrative path, can have their project play according to rules they institute in their design. The interface in which the filmmaker creates the project is unique in Korsakow as well: connections between assets are made using keywords instead of a mindmap. Keywords determine which paths lead ‘in’ to the asset, and which lead ‘out’ to others. Though this unusual workflow takes some getting used to, it can open up a range of unique possibilities for experiments in interactive experience-building.

It’s worth noting that, while you can use all of these platforms without knowing a line of code, both Korsakow and Popcorn Maker are open source, so users can potentially build their own interactive tools for use with either one. Klynt’s media player is also open source, so its appearance can be customised with specially written code.

As I wrote up my reports over the course of last year, I tried to almost make them crash courses or practical guides. I wanted to really encourage someone new to interactivity to download and try them for themselves, and not to be put off by minor problems. But I found that I kept running into the same problem for each report. It was a problem with terminology. Because the filmmaker (or storyteller) for a given project is the person who engages with a platform’s interface, I kept referring to them as the ‘user’. But because the filmmaker is building an interactive project, and designing a ‘user experience’ for their audience to follow, I also wanted to refer to that hypothetical audience – the one at the end-point – as the ‘user’ too. Of course, that would have been confusing for the reader. I’ve mostly referred to the person who engages with your finished project as a ‘viewer’ instead, even though the term seems inadequate, as they don’t simply ‘view’ it. Sometimes I call them the ‘audience’, but even that seems too passive a term to describe engaging with an interactive project.

I think those language problems were revealing. When it comes to interactive platforms, there are actually two users: the ‘filmmaker-user’ and the ‘audience-user’. They will inevitably share common experiences (for a start, if the construction of a narrative is botched, the filmmaker-user’s confusion or frustration will soon be the audience-user’s as well, if you – the first user – don’t fix the problem).

But more significant, I think, is that when the project is released, the decisions that the ‘audience-user’ makes as they experience the story aren’t simply afterthoughts or add-ons. Those are creative decisions as well. So in fact, there is no ‘end-point’ for these projects. All the options you present to your audience in the project give them their own interactive platform – whether they choose a particular sequence for the narrative, or whether they click certain multimedia buttons and explore further because of those choices. Interactivity, when it’s used imaginatively, isn’t just non-linear storytelling.

There’s been a lot written about how film, filmmaking, and the audience’s experience of film as a medium are all changing because of the internet. But I’d like to emphasise that it’s not just channels of distribution, and it’s not even just the way we present stories, that are being disrupted.

By using these platforms, I’ve learned that when it comes to interactive projects, the audience is integrated into the workflow itself. They’re now a commissioner, a producer, a co-editor. Interactivity, when used innovatively, isn’t just a ‘call and response’ relationship where the audience clicks buttons to see extra images. Depending on the user experience design, ideas can be made to keep flowing between the project’s maker and their audience. A filmmaker might give their audience a space leave some feedback at the end of a project, so they can tell you what they thought of it… but they might go further, and give them a space where they can contribute their own stories, for new viewers to find and experience later. Some of these platforms allow live Twitter feeds to be integrated into projects, bringing potentially surprising elements into the viewer’s experience.

And the mutual nature of that influence makes creative development not just collaborative, but an ongoing process, even after an interactive project has been released. Because of platforms like the ones represented in the workshops, interactivity is expanding, because it’s now becoming accessible – to independent filmmakers without funding, or to people who aren’t coders, or who can’t afford to hire coders. And I think it’s going to have consequences for online storytelling that will have a scope and a reach extending beyond what anyone’s predicting right now.


Comments are closed.