Popcorn Maker will empower everyone to make interactive video for the web. Read about the vision and our roadmapping efforts. If you want to help out, have a look at the open tickets in Lighthouse.
Happy 0.2 Birthday, Dave
Last week, the Popcorn team wrapped the 0.2 milestone toward Popcorn Maker, cheekily codenamed Ghostbusters. (This made for a great release party, with a special screening of the movie and a Stay Puft-themed cake).
This release encompassed 104 tickets, which is pretty intense. Major props to Bob Richter, Jon Buckley, Scott Downe, Chris, Dave, and the rest of the CDOT crew. And this is just getting started.
Because this is a release focused on rewriting Popcorn Maker’s foundations, we’ve skipped deployment for 0.2. But you can play around with the new UI in a sandbox here. And you can also check out the changelog.
What’s new?
A lot has changed. I’ll call out 4 things in particular:
1. Stronger software foundations
Butter is the software development kit for Popcorn Maker and other Popcorn-powered web apps. In the past, Butter was tucked into the Popcorn Maker app, which loaded HTML templates in an iframe and communicated with them in a somewhat unreliable way.
We want the foundations of Popcorn Maker to be strong. So we’ve re-factored Butter to live inside user templates. This makes for much more elegant code and reliable interactions.
A cool side effect of this is that any page can be turned into a Popcorn Maker template by simply including butter.js.
2. New and improved UI
Popcorn Maker UI, version 0.1
Popcorn Maker UI, version 0.2
Because Popcorn Maker is a WYSIWYG tool, it’s important that users have as much screen real estate as possible to visualize their projects.
So we’ve shrunk the tray to the smallest practical size. It’s 25% thinner than before. And we’ve moved the playhead to the status bar, so you have access to the whole timeline even when the tray is minimized.
We’ve added a layer of polish all around—lots and lots of nice touches. Track events are now distinguished by color and have more pleasing regions for moving and stretching. Track events are now selectable, which will pave the way for multiple event selection, copy+paste, and undo operations. In all, this makes the app feel much more tangible, and approaching the level of polish you’d expect in a native app.
3. Droppable regions
Popcorn events are now drag-n-droppable.
Popcorn Maker now lets your drop a Popcorn event (say, a map) directly onto the page target.
This is a small change that will make the app many times more usable. We’ll be introducing an even nicer “Add Popcorn” flow in the next release. And we’ll be exploring other drag-and-drop concepts over the year (like dropping a video into the page to upload).
4. Accounts and saving
Thanks to Cornfield—the Popcorn server—this is the first Popcorn Maker release with server-side project storage. We have initial support for creating accounts with BrowserID and saving project data to the cloud.
Cornfield needs to be made more secure, so we have no public demo just yet. But if you’re inclined, you can clone Butter and Cornfield and test this locally.
Next up: 0.3, “Breakfast Club.”
This month, we’ll be rolling up all this work into a version of the app that will stand on its own. The 0.3 release, codenamed Breakfast Club, should be approachable by users and enable top-to-bottom project creation, saving, and publishing.
This release will introduce a temporary template loader that will tide us over between now and June, when we stand up a proper Django backend.
It will be a big challenge to coordinate all these things—Butter, Cornfield, the template loader, templates and documentation. But Popcorn Maker is getting more real—and more powerful—every day. Exciting stuff.
Currently at version 0.1, Popcorn Maker is a little crufty. But Popcorn Maker 1.0 will hit hard in November of this year.
Popcorn Maker 1.0 will empower you to make cool web-based media, whether you’re a beginner or pro. With over 20 plugins—ranging from Twitter to Google Maps to video processing—you’ll be able to stitch up a stylish video that’s “woven” into the web. And, of course, it’s 100% free and open source.
Users will be able to publish and share their creations on their blog, Twitter, or Tumblr (or just grab the code). And the app will reward them for learning more advanced HTML, CSS, and Javascript skills.
When it hits critical mass, Popcorn Maker will be an engine for community innovation in open video.
Last week—thanks to four intense, caffeine-fueled days—the project team arrived at a pretty solid roadmap and vision for Popcorn Maker. Our issue tracker also includes several hundred new/reassigned bugs, mapped against cheeky code names for each release. (We’ve chosen a blockbuster movie motif, so look forward to 0.2 Ghostbusters, 0.3 Breakfast Club, 0.4 Top Gun, 0.5 Pulp Fiction, 0.6 Terminator, 0.7 Amelie, 0.8 Rushmore, 0.9 Wrath of Khan, and finally, 1.0—Matrix.)
What’s new? A heightened level of ambition, matched with increased rigor to get it done.
Starting in 0.7, you'll be able to embed a viral Popcorn player on third-party sites.
All of this is reflected in a shiny vision document, which is a work in progress (we’ll share next week). We’ve hashed out some user stories, gotten granular on the technical challenges, and imagined how the UI/UX might work. We need to kick the tires a bit before we’re confident in both the user stories and the roadmap, but we’re close.
We’d love to have your feedback in our Lighthouse issue tracker. (And, as always, we’d love to hear your template ideas! Feel free to create a ticket and let us know what’s on your mind.)
Here’s a look at some of our thinking.
Editor UI
Most users will experience the app as a special editor tray that sits on top of the project you’re working on (Popcorn Maker is a WYSIWYG tool). We need to get the editor UI/UX right. It needs to be compact but not constraining.
We’re moving event editors to the tray (in lieu of floating windows) and making it more intuitive to add Popcorn events to a page (just drag and drop onto the page target).
To make the app more versatile, we’ll offer a simple CSS editor UI to change your styles, without isolating you too much from the actual CSS:
Popcorn Gallery
The life-force of Popcorn Maker will be the Popcorn Gallery, which will let contributors share templates that others can build on. Call it the “WordPress.org effect.”
Plugins
You can use any popcorn.js plugin in Popcorn Maker. Even write your own.
Last but not least—plugins. Popcorn.js plugins are what make Popcorn Maker magic. We’re currently planning on supporting the following plugins, each with a pleasing editor UI (these are subject to change): Image, Video, Webpage, Wikipedia, Attribution, Media control, Apply class, Google map, Open Street Map, Chroma, Video effects, 3D object, Processing, WordRiver, PDF, DocumentCloud, Twitter, Facebook graph, Flickr.
One of the coolest things about Popcorn Maker, though, is that it will support every Popcorn.js plugin through a default editor. And plugin authors can create editor UIs for their plugins. In other words, the project is intentionally modular, so the Popcorn.js community can help us build out the functionality of the app.
As the community grows, the app becomes more powerful.
It’s going to be a hard sprint. But it’s super plausible, especially with Bobby Richter, Dave Humphrey, and the brilliant students of Seneca’s CDOT at the wheel. Here’s our roadmap, which will likely change a bit before we freeze it this month. Want to help? Join #popcorn in irc.mozilla.org, or join our mailing list.
Popcorn.js aspires to be “the jQuery of open video”—a set of building blocks for advanced HTML5 web apps that use video in new and exciting ways. The 1.0 release will be out later this year.
Brett asks: 'what are the opportunities presented by hyperlinking, browser-based compositing and non-linear storytelling?'
Though Popcorn has evolved into a very developer-centric project, it wasn’t always imagined as such. Popcorn was created to scratch our creative itches—bringing live data into stories, personalizing them, making them interactive, making them social. In short, taking visual storytelling in new and uncharted directions, taking advantage of all the capabilities of the web and web browsers.
This kind of creative experimentation—the kind for which Popcorn was created!—shouldn’t be limited to developers. The Mozilla Foundation wants to awaken the web maker in everyone, not just those who’ve mastered javascript. So a big priority, from very early in the project, has been creating tools for non-developers to explore the possibilities of what we’re calling “web-native” cinema. Here’s a look at where we’ve been, and where we’re going.
Round 1: Butter
Butter, our first stab at an authoring environment for popcorn.js.
Around November 2010, Brett started working with CDOT and Bocoup to develop a companion app to pair with popcorn.js. They called it Butter—because nothing goes better with popcorn than butter.
The app was imagined as a general purpose popcorn.js authoring environment for filmmakers. You’d visit the Butter web app, point it to your video file, and layer in elements of the web like live data, social networks, and the like.
You can try Butter today [try the stable or experimental versions]. The authoring interface mimics the track/timeline UI of popular video editing programs like Final Cut Pro or iMovie. But where adding a track in Final Cut or iMovie is part of the process of creating the edit, adding a track in Butter is part of the process of creating the web page. The track metaphor makes sense because we’re giving users the ability to play with time-based actions, like queuing a map of Alaska when Sarah Palin appears in the edit. The timeline interface lets filmmakers experiment with useful functions, tweak, and test the results. When users are finished creating their projects, they can export a chunk of HTML and host them anywhere.
This was a step in the right direction. Using alpha versions of Butter, we were able to run workshops where participants could quickly spin up their own popcorn projects. The feedback was great— it feels super empowering for a non-technical person to quickly create a popcorn.js-powered web page where their content is triggering all kinds of interactivity.
Solving the wrong problem
But there were two problems with this approach.
Do we want to do an 'authoring environment?'
1) The first problem had to do with the design of the product itself. From a user perspective, the app was pretty limited. There was no way for users to easily customize the layouts or visual styles of their projects. The way we had designed this iteration of the product constrained us to a single use case—a page with a video and a bunch of boxy widgets. These pages were interesting, but fell far short of the creative revolution we were hyping.
2) The second problem was strategic. Part of the long-term plan for Butter was to slowly add functionality for users to design custom pages. We wanted to provide a fuller authoring environment to let people create unique experiences that begin to approach the sophistication of something like The Wilderness Downtown. You would always need a lot of talent and a lot of elbow grease, but we would provide a basic toolkit for you to use.
The more we thought about it, the more we realized we were setting an unattainable goal for ourselves. Whatever authoring environment we delivered would take forever, would cost us a lot of money, and would probably suck. And we’re convinced that others (Adobe?) will take up the baton of making high-end HTML5 authoring tools for creative people, in any case.
So instead of developing a big and complex (and ultimately niche) tool, we decided to focus on the things we know best: the web, open-ended design, and community. This will help us make a much bigger impact in the non-developer-facing part of the Popcorn project.
Round 2: Popcorn Maker
The newly imagined Popcorn Maker; beta coming in September.
So we’ve scrapped some of our assumptions and reset our perspective. We pulled out the guts of Butter and refactored our existing work into a brand-new product: Popcorn Maker.
Popcorn Maker will be much more useful to our core filmmaker demographic. But we also think the potential demographic for Popcorn Maker is much bigger than filmmakers: it will interest creatives and web-makers of all stripes.
Popcorn Maker does one thing really well: add popcorn.js actions to any web page. Popcorn Maker won’t limit you to what you can design inside the confines of the app. Bring any web page into Popcorn Maker and you can make the video conduct the other page elements like a marionette. This is a big departure from Butter: in Popcorn Maker, what you see is what you get. (This is a bit abstract, so stay tuned for a walkthrough post from Brett that will help show how it works.)
This is a simple but incredibly powerful approach. It will enable people to create a huge range of HTML video experiences.
By following the conventions of the Butter API, developers and adventurous newbies can make their own templates. Just design a page using regular web technologies like HTML and CSS and give the popcorn-able elements some special attributes. Once you’ve designed a template to your exact requirements and specifications, you can import it into Popcorn Maker.
The WordPress.org Effect
WordPress.org harnesses community and code sharing—so will Popcorn Maker.
For those who don’t want to design their own templates—which will be most people—we’ll offer a template directory. Anyone can submit a template, and we’ll be encouraging people who make popcorn-powered pages to distill them into re-usable templates for Popcorn Maker. We will kickstart this directory by developing a bunch of templates for the kind of apps we know people want: book reports, walking tours, e commerce, and other tropes we’ve observed in the popcorn universe.
By making creators responsible for the design of their pages (or at least for picking an existing design from a templates directory) we’ll be able to make a much more open-ended and useful app. Instead of banking on our own ability to make the ultimate authoring tool for Popcorn, we’re aiming to get the scale benefits of people hacking, building, and sharing together. In a way, we are thinking of the Popcorn Maker template directory as a kind of wordpress.org for open video. As with wordpress.org, our users will be able to draw from the work of our growing developer community—and hundreds of plugins and templates—so they don’t need to start from scratch.
What’s next?
The new and improved Popcorn Maker incorporates our learnings from trial runs with The Factory program at BAVC. We’ll have an early, but feature-complete version of Popcorn Maker for them on August 15th. We’re hoping to do a general beta release of Popcorn Maker sometime in September.
We’re also experimenting with putting the Butter API that powers Popcorn Maker into other products. Dave Humphrey’s group at CDOT is experimenting with a plugin for Final Cut Pro that will embed Popcorn Maker into FCP itself, so filmmakers can edit and develop popcorn.js projects in one integrated step. We’ll continue to develop Popcorn and its galaxy of plugins and templates on its steady march to 1.0. And we may even be experimenting with some long form content to show just what the web can do for the craft of storytelling.
The story of Popcorn.js is an admirable one; envious developers strive to build libraries with the kind of amicable response and contribution streak that Popcorn has enjoyed lately. Yet, we strive for more.
If you haven’t been formally introduced, meet Butter: The Popcorn Timeline Tool. At a release point that Popcorn can only look back upon with fond and fading memories, Butter isn’t yet at the maturity to be called stable.
An incredible amount of work went into the first iterations of Butter, thanks to people at Bocoup, like Rick Waldron, and now we have the foundations from which to build a productive and comfortable user experience.
Arguably, there are harder problems to solve while building something like Butter than something like Popcorn. They’re not programming problems; there are lots of those wherever you look, many of them hard or impossible to solve. So, maybe ‘harder’ isn’t the correct word. But, there’s something alluring and demanding about the complications of a primarily user-facing (as opposed to developer-facing) piece of software that must be confronted for the sake of the product’s success.
Like any piece of software with a GUI, Butter needs to face problems of usability. We need to really focus on some key points:
By using Butter, which tasks are users able to complete (to some degree)?
Which of these tasks are most desirable?
Of those tasks, does Butter currently accomplish them with ease, consistency, and stability?
I believe that the strong points of Butter are those which directly concern timelines. Again, Popcorn is an incredible library, but using it requires a lot of JavaScript. Butter’s primary goal should be to alleviate the tediousness of manual (boilerplate) syntax regurgitation, and, right now, almost nothing else. It needs to accomplish this so well that it is the default tool for users to accomplish event synchronization using Popcorn. In fact, when users think of Popcorn, they should immediately think of Butter, and begin to consult it for its expertise.
In the future, it’s conceivable (even already planned) that Butter will include better features to help not only synchronize Popcorn, but design the page in which Popcorn is used altogether.
So, for now, the roadmap for Butter looks like this:
Refactor parts of Butter that impede deft architectural abilities of contributors. Namely, the UI needs to use as much CSS as possible in place of its current canvas-oriented rendering structure. Butter can benefit from losing a few hundred lines of superfluous mouse-interface code.
Bring the abilities of Butter to align steadily with those of Popcorn. This means Youtube, Vimeo, and, in general, Player Plugin support.
Give users a better experience in using and editing the plugins. We can attempt to give users contextualized editing interfaces for different plugins. For example, for the Googlemaps plugin, we can use as much of the experience of Google Maps as possible to increase consistency for users (i.e. users are already used to manipulating maps on Google Maps, so let’s try to capitalize on that).
With these three high-level goals in mind, editing the timeline for a Popcorn project with Butter will become simple and obvious for Popcorn users. For more detail on the roadmap, I encourage you to explore the wiki on the webmademovies/butter github project page: https://github.com/webmademovies/butter/wiki/.
Any feedback is welcome. You can try the most bleeding edge version of butter at http://butterapp.org/edge/.
1. Stronger software foundations
This month, we’ll be rolling up all this work into a version of the app that will stand on its own. The 0.3 release, codenamed Breakfast Club, should be approachable by users and enable top-to-bottom project creation, saving, and publishing.
