Let's focus on the content presented in sync with the film itself. Look at the panels surrounding the video and you'll see a lot going on. As our hero takes photos in the live action, images pop up in the right siderail, then a newspaper article with that photo appears beneath in the detail panel. Similar things happen with beautiful graphic novel style artwork filling us in on the backstory. Even links to purchase books related to the story appear. And on the left siderail, a Mission Control tab streams a feed of DEA agents' conversation in sync with the live action. How is all this being done?
HTML5 In. Flash Out.
Let's start by pointing out this is not some elaborate monolithic Flash movie with all the interactivity and content programmed in at great effort and expense. Rather, the content is assembled dynamically at runtime and rendered as HTML in a series of widgets that surround the core video player. Two benefits of this approach are quick and easy production and the ability to change content and timing continuously. So even after the film is released, the experience can be tuned based on audience reaction. Let's break down how it works.
There is a whole back end authoring environment for assembling Multipops from the original media. The tool is web-based, and includes the usual features to upload and manage video files. Synced content is also defined within the tool. This includes image files of the photographs, newspaper articles & artwork, plus text of the DEA messages and URLs to purchase products on Amazon.com. In aggregate, we call this the Item Catalog.