Popcorn Report

April 16, 2015 2:44 pm



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.

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 www.webmaker.org. 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.


With Popcorn.js as his main tool, Justin McIntosh of Rebellious Pixels created Right Wing Radio Duck (www.rebelliouspixels.com/semanticremix), 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, http://popcornjs.org/documentation. 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.

Comments are closed